How do I loop over a list which consists of multiple objects and adding their properties in a seperate list?

Question

I am creating a graph in javascript and I need to extract my data from my JSON input. the input comes in like this [object1,object2,...*, x_axis_data] There can be indefinite amount of objects and the data can vary. Each object has a group attribute so I can further classify them. Each object always will have a key corresponding to an entry on the x_axis_data array. Ex.

x_axis_data = [Mon, Tue, Wed];
obj1 = {"group":"first","Mon":"1","Tue":"15","Wed":"22"};
obj1 = {"group":"second","Mon":"9","Tue":"13","Wed":"21"};

I have managed to separate the x_axis_data from the rest of the array and now I have 2 arrays - one for x_axis_data and one containing the objects.

    for(var z in data){  //loop through all of the object properties
        var val_inner_lst = []; //array of the object data for current object
        group.push(data[z].group); //add the group to a separate array
        for (var i=0; i<interval.length; i++){
            val_inner_lst.push(data[z]+"."+interval[i]); //where my error happens
        }
        values.push(val_inner_lst); //add the individual array to the main array
    }

expected result:

group = [first, seconds];
values = [[1,15,22][9,13,21]];
interval = [Mon, Tue, Wed];

recheck your code. You are not using objects `{}` you are using arrays `[]` — Maheer Ali, Feb 01 '19 at 09:32
Do you set the `interval` before hand? If yes, I might change my answer — adiga, Feb 01 '19 at 10:01

score 0 · Accepted Answer · answered Feb 01 '19 at 09:44

You need to store your object is an array and then use forEach to achieve your desired.

let x_axis_data = ['Mon', 'Tue', 'Wed'];
let objArr = [{"group":"first","Mon":"1","Tue":"15","Wed":"22"},
{"group":"second","Mon":"9","Tue":"13","Wed":"21"}];

let groups = []
let values = [];
objArr.forEach(obj =>{
 let arr = []
 x_axis_data.forEach(data=>{
  arr.push(parseInt(obj[data]))
 })
 values.push(arr);
 groups.push(obj.group)
})
console.log(groups);
console.log(values);

adiga · Answer 2 · 2019-02-01T09:53:21.200

You could do something like this using Object.values, Object.keys and a Set.

data = [{"group":"first","Mon":"1","Tue":"15","Wed":"22"},{"group":"second","Mon":"9","Tue":"13","Wed":"21"}]

groups = [];
values = [];
interval = new Set();

data.forEach(({group, ...days}) => {
  groups.push(group);
  Object.keys(days).forEach(k => interval.add(k))
  values.push(Object.values(days))
})

console.log(groups)
console.log(values)
console.log([...interval])

The above might work for you. But, Object.values and Object.keys don't guarantee the same order. That could mess up the chart and show wrong value to wrong key. So, you could loop through the interval keys to and get the values in the same order:

data = [{"group":"first","Mon":"1","Tue":"15","Wed":"22"},{"group":"second","Mon":"9","Tue":"13","Wed":"21"}]

groups = [];
values = [];
interval = new Set();

data.forEach(({group, ...days}) => {
  groups.push(group);
  Object.keys(days).forEach(k => interval.add(k))
  values.push([...interval].map(k => days[k]))
})

console.log(groups)
console.log(values)
console.log([...interval])

score 0 · Answer 3 · answered Feb 01 '19 at 10:09

For completeness sake, in this for-loop where you get an error, you push a string into val_inner_lst (or try to do and get an error). Using the + operator with a string in JavaScript will try to convert the other party, in your case data[z] which is an object, to a string too.

To access the value at the key interval[i] of object data[z], you need to do data[z][interval[i]]

for (var i=0; i<interval.length; i++){
  val_inner_lst.push(data[z][interval[i]]); 
}

How do I loop over a list which consists of multiple objects and adding their properties in a seperate list?

3 Answers3