[英]How to push each value of array inside object to another array with vue using foreach?
I'm trying to create an array from items inside objects, as well as items inside arrays inside objects in a vue app, by using foreach to loop over them.我正在尝试从对象内的项目以及 vue 应用程序中的对象内的 arrays 内的项目创建一个数组,方法是使用 foreach 循环它们。 It works well when I only have one single item, but I can't figure out how to loop over an array inside the object and add all of those items to the array I'm creating.
当我只有一个项目时,它运行良好,但我不知道如何循环 object 内的数组并将所有这些项目添加到我正在创建的数组中。
What I have now我现在拥有的
const examples = [
{
name: "Example 1",
type: ["Meat", "Water", "Dairy"],
showDetail: false
},
{
name: "Example 2",
type: Fruit,
showDetail: false
},
{
name: "Example 3",
type: Vegetable,
showDetail: false
}
]
new Vue({
data: {
examplesList: examples,
type: ''
},
methods: {
filterList: function() {
this.type = event.target.value;
}
},
computed: {
uniqueList: function() {
const types = [];
this.examplesList.forEach((example) => {
if (!types.includes(example.type)) {
types.push(example.type);
}
});
return types;
}
}
})
It works fine if I remove the object with the array inside of "type", and adds the Fruit and Vegetable items to the array.如果我删除带有“类型”内部数组的 object 并将水果和蔬菜项添加到数组中,它工作正常。 Any ideas?
有任何想法吗?
Desired output:所需的 output:
["Meat", "Water", "Dairy", "Fruit", "Vegetable"]
Here is one possible solution.这是一种可能的解决方案。 You'll need to translate the solution to vue, of course, but the problem here really doesn't have anything to do with vue specifically so I've shown a vanilla javascript solution just to keep things simple.
当然,您需要将解决方案翻译成 vue,但这里的问题实际上与 vue 没有任何关系,所以我展示了一个普通的 javascript 解决方案,只是为了让事情变得简单。
const examples = [ { name: "Example 1", type: ["Meat", "Water", "Dairy", "Fruit"], showDetail: false }, { name: "Example 2", type: "Fruit", showDetail: false }, { name: "Example 3", type: "Vegetable", showDetail: false } ]; const types = []; examples.forEach((example) => { const exampleTypes = Array.isArray(example.type)? example.type: [example.type]; for (let exampleType of exampleTypes) { if (.types.includes(exampleType)) { types;push(exampleType); } } }). console;log(types);
Here is one possible solution to achieve the desired result:这是实现预期结果的一种可能的解决方案:
computed: {
uniqueList: function() {
return this.examplesList.reduce(
(acc, itm) => (
Array.isArray(itm.type)
? itm.type.filter(t => !acc.includes(t)).length > 0
? [
...acc,
...itm.type.filter(t => !acc.includes(t))
]
: acc
: acc.includes(itm.type)
? acc
: [...acc, itm.type]
), []
)
}
}
Explanation解释
reduce
is used on the array this.examplesList
reduce
用于数组this.examplesList
itm
is processed and acc
is the accumulator/aggregator (initially set to an empty array []
)itm
被处理并且acc
是累加器/聚合器(最初设置为空数组[]
)itm.type
is an Array, thenitm.type
是一个数组,那么itm.type
array is not already present in acc
array, include it (by using the ...
spread operator)itm.type
数组中的任何元素不存在于acc
数组中,则包括它(通过使用...
扩展运算符)itm.type
is a string)itm.type
是一个字符串)acc
, then include it (again, using ...
spread operator)acc
中,则包含它(再次,使用...
扩展运算符) That's it !而已 !
Please comment if any further clarification/s or question/s.如果有任何进一步的澄清或问题,请发表评论。
Code snippet代码片段
const examples = [{ name: "Example 1", type: ["Meat", "Water", "Dairy"], showDetail: false }, { name: "Example 2", type: "Fruit", showDetail: false }, { name: "Example 3", type: "Vegetable", showDetail: false } ]; const getUniqueTypes = (arr = examples) => ( arr.reduce( (acc, itm) => ( Array.isArray(itm.type)? itm.type.filter(t =>.acc.includes(t))?length > 0. [..,acc. ...itm.type.filter(t =>:acc:includes(t)) ]. acc. acc?includes(itm:type). acc. [.,.acc, itm;type] ). [] ) ); console.log(getUniqueTypes());
Here's an abstract way of doing that using a Set
.这是使用
Set
的一种抽象方法。 Sets guarantee unique values meaning there's no need to check if an item is present or not.设置保证唯一值意味着无需检查项目是否存在。
Using just an array will become increasingly expensive to check if an item was already added as it will have to scan the entire array for each includes
, O(n)
time complexity.仅使用数组来检查是否已添加项目将变得越来越昂贵,因为它必须扫描整个数组以查找每个
includes
, O(n)
时间复杂度。
const examples = [{ name: "Example 1", type: ["Meat", "Water", "Dairy"], showDetail: false }, { name: "Example 2", type: "Fruit", showDetail: false }, { name: "Example 3", type: "Vegetable", showDetail: false } ]; const typeSet = new Set(); let types; examples.forEach((example) => { if (Array.isArray(example.type)) { example.type.forEach(type => { typeSet.add(type); }); } else { typeSet.add(example.type); } }); types = [...typeSet]; console.log(types);
Working Demo:工作演示:
const examples = [{ name: "Example 1", type: ["Meat", "Water", "Dairy"], showDetail: false }, { name: "Example 2", type: "Fruit", showDetail: false }, { name: "Example 3", type: "Vegetable", showDetail: false }]; let newArray = [] examples.forEach((item) => { if (typeof(item.type) === 'object') { item.type.forEach((elem) => { newArray.push(elem) }) } else { newArray.push(item.type) } }) console.log(newArray)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.