How can I loop over a multi level JSON object and create a new Javascript object from one of it's key and values

Question

I have a JSON object that looks like the following

{
    "venue": {
        "time1": [
            {
                "Status": "Available"
            },
            {
                "Status": "Unavailable"
            },
            {
                "Status": "Unavailable"
            }
        ],
        "time2": [
            {
                "Status": "Available"
            },
            {
                "Status": "Available"
            },
            {
                "Status": "Unavailable"
            }
        ]
    }
}

I want to loop over this object and create a new object that has the times as the key and an array of status' as it's values. So the new object would look like the following...

{
   "time1": ["Available", "Unavailable", "Unavailable"],
   "time2": ["Available", "Available", "Unavailable"]
}

NB: I'm struggling with this, because i can't manage to reach the array. I have tried various maps, reduce etc. but with no joy, and I can't seem to find the right answer on SO because, I'm not sure what to search for.

score 1 · Answer 1 · answered Aug 20 '21 at 04:55

The JavaScript Object obj.venue is converted into an array (Object.entries(obj.venue)), each of their timeX arrays is then processed (get the Status-value of each object) and eventually it is converted back into an object again using Object.fromEntries().

All this can be done in a single line of code:

const obj= {venue: {time1: [{Status: "Available"},{Status: "Unavailable"},{Status: "Unavailable"}],
                    time2: [{Status: "Available"},{Status: "Available"},{Status: "Unavailable"}]} };
                    
const res=Object.fromEntries(Object.entries(obj.venue).map(([k,v])=>[k,v.map(st=>st.Status)]));

console.log(obj); // original object remains unchanged
console.log(res);

This also would have worked, but I prefer @VJR08's answer as it's a little clearer to understand — i-am-niall, Aug 20 '21 at 08:50

score 1 · Accepted Answer · answered Aug 20 '21 at 05:44

Run a reduce over object's key-value pairs to get the desired result. Here is a snippet for your reference. Comments are inline

const obj = {
  venue: {
     time1: [{Status: "Available"},{Status: "Unavailable" },{Status: "Unavailable" }],
     time2: [{Status: "Available" },{Status: "Available" },{Status: "Unavailable" }]
  }
};

const result = Object.entries(obj.venue).reduce((acc, element) => {
  // Destrcuture key, values here
  const [key, status] = element;
  // Run a map to fetch the status and then assign it to the key
  acc[key] = status.map((item) => item.Status);
  return acc;
}, {});

console.log(result);

This is exactly what I was looking for! The map inside the reduce function is what I was missing! I had tried various combinations of these as well as a for of loop but couldn't seem to get there. Your solution is perfect! — i-am-niall, Aug 20 '21 at 08:47

Nat · Answer 3 · 2021-08-19T21:52:55.080

0

const a = Object.values(your_object)[0];
a['time1'] = a['time1'].flatMap(x=>Object.values(x))
a['time2'] = a['time2'].flatMap(x=>Object.values(x))
console.log(a)
/*
{
  time1: [ 'Available', 'Unavailable', 'Unavailable' ],
  time2: [ 'Available', 'Available', 'Unavailable' ]
}
*/

edited Aug 19 '21 at 21:52

answered Aug 19 '21 at 21:45

Nat

323
1
6

score 0 · Answer 4 · answered Aug 19 '21 at 21:57

POJO (Plain old javascript object) cannot be iterated: Iterable Objects

The only solution is to read the object entries and then access the internal array. However, note that iterating over object does not guarantee that the order is maintained SO discussion

That said, you can use any of the object iterable methods ["keys", "values", "entries"] to access the inner data.

Using entries()

Object.entries(jsonObj.venue).map(entry => console.log(entry))

score 0 · Answer 5 · answered Aug 19 '21 at 22:25

hope this code helping you

var json= {
    "venue": {
        "time1": [
            {
                "Status": "Available"
            },
            {
                "Status": "Unavailable"
            },
            {
                "Status": "Unavailable"
            }
        ],
        "time2": [
            {
                "Status": "Available"
            },
            {
                "Status": "Available"
            },
            {
                "Status": "Unavailable"
            }
        ]
    }
}
Object.keys(json.venue).map((obj,index)=>json.venue[obj] = json.venue[obj].flatMap(ele=>Object.values(ele)),[])
console.log(json)

How can I loop over a multi level JSON object and create a new Javascript object from one of it's key and values

5 Answers5