How to loop through object - JavaScript

Question

targetId = [313,309,307,318,317]
data={
313:[{time:..., value:...},
{time:..., value:...},
{time:..., value:...},
{time:..., value:...},
],
303:[{time:..., value:...},
{time:..., value:...},
{time:..., value:...},
{time:..., value:...},
],
309:[{time:..., value:...},
{time:..., value:...},
{time:..., value:...},
{time:..., value:...},
],
307:[{time:..., value:...},
{time:..., value:...},
{time:..., value:...},
{time:..., value:...},
],
322:[{time:..., value:...},
{time:..., value:...},
{time:..., value:...},
{time:..., value:...},
],
318:[{time:..., value:...},
{time:..., value:...},
{time:..., value:...},
{time:..., value:...},
],
317:[{time:..., value:...},
{time:..., value:...},
{time:..., value:...},
{time:..., value:...},
],
311:[{time:..., value:...},
{time:..., value:...},
{time:..., value:...},
{time:..., value:...},
]
}

Can someone help me please. So I need to loop through data object and if data property match with one of number from targetId list then I need to extract all values from that property and store them in separate list.

for (let i = 0; i < targetId.length; i++) {
if(targetId[i] === data.[property])
separateList.push(data.[property].value)
}

I guess something like this should maybe do it but need to somehow add looping through object

• adiga: Either map or flatMap depending on the output you need: targetId.flatMap(k => data[k])

Answer 1

Array of arrays

You can Array#map over targetId and pick items from data and extract values as an array again using .map():

targetId.map(
 id => data[id].map(({value}) => value)
);

Demo:

const targetId = [313,309,307,318,317]
const data = {
 313:[
 {time:3131, value:3131},
 {time:3132, value:3132},
 {time:3133, value:3133},
 {time:3134, value:3134},
 ],
 303:[
 {time:3031, value:3031},
 {time:3032, value:3032},
 {time:3033, value:3033},
 {time:3034, value:3034},
 ],
 309:[
 {time:3091, value:3091},
 {time:3092, value:3092},
 {time:3093, value:3093},
 {time:3094, value:3094},
 ],
 307:[
 {time:3071, value:3071},
 {time:3072, value:3072},
 {time:3073, value:3073},
 {time:3074, value:3074},
 ],
 322:[
 {time:3221, value:3221},
 {time:3222, value:3222},
 {time:3223, value:3223},
 {time:3224, value:3224},
 ],
 318:[
 {time:3181, value:3181},
 {time:3182, value:3182},
 {time:3183, value:3183},
 {time:3184, value:3184},
 ],
 317:[
 {time:3171, value:3171},
 {time:3172, value:3172},
 {time:3173, value:3173},
 {time:3174, value:3174},
 ],
 311:[
 {time:3111, value:3111},
 {time:3112, value:3112},
 {time:3113, value:3113},
 {time:3114, value:3114},
 ]
}
const result = targetId.map(
 id => data[id].map(({value}) => value)
);
console.log(result);

Single array

If you want a single array of values, not an array of array of values, then use Array#flatMap:

targetId.flatMap(
 id => data[id].map(({value}) => value)
);

Demo:

const targetId = [313,309,307,318,317]
const data = {
 313:[
 {time:3131, value:3131},
 {time:3132, value:3132},
 {time:3133, value:3133},
 {time:3134, value:3134},
 ],
 303:[
 {time:3031, value:3031},
 {time:3032, value:3032},
 {time:3033, value:3033},
 {time:3034, value:3034},
 ],
 309:[
 {time:3091, value:3091},
 {time:3092, value:3092},
 {time:3093, value:3093},
 {time:3094, value:3094},
 ],
 307:[
 {time:3071, value:3071},
 {time:3072, value:3072},
 {time:3073, value:3073},
 {time:3074, value:3074},
 ],
 322:[
 {time:3221, value:3221},
 {time:3222, value:3222},
 {time:3223, value:3223},
 {time:3224, value:3224},
 ],
 318:[
 {time:3181, value:3181},
 {time:3182, value:3182},
 {time:3183, value:3183},
 {time:3184, value:3184},
 ],
 317:[
 {time:3171, value:3171},
 {time:3172, value:3172},
 {time:3173, value:3173},
 {time:3174, value:3174},
 ],
 311:[
 {time:3111, value:3111},
 {time:3112, value:3112},
 {time:3113, value:3113},
 {time:3114, value:3114},
 ]
}
const result = targetId.flatMap(
 id => data[id].map(({value}) => value)
);
console.log(result);

Only existing results

If targetId might have items that aren't in data, then you can Array#filter and then .map()/.flatMap():

targetId
 .filter(id => id in data)
 .map(id => data[id].map(({value}) => value))

Demo:

const targetId = [313,309, 9001, 307,318,317, 42]
const data = {
 313:[
 {time:3131, value:3131},
 {time:3132, value:3132},
 {time:3133, value:3133},
 {time:3134, value:3134},
 ],
 303:[
 {time:3031, value:3031},
 {time:3032, value:3032},
 {time:3033, value:3033},
 {time:3034, value:3034},
 ],
 309:[
 {time:3091, value:3091},
 {time:3092, value:3092},
 {time:3093, value:3093},
 {time:3094, value:3094},
 ],
 307:[
 {time:3071, value:3071},
 {time:3072, value:3072},
 {time:3073, value:3073},
 {time:3074, value:3074},
 ],
 322:[
 {time:3221, value:3221},
 {time:3222, value:3222},
 {time:3223, value:3223},
 {time:3224, value:3224},
 ],
 318:[
 {time:3181, value:3181},
 {time:3182, value:3182},
 {time:3183, value:3183},
 {time:3184, value:3184},
 ],
 317:[
 {time:3171, value:3171},
 {time:3172, value:3172},
 {time:3173, value:3173},
 {time:3174, value:3174},
 ],
 311:[
 {time:3111, value:3111},
 {time:3112, value:3112},
 {time:3113, value:3113},
 {time:3114, value:3114},
 ]
}
const result = targetId
 .filter(id => id in data)
 .map(id => data[id].map(({value}) => value));
console.log(result);

• userXYZ: Can you plese help me with next situation: so that data object is comming in my component from this.props and sometimes I get following: data={ 313:[], 303:[], ... } so I get data object with empty arrays how can I check and add if statement to see if those properties 313,303... have empty arrays or not?
• VLAZ: @Kraki98 what needs to happen if the arrays are empty? If you want to ignore them, then you can use .filter(id => data[id].length > 0) before mapping.