CODEWITHSUNDEEP
javascriptobjectproperties
Andy
Andy

Reputation: 19251

Updating javascript object property?

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?

Upvotes: 78

Views: 339970

Answers (10)

Vincent J
Vincent J

Reputation: 5778

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

Upvotes: 41

Arbaz Khan
Arbaz Khan

Reputation: 1

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

Upvotes: 0

Zerk Shaban
Zerk Shaban

Reputation: 1

skillset.person.name = {};

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

Upvotes: -1

Emisael Carrera
Emisael Carrera

Reputation: 687

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'

Upvotes: 37

Ali Abdullah
Ali Abdullah

Reputation: 21

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

The easiest way.

Upvotes: 1

Jasp402
Jasp402

Reputation: 412

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

Upvotes: 4

Ramon Diogo
Ramon Diogo

Reputation: 1750

Using ES7+ syntax and a functional approach:

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

Upvotes: 125

pimvdb
pimvdb

Reputation: 154818

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.

Upvotes: 25

Quentin
Quentin

Reputation: 943142

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.

Upvotes: 5

YXD
YXD

Reputation: 32511

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

or

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

Upvotes: 30

Related Questions