Modify an object's attribute value by utilizing the map function in ES6

Question

Modify an object's attribute value by utilizing the map function in ES6

In my ES6 coding endeavors, I am striving for a specific outcome. Imagine I have an array of objects titled schools.

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

My goal is to create a function called editSchoolName that will accept 3 parameters: schools (the predefined array), oldName, and name.

The oldName parameter will contain the current name of the school that needs to be updated with the value passed in the name parameter.

To maintain the original state of the schools variable, I plan to utilize a map function that will generate a new array with the desired modifications.

The editSchoolName function will be invoked as follows -

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

In this case, the name YorkTown should be substituted with New Gen. Therefore, the resulting array updatedSchools should appear as -

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

This is how the editSchoolName function is structured -

const editSchoolName = (schools, oldName, name) =>
    schools.map(item => {
        if (item.name === oldName) {
          /* This is the section where the logic needs to be applied */
        } else {
          return item;
        }
    });

I need assistance in modifying the editSchoolName function to achieve the desired outcome as described above.

javascript arrays ecmascript-6 es6-map

Answer 1

Answer №1

Give this a shot, use ES6 and the Object.assign() method to duplicate array elements and update a 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);

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

Answer 2

Give this a shot, use ES6 and the Object.assign() method to duplicate array elements and update a 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);

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

Answer 3

Answer №2

To obtain the modified object, you must follow these instructions:

const modifySchoolName = (schoolList, prevName, updatedName) =>
  schoolList.map(entry => {
      if (entry.name === prevName) {
        return {...entry, updatedName};
      } else {
        return entry;
      }
});

Answer 4

To obtain the modified object, you must follow these instructions:

const modifySchoolName = (schoolList, prevName, updatedName) =>
  schoolList.map(entry => {
      if (entry.name === prevName) {
        return {...entry, updatedName};
      } else {
        return entry;
      }
});

Answer 5

Answer №3


   const updateSchoolName = (schools, currentName, newName) =>
    schools.map(({name, ...school }) => ({ ...school, name: currentName === name ? newName : name }));

Utilizing a ternary operator can help simplify the code.

Answer 6


   const updateSchoolName = (schools, currentName, newName) =>
    schools.map(({name, ...school }) => ({ ...school, name: currentName === name ? newName : name }));

Utilizing a ternary operator can help simplify the code.

Answer 7

Answer №4

It's surprising that none of the responses offer a straightforward solution

function updateSchoolName(schools, oldName, newName) {
      return schools.map(school => {
            if (school.name === oldName) {
                  school.name = newName;
            }
            return school; 
      });
}

Answer 8

It's surprising that none of the responses offer a straightforward solution

function updateSchoolName(schools, oldName, newName) {
      return schools.map(school => {
            if (school.name === oldName) {
                  school.name = newName;
            }
            return school; 
      });
}

Answer 9

Answer №5

If you're looking to make changes specifically to the commented section:

function updateSchoolName(schools, oldName, newName) {
    return schools.map(item => {
        if (item.name === oldName) {
            let updatedItem = Object.assign({}, item);
            updatedItem.name = newName;
            return updatedItem;
        } else {
            return item;
        }
    });
}

Answer 10

If you're looking to make changes specifically to the commented section:

function updateSchoolName(schools, oldName, newName) {
    return schools.map(item => {
        if (item.name === oldName) {
            let updatedItem = Object.assign({}, item);
            updatedItem.name = newName;
            return updatedItem;
        } else {
            return item;
        }
    });
}

Answer 11

Answer №6

it's as easy as pie:

function modifySchoolName(schools, prevName, newName) {
    let modifiedList = schools.map((item, index) => {
        if (item.name === prevName) {
            let updatedItem = { ...item, name: newName };
            return updatedItem;
        } else {
            return item;
        }
    });
    return modifiedList;
}

Answer 12

it's as easy as pie:

function modifySchoolName(schools, prevName, newName) {
    let modifiedList = schools.map((item, index) => {
        if (item.name === prevName) {
            let updatedItem = { ...item, name: newName };
            return updatedItem;
        } else {
            return item;
        }
    });
    return modifiedList;
}

Answer 13

Answer №7

let universities = [{
    name: 'Harvard',
    country: 'USA'
  },
  {
    name: 'Oxford',
    country: 'UK'
  },
  {
    name: 'Sorbonne',
    country: 'France'
  }
];

let updatedUniversities = [{
    name: 'New Age',
    country: 'USA'
  },
  {
    name: 'Oxford',
    country: 'UK'
  },
  {
    name: 'Sorbonne',
    country: 'France'
  }
];

const editUniversityName = ((universities, oldName, name) =>{
  universities.map(item => {
    if (item.name === oldName) {
      item.name = name;
      return item.name;
    } else {
      return item;
    }
  });
  console.log(universities);
});

editUniversityName(universities, 'Harvard', "New Age");

Answer 14

let universities = [{
    name: 'Harvard',
    country: 'USA'
  },
  {
    name: 'Oxford',
    country: 'UK'
  },
  {
    name: 'Sorbonne',
    country: 'France'
  }
];

let updatedUniversities = [{
    name: 'New Age',
    country: 'USA'
  },
  {
    name: 'Oxford',
    country: 'UK'
  },
  {
    name: 'Sorbonne',
    country: 'France'
  }
];

const editUniversityName = ((universities, oldName, name) =>{
  universities.map(item => {
    if (item.name === oldName) {
      item.name = name;
      return item.name;
    } else {
      return item;
    }
  });
  console.log(universities);
});

editUniversityName(universities, 'Harvard', "New Age");

Modify an object's attribute value by utilizing the map function in ES6

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Managing JavaScript events in the console

Determine the size of an SVG while taking into consideration any strokes applied

Having trouble receiving a response when making a request to an API

Can a jQuery object be generated from any random HTML string? For example, is it possible to create a new link variable like this: var $newlink = $('<a>new link</a>')?

Storing an Array in JSON Format to a File with PHP

Reset filter when the "All" option is chosen in Vue.js

How to Modify the Data in a Dynamic Object within the Vuex Store in a Nuxt Application

How can I use regular expressions to validate one-letter domain names?

NextJs manages the logic for processing requests both before and after they are handled

Array of Typed Objects in TypeScript

I am just starting to explore firebase and I'm having trouble organizing my data. I've attempted to use the query function and orderBy

The unusual interactions between JavaScript and QML

Interactive radio button that only registers the most recent click

Creating a Vue.js vuetify input that restricts the user to entering only three digits before the decimal point and two digits after the decimal point

Breaking free from JavaScript snippet within a PHP function in WordPress

Loading templates (partials) in Angular.js on the fly

Decoding a JSON object in node.js

Create a constructor that takes in inputs and adds them to an array

API call to frontend is not displaying complete properties of the returned object

Interactive HTML and PHP form designed to compute and display the result of a straightforward mathematical equation