Search code examples
javascriptarraysecmascript-6es6-map

Update the attribute value of an object using the map function in ES6


I am trying to code this in ES6. Below is what I am trying to achieve. Let's say I have an array of objects called schools.

let schools = [
    {name: 'YorkTown', country: 'Spain'},
    {name: 'Stanford', country: 'USA'},
    {name: 'Gymnasium Achern', country: 'Germany'}
];

Now, I want to write a function called editSchoolName which will take 3 parameters, schools (which is the array I have defined above), oldName and name.

I will pass the name of the school in the parameter oldName and that name should be updated with the value in the parameter name.

I don't want to change the state of the variable schools so I am using a map function which will return a new array with the changes.

The editSchoolName function will be called like this -

var updatedSchools = editSchoolName(schools, "YorkTown", "New Gen");

Here, the name YorkTown should be replaced with the name New Gen. So the expected value of the array updatedSchools should be -

let updatedSchools = [
    {name: 'New Gen', country: 'Spain'},
    {name: 'Stanford', country: 'USA'},
    {name: 'Gymnasium Achern', country: 'Germany'}
];

This is how my editSchoolName function looks like -

const editSchoolName = (schools, oldName, name) =>
    schools.map(item => {
        if (item.name === oldName) {
          /* This is the part where I need the logic */
        } else {
          return item;
        }
    });

Need help in making the change in the editSchoolName function to achieve the above mentioned desired result.


Solution

  • try this, ES6 Object.assign() to create copy of array element and update new object.

    let schools = [{
            name: 'YorkTown',
            country: 'Spain'
        },
        {
            name: 'Stanford',
            country: 'USA'
        },
        {
            name: 'Gymnasium Achern',
            country: 'Germany'
        }
    ];
    
    const editSchoolName = (schools, oldName, name) => {
        return schools.map(item => {
            var temp = Object.assign({}, item);
            if (temp.name === oldName) {
                temp.name = name;
            }
            return temp;
        });
    }
    
    var updatedSchools = editSchoolName(schools, "YorkTown", "New Gen");
    console.log(updatedSchools);
    console.log(schools);

    Using destructuring

    const schools = [
      {
        name: "YorkTown",
        country: "Spain",
      },
      {
        name: "Stanford",
        country: "USA",
      },
      {
        name: "Gymnasium Achern",
        country: "Germany",
      },
    ];
    const editSchoolName = (schools, oldName, newName) =>
      schools.map(({ name, ...school }) => ({
        ...school,
        name: oldName === name ? newName : name,
      }));
    const updatedSchools = editSchoolName(schools, "YorkTown", "New Gen");
    console.log(updatedSchools);