loop from nested object javascript

Question

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.

• Andy: What code have you tried - you should add that to your question - and what should your output look like?
• Saurav Kumar: please add your code that you at least tried
• CodeBug: hi @SauravKumar well as i told i'm kind of newbie with looping so didn't found any idea for try.
• Andy: Loops and iteration is an introductory read.
• Barmar: SO is not a tutoring service, you need to learn the basics elsewhere. What you want is nested loops: An outer loop to process the data array, and an inner loop to process the interaction arrays.

Answer 1

You can use a .map. I made some assumptions:

• At the time of writing the expected output has non-unique properties in single objects in the "itarations" array. Maybe you intended to have that object split into separate objects, each with its own "username" property.
• "itarations" is a non-existent word. Maybe you meant "interactions".
• In the example, the 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);

• CodeBug: yes exactly this is what I was looking for, thank you very much, you solved my problem along with that you gave me some lead to think further, thank you so much.
• Hamza Khursheed: Yes it works but we can omit o.interaction.map as o.interaction array is needed as it is.

Answer 2

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

• CodeBug: hi Olivier thank you for your answer, please check the question, i had updated it with the expected output.

Answer 3

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

Answer 4

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

Answer 5

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".