1

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.

Improve this question
9
  • What code have you tried - you should add that to your question - and what should your output look like? Commented May 16, 2021 at 7:10
  • please add your code that you at least tried 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. Commented May 16, 2021 at 7:11
  • 1
    Loops and iteration is an introductory read. Commented May 16, 2021 at 7:13
  • 1
    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. Commented May 16, 2021 at 7:15

5 Answers 5

Reset to default
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);

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

2 Comments

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.
Yes it works but we can omit o.interaction.map as o.interaction array is needed as it is.
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);

Improve this answer

1 Comment

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

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

Improve this answer

Comments

0

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

Improve this answer

Comments

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.