Reputation: 1667
I have a javascript object which has the nested array called interaction, now what I wanted to do is a loop from each object of the main array and fetch the values from the interaction array, I'm a kind of a newbie with iteration and looping. here below is the object
var data = [{
'id':'1',
'boothid':[{'id':'1','name':'yyy'}],
'interaction':[{
'userid':'1',
'username':'user1',
},{
'userid':'2',
'username':'user2',
}]
},
{
'id':'2',
'boothid':[{'id':'2','name':'xxx'}],
'interaction':[{
'userid':'4',
'username':'user4',
},
{
'userid':'5',
'username':'user5',
},
{
'userid':'6',
'username':'user6',
}],
'resource':'2',
},
{
'id':'3',
'boothid':[{'id':'2','name':'zzz'}],
'interaction':[{
'userid':'4',
'username':'user4',
}],
'resource':'3',
}]
console.log(data);
expected output
yyy
{
"userid": "1",
"username": "user1"
}
{
"userid": "2",
"username": "user2"
}
xxx
{
"userid": "4",
"username": "user4"
}
{
"userid": "5",
"username": "user5"
}
{
"userid": "6",
"username": "user6"
}
zzz
{
"userid": "4",
"username": "user4"
}
here what I'm trying to achieve is, I want to loop from the data object and show that in the frontend, so basically the output will be in 3 tables with respected booth names ex: table1= xxx, table2=yyy, table3=zzz, and the users in a particular booth will be displayed at td of theirs table.
Upvotes: 1
Views: 203
Reputation: 2909
let interactions = [];
data.map(obj => {
interactions.push({
boothname: obj.boothid[0].name,
interactions: obj.interaction,
})
})
You can loop over "data" array with map it will give you each element on iteration where you can pick boothname from "obj.boothid" and interactions from "obj.interaction".
Upvotes: 0
Reputation: 1667
friends thank you for your response and ideas, as andy mentioned link the above comment helped me to get the required answer. here below is my answer
var data = [{
'id':'1',
'boothid':[{'id':'1','name':'yyy'}],
'interaction':[{
'userid':'1',
'username':'user1',
},{
'userid':'2',
'username':'user2',
}]
},
{
'id':'2',
'boothid':[{'id':'2','name':'xxx'}],
'interaction':[{
'userid':'4',
'username':'user4',
},
{
'userid':'5',
'username':'user5',
},
{
'userid':'6',
'username':'user6',
}],
'resource':'2',
},
{
'id':'3',
'boothid':[{'id':'2','name':'zzz'}],
'interaction':[{
'userid':'4',
'username':'user4',
}],
'resource':'3',
}]
for (let i of data){
console.log(i.boothid[0].name);
for(let j of i.interaction ){
console.log(j);
}
}
Upvotes: 0
Reputation: 2121
You can try this.
var data = [
{
'id':'1',
'boothid':[{'id':'1','name':'yyy'}],
'interaction':[{
'userid':'1',
'username':'user1',
},{
'userid':'2',
'username':'user2',
}]
},
{
'id':'2',
'boothid':[{'id':'2','name':'xxx'}],
'interaction':[{
'userid':'4',
'username':'user4',
},
{
'userid':'5',
'username':'user5',
},
{
'userid':'6',
'username':'user6',
}],
'resource':'2',
},
{
'id':'3',
'boothid':[{'id':'2','name':'zzz'}],
'interaction':[{
'userid':'4',
'username':'user4',
}],
'resource':'3',
}];
var result = data.map(({boothid, interaction}) => ({
boothname: boothid[0].name,
interaction: interaction.map(({username}) => username)
}));
console.log(result);
Upvotes: 1
Reputation: 349954
You can use a .map
. I made some assumptions:
boothid
array has always one entry. I'll assume this is always the case.The code:
let data = [{id:'1',boothid:[{id:'1',name:'yyy'}],interaction:[{userid:'1',username:'user1',},{userid:'2',username:'user2',}]},{id:'2',boothid:[{id:'2',name:'xxx'}],interaction:[{userid:'4',username:'user4',},{userid:'5',username:'user5',},{userid:'6',username:'user6',}],resource:'2',},{id:'3',boothid:[{id:'2',name:'zzz'}],interaction:[{userid:'4',username:'user4',}],resource:'3',}];
let result = data.map(o => ({
boothname: o.boothid[0].name,
interactions: o.interaction.map(({username}) => ({ username }))
}));
console.log(result);
Upvotes: 2
Reputation: 18083
I suggest you to use the map
function.
var data = [
{
'id':'1',
'boothid':[{'id':'1','name':'yyy'}],
'interaction':[
{'userid':'1', 'username':'user1'},
{'userid':'2', 'username':'user2'}
]
},
{
'id':'2',
'boothid':[{'id':'2','name':'xxx'}],
'interaction':[
{'userid':'4', 'username':'user4'},
{'userid':'5', 'username':'user5'},
{'userid':'6', 'username':'user6'}
]
}
];
var result = data.map(({boothid, interaction}) => ({
boothname: boothid[0].name,
interaction
}));
console.log(result);
Upvotes: 1