javascript - modifying nested field based on condition in map

Question

javascript - modifying nested field based on condition in map

In the scenario of having an array like this:

people = [
    {
        name: 'Bob',
        sex: 'male',
        address:{
          street: 'Elm Street',
          zip: '12893'
        }
    },
    {
        name: 'Susan',
        sex: 'female',
        address:{
          street: 'Hickory Street',
          zip: '00000'
        }
    }
]

I want to create a function that can modify specific instances of '00000' in the nested field 'zip' to '12893' and generate a new array with the corrected values. Here is my current attempt at a function:

function zipFix (initialArray) {
    return initialArray.map(function(person) {
        if(person.address.zip === '00000')
          person.address.zip = "12893"
        return person
    });
}

Although this function is altering the values in 'initialArray', which is not the intended behavior. How can I adjust my function so that I can correctly use the map function to produce a new array with the corrections? Thank you.

javascript arrays dictionary if-statement nested

Answer 1

Answer №1

When iterating over the values using the map function, it is important to create a copy of each object to avoid mutations. The most convenient way to achieve this is by utilizing the object spread syntax ({...obj}).

By using object spread, all the values (such as name, address, etc.) are spread into a new object, ensuring that any changes made do not affect the original object. However, it is crucial to note that this process is shallow, meaning that although a new object is created, the values inside remain the same. Therefore, in cases where a property like address is also an object, a nested spread of the address value is necessary.

people = [{
    name: 'Bob',
    sex: 'male',
    address: {
      street: 'Elm Street',
      zip: '12893'
    }
  },
  {
    name: 'Susan',
    sex: 'female',
    address: {
      street: 'Hickory Street',
      zip: '00000'
    }
  }
]

function zipFix(initialArray) {
  return initialArray.map(function(person) {
    // Create a new "copy" of the person. Using object spread
    // will create a "shallow" copy, so since address is also an
    // object it will have to be spread (same for other objects that might
    // be mutated).
    const newValue = { ...person, address: { ...person.address }}

    if (newValue.address.zip === '00000') {
      newValue.address.zip = "12893";
    }

    return newValue
  });
}

console.log(zipFix(people))
console.log(people) // unchanged

Answer 2

When iterating over the values using the map function, it is important to create a copy of each object to avoid mutations. The most convenient way to achieve this is by utilizing the object spread syntax ({...obj}).

By using object spread, all the values (such as name, address, etc.) are spread into a new object, ensuring that any changes made do not affect the original object. However, it is crucial to note that this process is shallow, meaning that although a new object is created, the values inside remain the same. Therefore, in cases where a property like address is also an object, a nested spread of the address value is necessary.

people = [{
    name: 'Bob',
    sex: 'male',
    address: {
      street: 'Elm Street',
      zip: '12893'
    }
  },
  {
    name: 'Susan',
    sex: 'female',
    address: {
      street: 'Hickory Street',
      zip: '00000'
    }
  }
]

function zipFix(initialArray) {
  return initialArray.map(function(person) {
    // Create a new "copy" of the person. Using object spread
    // will create a "shallow" copy, so since address is also an
    // object it will have to be spread (same for other objects that might
    // be mutated).
    const newValue = { ...person, address: { ...person.address }}

    if (newValue.address.zip === '00000') {
      newValue.address.zip = "12893";
    }

    return newValue
  });
}

console.log(zipFix(people))
console.log(people) // unchanged

Answer 3

Answer №2

Make sure to also retrieve values from the callback function and create a duplicate of the element before assigning to prevent any changes

const people = [{name: 'Bob',sex: 'male',address:{street: 'Elm Street',zip: '12893'}},{name: 'Susan',sex: 'female',address:{street: 'Hickory Street',zip: '00000'}}]

function zipFix (initialArray) {
    return initialArray.map(function(person) {
      let newObj = JSON.parse(JSON.stringify(person))
        if(newObj.address.zip === '00000')
           newObj.address.zip ="12893"
      return newObj
    });
}

console.log(zipFix(people))

Answer 4

Make sure to also retrieve values from the callback function and create a duplicate of the element before assigning to prevent any changes

const people = [{name: 'Bob',sex: 'male',address:{street: 'Elm Street',zip: '12893'}},{name: 'Susan',sex: 'female',address:{street: 'Hickory Street',zip: '00000'}}]

function zipFix (initialArray) {
    return initialArray.map(function(person) {
      let newObj = JSON.parse(JSON.stringify(person))
        if(newObj.address.zip === '00000')
           newObj.address.zip ="12893"
      return newObj
    });
}

console.log(zipFix(people))

Answer 5

Answer №3

individuals = [
            {
              person: 'Alex',
              gender: 'male',
              location: {
                street: 'Cedar Avenue',
                zip: '78654'
              }
            },
            {
              person: 'Emily',
              gender: 'female',
              location: {
                street: 'Oak Street',
                zip: '00000'
              }
            }
          ]
          
          function zipCorrection (initialList) {
            return (initialList.map(({location, ...ind}) => (
              location.zip !== '00000' ? { ...ind, location } : {
                ...ind,
                location: {
                  ...location,
                  zip: '78654'
                }
              }
            )));
          }
          
          console.log(zipCorrection(individuals));

Answer 6

individuals = [
            {
              person: 'Alex',
              gender: 'male',
              location: {
                street: 'Cedar Avenue',
                zip: '78654'
              }
            },
            {
              person: 'Emily',
              gender: 'female',
              location: {
                street: 'Oak Street',
                zip: '00000'
              }
            }
          ]
          
          function zipCorrection (initialList) {
            return (initialList.map(({location, ...ind}) => (
              location.zip !== '00000' ? { ...ind, location } : {
                ...ind,
                location: {
                  ...location,
                  zip: '78654'
                }
              }
            )));
          }
          
          console.log(zipCorrection(individuals));

Answer 7

Answer №4

Below is an example of how you can manipulate an array of objects in JavaScript:

const people = [{name: 'Bob',sex: 'male',address: {street: 'Elm Street',zip: '12893'}},{name: 'Susan',sex: 'female',address: {street: 'Hickory Street',zip: '00000'}}]
const zipFix = people.map(({address, ...p}) => ({
  ...p,
  address: {
    ...address,
    zip: address.zip === '00000' ? '12893' : address.zip
  }
}))

console.log(zipFix)

Answer 8

Below is an example of how you can manipulate an array of objects in JavaScript:

const people = [{name: 'Bob',sex: 'male',address: {street: 'Elm Street',zip: '12893'}},{name: 'Susan',sex: 'female',address: {street: 'Hickory Street',zip: '00000'}}]
const zipFix = people.map(({address, ...p}) => ({
  ...p,
  address: {
    ...address,
    zip: address.zip === '00000' ? '12893' : address.zip
  }
}))

console.log(zipFix)

javascript - modifying nested field based on condition in map

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How can you refresh the source element?

Utilizing Twitter API authentication to prevent hitting rate limits

Guide to smoothly transition the highlighted <tr> element to the top of the scroll bar

Retrieve the binary file data that was sent via Postman using Node.js/Express.js

Issue with Bootstrap Scrollspy: Scrollspy function not functioning as expected

Verilog not updating array assignments

Submitting a POST request to paginate and sort the results

What is the purpose of including the return keyword in this function to ensure the promise functions properly?

Use Vue JS to send a GET request to the server with custom header settings

Place the div absolutely on top of the Flash content

Displaying MySQL data in a table using PHP and MySQL

Retrieving and transforming data from a JSON format using Regular Expressions

Nodejs application crashes due to buffer creation issues

Exploring nested JSON information through jQuery's AJAX call

Smart method for organizing browsing history

Order a list based on a specific subsequence

The Material UI Elements are not displaying properly as expected. Instead of seeing the MUI elements, a tan box is appearing. What steps can I take to resolve this

Trouble with closing windows in the in-app browser on Android devices

Issue with VueJS v-for when using dynamic components causing unexpected behavior

What is the proper way to execute a JavaScript function within a JavaScript file from an HTML file?