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.

What code have you tried - you should add that to your question - and what should your output look like? — Andy
– Andy, Commented May 16, 2021 at 7:10
hi @SauravKumar well as i told i'm kind of newbie with looping so didn't found any idea for try. — CodeBug
– CodeBug, Commented May 16, 2021 at 7:11
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. — Barmar
– Barmar, Commented May 16, 2021 at 7:15

trincot · Accepted Answer · 2021-05-16 07:42:45Z

2

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

answered May 16, 2021 at 7:42

trincot

357k38 gold badges282 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CodeBug Over a year ago

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 Over a year ago

Yes it works but we can omit o.interaction.map as o.interaction array is needed as it is.

Olivier Boissé · Accepted Answer · 2021-05-16 07:36:56Z

1

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

edited May 16, 2021 at 7:36

answered May 16, 2021 at 7:26

Olivier Boissé

18.5k7 gold badges54 silver badges70 bronze badges

1 Comment

CodeBug Over a year ago

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

Ayaz · Accepted Answer · 2021-05-16 07:47:00Z

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

CodeBug · Accepted Answer · 2021-05-16 08:02:02Z

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

Hamza Khursheed · Accepted Answer · 2021-05-18 06:22:25Z

0

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

edited May 18, 2021 at 6:22

answered May 16, 2021 at 7:27

Hamza Khursheed

2,9692 gold badges17 silver badges18 bronze badges

Collectives™ on Stack Overflow

loop from nested object javascript

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related