vue.js 从对象的数组生成数组的数组

gudnpqoy 于 2023-03-13 发布在 Vue.js

关注(0)|答案(2)|浏览(183)

我只是想从我的数据和列表中列出每个材料的基础上的状态。我的数组显示如下..

let data = [
        {
            Name: 'House 1', 
            Details:[
                {Materials: 'Door', Status: 'Delivered'},
                {Materials: 'Closet', Status: 'Pending'},
                {Materials: 'Chair', Status: 'Pending'},
                {Materials: 'Kitchen', Status: 'Delivered'},
                {Materials: 'Door Knob', Status: 'Delivered'}
            ]
        },

        {
            Name: 'House 2', 
            Details:[
                {Materials: 'Cabinet', Status: 'Delivered'},
                {Materials: 'Kitchen', Status: 'Delivered'},
                {Materials: 'Door', Status: 'Ongoing'},
                {Materials: 'Chair', Status: 'Ongoing'},
                {Materials: 'Window', Status: 'Cancelled'}
            ]
        },
        //Other codes here...
    ];

我想列出每种材料的状态。
预期输出：

[
    0: 'House 1'
        [
            0: 'Delivered': [ 0: 'Door', 1: 'Kitchen', 2: 'Door Knob' ]
            1: 'Pending': [ 0: 'Closet, 1: 'Chair' ]
        ]
    1: 'House 2'
        [
            0: 'Cancelled': [ 0: 'Window' ]
            1: 'Delivered': [ 0: 'Cabinet', 1: 'Kitchen' ]
            2: 'Ongoing': [ 0: 'Chair', 1: 'Door' ]
        ]
]
//where 0:, 1:, 2: is the index of each array(*nested array)
//i just added index like what you see in console.log(*but it's not required to show in final output)

我尝试使用forEach和.reduce，但似乎我的代码运行得不太好。
希望你能解决我的问题：）

vue.js

来源：https://stackoverflow.com/questions/75703448/make-an-array-of-array-from-array-of-object

2条答案

按热度按时间

41ik7eoe1#

所需的结构不能仅由数组表示;使用对象代替键-值对。你可以使用Array#reduce将元素按状态分组到一个对象中。

let data=[{Name:"House 1",Details:[{Materials:"Door",Status:"Delivered"},{Materials:"Closet",Status:"Pending"},{Materials:"Chair",Status:"Pending"},{Materials:"Kitchen",Status:"Delivered"},{Materials:"Door Knob",Status:"Delivered"}]},{Name:"House 2",Details:[{Materials:"Cabinet",Status:"Delivered"},{Materials:"Kitchen",Status:"Delivered"},{Materials:"Door",Status:"Ongoing"},{Materials:"Chair",Status:"Ongoing"},{Materials:"Window",Status:"Cancelled"}]},];
let res = Object.fromEntries(data.map(o => [o.Name, o.Details.reduce((acc, curr) => {
  (acc[curr.Status] ??= []).push(curr.Materials);
  return acc;
}, {})]));
console.log(res);

赞(0）回复(0）举报 2023-03-13

rqqzpn5f2#

这看起来和你要的很接近。都是数组。

let data=[
    {
        Name: 'House 1', 
        Details:[
            {Materials: 'Door', Status: 'Delivered'},
            {Materials: 'Closet', Status: 'Pending'},
            {Materials: 'Chair', Status: 'Pending'},
            {Materials: 'Kitchen', Status: 'Delivered'},
            {Materials: 'Door Knob', Status: 'Delivered'}
        ]
    },
    {
        Name: 'House 2', 
        Details:[
            {Materials: 'Cabinet', Status: 'Delivered'},
            {Materials: 'Kitchen', Status: 'Delivered'},
            {Materials: 'Door', Status: 'Ongoing'},
            {Materials: 'Chair', Status: 'Ongoing'},
            {Materials: 'Window', Status: 'Cancelled'}
        ]
    }
];
let newData=[];
for(let i in data){
    let delivered=data[i].Details.filter(e=>{if(e.Status==="Delivered")return true});
    let Pending=data[i].Details.filter(e=>{if(e.Status==="Pending")return true});
    let Ongoing=data[i].Details.filter(e=>{if(e.Status==="Ongoing")return true});
    let Cancelled=data[i].Details.filter(e=>{if(e.Status==="Cancelled")return true});
    let t=[data[i].Name,[],[],[],[]];
    for(let x in delivered){
        t[1].push(delivered[x].Materials);
    }
    for(let x in Pending){
        t[2].push(Pending[x].Materials);
    }
    for(let x in Ongoing){
        t[3].push(Ongoing[x].Materials);
    }
    for(let x in Cancelled){
        t[4].push(Cancelled[x].Materials);
    }
    newData.push(t);
}
console.log(newData);

赞(0）回复(0）举报 2023-03-13

我来回答

vue.js 从对象的数组生成数组的数组

2条答案

相关问题

热门标签

最新问答