JavaScript добавляет json к существующему объекту
Я борюсь с добавлением JSON к существующим объектам с помощью Vue.js. Итак, у меня есть функция, которая вычисляет некоторые варианты, и на данный момент она работает хорошо, но мне нужно будет изменить их, чтобы передать правильные данные моему бэкэнду Laravel.
Вот так выглядит мой массив (этот массив используется для расчета вариантов)
"attributes":[
{
"title":{
"text":"Size",
"value":"1"
},
"values":[
"Red",
"Green"
]
},
{
"title":{
"text":"Color",
"value":"2"
},
"values":[
"X",
"M"
]
}
]
И я их рассчитываю так:
addVariant: function () {
const parts = this.form.attributes.map(attribute => attribute.values);
const combinations = parts.reduce((a, b) => a.reduce((r, v) => r.concat(b.map(w => [].concat(v, w))), []));
this.form.variants = combinations;
},
И результат выглядит так:
"variants":[
[
"Red",
"X"
],
[
"Red",
"M"
],
[
"Green",
"X"
],
[
"Green",
"M"
]
]
Итак, это хорошо рассчитано, но эти варианты должны выглядеть так:
"variants":[
{
"title": "Red/M",
"slug": "prooooo",
"options": [
{
"key": "Color",
"value": "Red"
},
{
"key": "Size",
"value": "M"
}
]
},
{
"title": "Red/X",
"slug": "prooooo",
"options": [
{
"key": "Color",
"value": "Red"
},
{
"key": "Size",
"value": "X"
}
]
}
Как видите, у меня есть поле заголовка, которое вычисляется с помощью options.values, но реальный вопрос заключается в том, как сделать так, чтобы этот JSON выглядел как последний заданный JSON.
Есть идеи, как это сделать?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Из того, что я вижу, недостающие значения для создания окончательного вывода - это свойства key массивов options, которые я вижу в первом массиве attributes под свойством text объекта title.
Первое изменение, которое вы можете сделать, это создание переменной parts: вместо того, чтобы возвращать attribute.values напрямую, map поверх них, чтобы также сохранить attribute.title.text.
В то же время мы устанавливаем ключи возвращаемого объекта, чтобы они соответствовали объекту options из желаемого вывода.
const parts = this.form.attributes.map((attribute) =>
attribute.values.map((value) => {
// `options` objects have `value` and `key` properties
return { value, key: attribute.title.text };
})
);
Код combinations остается прежним.
Затем мы перебираем combinations и создаем новый массив variants.
let variants = [];
for (const combination of combinations) {
variants.push({
// use template strings to create the new title
title: `${combination[0].value}/${combination[1].value}`,
slug: "...the value that you want",
// the "combination" variable already has the structure that you want for "options"
options: combination
});
}
Окончательный код будет выглядеть примерно так:
addVariant: function () {
const parts = this.form.attributes.map((attribute) =>
attribute.values.map((value) => {
return { value, key: attribute.title.text };
})
);
const combinations = parts.reduce((a, b) =>
a.reduce((r, v) => r.concat(b.map((w) => [].concat(v, w))), [])
);
let variants = [];
for (const combination of combinations) {
variants.push({
title: `${combination[0].value}/${combination[1].value}`,
slug: "...the value that you want",
options: combination,
});
}
this.variants = variants;
}
На самом деле value не является частью этой функции, поэтому кажется, что этот код работает не так, как ожидалось: / На самом деле он говорит, что Object (...) не является функцией
Вы можете указать мне строку, которая вызывает проблему? Он работал нормально, когда я тестировал код
На самом деле это после переменной вариантов, я попытался удалить функцию foreach и вернуть варианты с комбинациями const, и это работает, если foreach находится в коде, он не работает
Ой, теперь работает, наверное, из-за этого значения ... Большое спасибо !!!
Рад, что это сработало! Не забудьте отметить ответ как принятый, если он помог
Я считаю, что этот код - тот, который мне нужен, единственное, что значение "не определено в экземпляре", - говорится в консоли.