CodeBug
CodeBug

Reputation: 1667

loop from nested object javascript

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

Answers (5)

Hamza Khursheed
Hamza Khursheed

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

CodeBug
CodeBug

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

Ayaz
Ayaz

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

trincot
trincot

Reputation: 349954

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

Upvotes: 2

Olivier Boissé
Olivier Boissé

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

Related Questions