Javascript code for populating multiple objects with new items using a nested for loop

Question

Javascript code for populating multiple objects with new items using a nested for loop

Trying to articulate my thoughts, I am interested in linking a list of skill sets to various individuals within their respective lists.

For instance: I possess a Json object detailing individuals:

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

Additionally, there exists a roster of skills that need to be associated 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
    },
 ]

Navigating through both lists remains a bit uncertain for me. Ideally, I aim to attach a "skills" segment to each individual containing all of their relevant skills.

I toyed with the idea of:

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

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

However, this approach results in repetitive entries for an individual rather than consolidating their skills.

javascript json for-loop

Answer 1

Answer №1

In order to store multiple skills, it is important to use an array type. Instead of simply assigning

person['skills'] = {"name" : skill.name};

, we should create an array and add the new skill object to it.

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

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

         // Check if an array already exists for skills
         person['skills'] = person['skills'] || []; 

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

      }
   });
});

Answer 2

In order to store multiple skills, it is important to use an array type. Instead of simply assigning

person['skills'] = {"name" : skill.name};

, we should create an array and add the new skill object to it.

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

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

         // Check if an array already exists for skills
         person['skills'] = person['skills'] || []; 

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

      }
   });
});

Answer 3

Answer №2

Imagine you have 20 individuals each with 20 unique skills, that would result in a whopping total of 400 loops!

However, there is a more efficient way to handle this by utilizing 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] || [];
});

If you're interested, you can check out the jsPerf test to see the performance comparison.

Answer 4

Imagine you have 20 individuals each with 20 unique skills, that would result in a whopping total of 400 loops!

However, there is a more efficient way to handle this by utilizing 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] || [];
});

If you're interested, you can check out the jsPerf test to see the performance comparison.

Answer 5

Answer №3

On each iteration, you are currently overwriting skills (specifically this part:

person['skills'] = {"name" : skill.name};

). Instead, what you should be doing is pushing a skill into an array of skills:

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

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

individuals.forEach(function(person) {
  person['skills'] = []; // initialize empty skills array for each person
  abilities.forEach(function(skill) {

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

console.log(individuals);

Answer 6

On each iteration, you are currently overwriting skills (specifically this part:

person['skills'] = {"name" : skill.name};

). Instead, what you should be doing is pushing a skill into an array of skills:

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

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

individuals.forEach(function(person) {
  person['skills'] = []; // initialize empty skills array for each person
  abilities.forEach(function(skill) {

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

console.log(individuals);

Javascript code for populating multiple objects with new items using a nested for loop

Answer №1

Answer №2

Answer №3

Similar questions

Assertion using Node.js with Selenium WebDriver

Filtering JSON data using the JQ tool for a lone JSON document

Trouble with HTTPS request in Android fragment

Modify the index in the creation of a json

Decode JSON that may consist of either an array or a standalone item

I consistently encounter the error message 'XRWebGLLayer is not defined no-undef' while implementing three.js within react.js to develop a WebXR application

Accessing JSON Data from a .NET Webmethod to Iterate through in AngularJS Directive

Display exclusively on indexes 0 and 3

What could be causing push() to malfunction within a loop?

Implementing dynamic https URL embedding in AngularJS based on the user's browser location

Emitting events from a parent component to a child component

Storing user and message data with LocalStorage technology

Dividing image styles within css

When a cross-domain iframe is loaded in a private browser, it automatically logs the user out

Converting a file into JSON using PHP and it adds an additional line to the

The issue with V-for not functioning arises when creating an array from an external JSON file during

Yep, the condition within a nested object is true

What steps do I need to take to execute a browserify-ed application in NodeJS?

Error message encountered: "Invalid JSON primitive - API call outcome"

SyntaxError: Unexpected '<' symbol found in JavaScript file while attempting to import it into an HTML document