Updating javascript object property? - Stack Overflow

admin管理员组

文章数量:1134247

I have a structure like the following:

skillet.person = {
  name: {
    first: '',
    last: ''
  }, 
  age: {
    current: '' 
  },
  birthday: {
    day: '',
    month: '',
    year: ''
  }
}

I was wondering how I would update these values ? i.e. I thought the following was correct

skillet.person.name.push({ first: 'blah', last: 'ha'});

but it's wrong? How can I fix this?

I have a structure like the following:

skillet.person = {
  name: {
    first: '',
    last: ''
  }, 
  age: {
    current: '' 
  },
  birthday: {
    day: '',
    month: '',
    year: ''
  }
}

I was wondering how I would update these values ? i.e. I thought the following was correct

skillet.person.name.push({ first: 'blah', last: 'ha'});

but it's wrong? How can I fix this?

• javascript
• object
• properties

Share Improve this question Follow edited Jul 10, 2023 at 21:09 Jasperan 3,56055 gold badges2727 silver badges5757 bronze badges asked Feb 26, 2012 at 16:34 AndyAndy 19.3k1414 gold badges4747 silver badges5454 bronze badges 1

• 7 MDN has a great JavaScript tutorial, especially developer.mozilla.org/en/JavaScript/Guide/Working_with_Objects – Felix Kling Commented Feb 26, 2012 at 16:45

Add a comment  | 

10 Answers 10

Sorted by: Reset to default 125

Using ES7+ syntax and a functional approach:

const new_obj = { ...obj, name: { first: 'blah', last: 'ha'} }

On recent browsers with ECMAScript 2015, you can do:

Object.assign(skillet.person.name, { first: 'blah', last: 'ha'});

which will preserve any existing attribute not listed in the right object.

Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

[EDIT] With ES7, you can do even shorter, but it recreates the object (unlike Object.assign) and then adds some overhead if you care about performance. (comment thanks to Jamie Marshall)

{...skillet.person.name, ...{ first: 'blah', last: 'ha'}};

Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

As @ramon-diogo wrote with ES7+

I like to update nested values like:

let user = {
    name: {
        first: 'john',
        last: 'smith'
    },
    age: 18,
    city: 'new york'
}

const age = 20;

user = {...user, age}

console.log(user.age)
// output: 20


const newData ={
    age: 22,
    city: 'san francisco'
};

user = {...user,...newData}

console.log(user.name.first)
// output: john
console.log(user.age)
// output: 22
console.log(user.city)
// output: 'san francisco'

skillet.person.name.first = "blah"
skillet.person.name.last = "ha"

or

skillet.person.name = {first : "blah", last : "ha"}

If you want to mix an object into another one, you can use jQuery's deep extend function. "Deep" means that it does not overwrite name with the new object, but rather overwrites the properties inside such an object.

$.extend(true, skillet.person, {
  name: {
    first: 'updated'
  },
  birthday: {
    day: 'updated',
    year: 'updated'
  }
});

Now, skillet.person has the appropriate properties updated, while the other properties are untouched.

push is a method of Arrays that adds a new item to an array.

If you want to replace the value then:

skillet.person.name = { … };

If you want to store multiple (full) names in the object, then you'll need the property to hold an array of objects instead of a single object.

I think that is simpler

     let skillet = {
        person: {
            name    : {
                first: '',
                last : ''
            },
            age     : {
                current: ''
            },
            birthday: {
                day  : '',
                month: '',
                year : ''
            }
        }
    };

    let update = {
        person: {
            name: {
                first: 'blah',
                last : 'ha'
            }
        }
    };

    let result = Object.assign(skillet.person, update.person);

    console.log(result);

skillet.person.name.first = "blah"
skillet.person.name.last = "ha"

The easiest way.

Easist and simple way to update the javascipt object properties

  const skillet = [
 person = {
  name: {
    first: 'Arbaz',
    last: 'khan'
  }, 
  age: {
    current: 'ten' 
  },
  birthday: {
    day: '',
    month: '',
    year: ''
  }
}
]

suppose we want to update the first name. This is how we will do this in ES7+

skilled.map(person => {...person,person.name.first:"Arbaz2"})

The above code will update all the objects. On the other hand if you want to update only particular object. We can do this as well we just need one condition here. But in that case you need unique field as well let call it personId.

   skillled.map(person => person.personId === personId ? {...person,person.name.first:"Arbaz2"} : person);

skillset.person.name = {};

This is the easiest way to assign value to the property of an object.

本文标签： Updating javascript object propertyStack Overflow