Adding items to different objects in a double for loop - Javascript

Question

It's confusing to try to explain, but I want to be able to add a list of skill sets to different people objects that are in their own list.

For example: I have a Json object of people:

"people": [
    {
        "id": 1,
        "name": "Tony Rogers",
    },
    {
        "id": 2,
        "name": "Steven Grant",
    },
    {
        "id": 3,
        "name": "Peter Wilson",
    },
]

and then I have a list of skills that I want to match up with them:

"skills": [
    {
        "id": 1,
        "name": "Engineering",
        "personId": 1
    },
    {
        "id": 2,
        "name": "Painting",
        "personId": 2
    },
    {
        "id": 3,
        "name": "Chemistry",
        "personId": 3
    },
    {
        "id": 4,
        "name": "Physics",
        "personId": 1
    },
 ]

but I am unsure how to get the output I want by looping through both lists. I would preferably like to append a "skills" section onto each person that contains all of their skills.

I thought I could do something along the lines of

people.forEach(function(person){
   skills.forEach(function(skill){

      if(skill.personId == person.id){ 
         person['skills'] = {"name" : skill.name};
      }
   });
});

but it repeats a person multiple times rather than adding to their own skill list.

You're close, instead try an outer loop for the people, then find the persons id that you are currently iterating over and store it in some variable. Then loop through each skill, and stop when you find the id you just stored and add the skills. This makes sure each person only gets checked for skills once. — CristianD
– CristianD, Commented Nov 17, 2015 at 17:28

rajuGT · Accepted Answer · 2015-11-17 17:39:19Z

1

You need an array type to store multiple skills, so instead of just assigning person['skills'] = {"name" : skill.name}; create an array and push the new skill object to it.

people.forEach(function(person){
   skills.forEach(function(skill){

      if(skill.personId == person.id){ 

         //creates an array, if not yet created
         person['skills'] = person['skills'] || []; 

         //push the skill object to the array
         person['skills'].push(skill.name);

      }
   });
});

edited Nov 17, 2015 at 17:39

answered Nov 17, 2015 at 17:28

rajuGT

6,4442 gold badges30 silver badges44 bronze badges

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

8 Comments

user3113376 Over a year ago

Hi, I tried working with this, but instead of the skill name being returned when I view the people, I just get "skills: [ [Object] ]" instead of say "skills: [ { "Engineering" } ]" or something along those lines.

rajuGT Over a year ago

@user3113376 [{ "Engineering" }] this cannot be direct string, it is an object with string property with no value. If you just want ["Engineering"], then I updated my answer as per that.

imkost Over a year ago

It's not efficient to do a loop in a loop if you can use just two loops in order to have the same result

rajuGT Over a year ago

@imkost Please look at the question, what OP is trying to ask. I really appreciate your performance concern. Please convince that to OP. In my answer I didn't quote anywhere that this code has good performance. But that should not be the reason to down-vote an answer.

imkost Over a year ago

@rajuGT, seems like you misunderstand me. I agree that your answer is absolutely correct. What I was trying to do is to notice OP about possible performance issue. I didn't down-vote you, somebody else did it and I'm not sure about the reasons (misclick maybe). Take my +1 )

|

rajuGT · Accepted Answer · 2015-11-17 23:25:50Z

1

If you have 20 persons and 20 skills, then it will be 20 * 20 = 400 loops!

You can do it more efficiently using just 2 loops:

var skillsByPerson = {};

skills.forEach(function(skill) {
  var personId = skill.personId;
  var personSkills = skillsByPerson[personId] || (skillsByPerson[personId] = []);

  personSkills.push({ name: skill.name });
});

people.forEach(function(person) {
  person.skills = skillsByPerson[person.id] || [];
});

Here is the jsPerf test proof for performance check.

edited Nov 17, 2015 at 23:25

rajuGT

6,4442 gold badges30 silver badges44 bronze badges

answered Nov 17, 2015 at 17:31

imkost

8,1737 gold badges32 silver badges49 bronze badges

Comments

Shomz · Accepted Answer · 2015-11-17 17:27:47Z

0

You're overwriting skills on each iteration (this part: person['skills'] = {"name" : skill.name};), instead you need to push a skill into an array of skills:

var people = [
  {"id": 1, "name": "Tony Rogers",}, 
  {"id": 2, "name": "Steven Grant",}, 
  {"id": 3, "name": "Peter Wilson",}];

var skills = [{
  "id": 1,
  "name": "Engineering",
  "personId": 1
}, {
  "id": 2,
  "name": "Painting",
  "personId": 2
}, {
  "id": 3,
  "name": "Chemistry",
  "personId": 3
}, {
  "id": 4,
  "name": "Physics",
  "personId": 1
}, ]

people.forEach(function(person) {
  person['skills'] = []; // create an empty skills array for each person
  skills.forEach(function(skill) {

    if (skill.personId == person.id) {
      person['skills'].push({"name": skill.name}); // push the skill
    }
  });
});

console.log(people);

answered Nov 17, 2015 at 17:27

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

4 Comments

Andreas Over a year ago

@user3113376 If the personId property doesn't bother you, you could use .filter() -> person["skills"] = skills.filter(function(skill) { return skill.personId === person.id; });

Shomz Over a year ago

What do you mean "doesn't bother", @Andreas?

Andreas Over a year ago

In the question the resulting skills array only contains the skill name. With .filter() it would also contain personId and id (but I guess this one would be negligible)

Shomz Over a year ago

I'm pretty sure we don't need to modify the skills object, but extend the people object by adding a skills sub-object.

Collectives™ on Stack Overflow

Adding items to different objects in a double for loop - Javascript

3 Answers 3

8 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related