Create a multidimensional array from an array of objects

Question

Create a multidimensional array from an array of objects

I am trying to organize my data by creating an array and listing each material based on its status. Here is the structure of my current array:

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...
    ];

My goal is to display a breakdown of the status for each material in the expected output format shown below.

Expected Output:

[
    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: represent the index of each nested array
//the indexes have been added similar to console.log output for reference but they are not mandatory in the final result

I have attempted to use forEach and .reduce methods, but I am encountering issues with my code execution. Your assistance in resolving this problem would be greatly appreciated :)

javascript arrays vue.js object

Answer 1

Answer №1

To accurately represent the desired structure, it is recommended to utilize objects instead of arrays for key-value pairs. A more effective approach would involve utilizing Array#reduce to organize elements based on their status within a single object.

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);

Answer 2

To accurately represent the desired structure, it is recommended to utilize objects instead of arrays for key-value pairs. A more effective approach would involve utilizing Array#reduce to organize elements based on their status within a single object.

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);

Answer 3

Answer №2

The solution provided closely aligns with your requirements, utilizing arrays effectively.

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);

Answer 4

The solution provided closely aligns with your requirements, utilizing arrays effectively.

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);

Create a multidimensional array from an array of objects

Answer №1

Answer №2

Similar questions

Managing and Streaming Music in a Rails Application

The power of Swift combined with Firebase arrays

Encountering a problem with loading ajax data in jVectorMap

Detecting the failure of chrome.extension.sendRequest

development session not persisting on local server (localhost:4200)

Does the class "col-sm-4" in bootstrap automatically become "col-sm-4 col-md-4 col-lg-4" if col-md and col-lg are not defined?

Attempting to invoke a function containing a promise in Javascript

Using JavaScript to implement form authorization in ASP.NET Web API

Issues arise when submitting the form on a web page with an MVC 4 partial view, causing the page

Is there a method to verify the presence of a message event listener already?

How can we identify all the foreign_key1 ids from a MySQL join table that have a specific foreign_key2 assigned to them that is within a specified list?

Customize the appearance of Woocommerce's blockUi feature with your

I am experiencing difficulty accessing links within my website using Node.js, Express.js, Webpack, Vue.js, and history mode without copying and pasting

What steps can I take to make sure a particular node is successfully loaded and ready for use using JavaScript/jQuery?

Exploring error management in Vue3 and Vite when deploying to production

Looking to display a div with both a plus and minus icon? Having trouble getting a div to show with left margin? Need assistance hiding or showing div text

How can I implement Jquery ajax calls in various JavaScript functions?

Tips for deactivating the highlight on a previously selected menu item when clicking on the next menu option in Angular.js

Eliminating Matching Elements from Pair of Numpy Arrays

Incorporating TypeScript with jQuery for efficient AJAX operations