JavaScript - How to merge/append to an Object/Array - ReactJS - Spread Syntax

Question

I am having trouble trying to append something my object, using the spread syntax.

Depending on the fact whether the NewPerson is there for a private/professional occasion I want to append additional key/values to the object/array.

Somehow it does not work. Hopefully someone can help me out. :(

var NewPerson = [
    Firstname: this.state.addPersonFirstname,
    Lastname: this.state.addPersonLastname,
    Birthday: this.state.addPersonBirthday,
    Occasion: this.state.addPersonOccasion,
];


if (this.state.addPersonOccasion === 'OccasionProfessional') {
    NewPerson = [
        ...NewPerson,
        ...[ProfEmployerName: this.state.addPersonOccasionProfEmployerName],
        ...[ProfEmployerPLZ: this.state.addPersonOccasionProfEmployerPLZ],
        ...[ProfEmployerCity: this.state.addPersonOccasionProfEmployerCity],
        ...[ProfEmployerUVT: this.state.addPersonOccasionProfEmployerUVT]
    ]
}


if (this.state.addPersonOccasion === 'OccasionPrivate') {
    NewPerson = [
        ...NewPerson,
        ...[PrivPersonStreet: this.state.addPersonOccasionPrivPersonStreet],
        ...[PrivPersonPLZ: this.state.addPersonOccasionPrivPersonPLZ],
        ...[PrivPersonCity: this.state.addPersonOccasionPrivPersonCity]
    ]
}


var CombinedPersons


if (PreviousPersons === null) {
    CombinedPersons = NewPerson
} else {
    CombinedPersons = [...PreviousPersons, ...NewPerson]
}

In your very first lines you are mistaking array brackets [] with object braces {}. The code that follows it is completely off as well since you're struggling to understance the difference. Lemme rewrite that. — Christian Ivicevic
– Christian Ivicevic, Commented Jan 11, 2019 at 22:00

David Táboas · Accepted Answer · 2019-01-11 23:11:22Z

1

You should use Objects instead Array because Objects have key-value pairs. You could do (in ES6 syntax):

const { addPersonOccasion } = this.state;

const isProfessional = addPersonOccasion === 'OccasionProfessional';
const isPrivate = addPersonOccasion === 'OccasionPrivate';

const NewPerson = {
    Firstname: this.state.addPersonFirstname,
    Lastname: this.state.addPersonLastname,
    Birthday: this.state.addPersonBirthday,
    Occasion: this.state.addPersonOccasion,
    ...(isProfessional && {
      ProfEmployerName: this.state.addPersonOccasionProfEmployerName,
      ProfEmployerPLZ: this.state.addPersonOccasionProfEmployerPLZ,
      ProfEmployerCity: this.state.addPersonOccasionProfEmployerCity,
      ProfEmployerUVT: this.state.addPersonOccasionProfEmployerUVT
    }),
    ...(isPrivate && {
        PrivPersonStreet: this.state.addPersonOccasionPrivPersonStreet,
        PrivPersonPLZ: this.state.addPersonOccasionPrivPersonPLZ,
        PrivPersonCity: this.state.addPersonOccasionPrivPersonCity
    })
};


let CombinedPersons = [NewPerson];


if (PreviousPersons !== null) {
  CombinedPersons = [...PreviousPersons, ...CombinedPersons]
}

answered Jan 11, 2019 at 23:11

David Táboas

8708 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Derek Over a year ago

This is a cleaner solution than the accepted answer IMHO.

Sushanth -- · Accepted Answer · 2019-01-11 22:33:29Z

0

You seem to be mixing up arrays and objects in this case. You want all the properties of a person isolated to a single entity. Object works out best in such cases.

var NewPerson = {
  Firstname: this.state.addPersonFirstname,
  Lastname: this.state.addPersonLastname,
  Birthday: this.state.addPersonBirthday,
  Occasion: this.state.addPersonOccasion,
};


if (this.state.addPersonOccasion === 'OccasionProfessional') {
  NewPerson = {
    ...NewPerson,
    ProfEmployerName: this.state.addPersonOccasionProfEmployerName,
    ProfEmployerPLZ: this.state.addPersonOccasionProfEmployerPLZ,
    ProfEmployerCity: this.state.addPersonOccasionProfEmployerCity,
    ProfEmployerUVT: this.state.addPersonOccasionProfEmployerUVT
  }
}


if (this.state.addPersonOccasion === 'OccasionPrivate') {
  NewPerson = {
    ...NewPerson,
    PrivPersonStreet: this.state.addPersonOccasionPrivPersonStreet,
    PrivPersonPLZ: this.state.addPersonOccasionPrivPersonPLZ,
    PrivPersonCity: this.state.addPersonOccasionPrivPersonCity
  ]
}


var CombinedPersons


if (PreviousPersons === null) {
  CombinedPersons = [NewPerson]
} else {
  CombinedPersons = [...PreviousPersons, {...NewPerson}]
}

PreviousPersons will be an array of person objects.

edited Jan 11, 2019 at 22:33

answered Jan 11, 2019 at 22:04

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

4 Comments

Christian Ivicevic Over a year ago

Minor suggestion in the last line of code: replace {...NewPerson} with just NewPerson if I understand the intention of OP correctly.

Sushanth -- Over a year ago

Sure, we could do that but just did not want to have the reference of the original object in the array.

duc mai Over a year ago

in the if (PreviousPersons === null) { it should be CombinedPersons = [NewPerson] I guess?

Sushanth -- Over a year ago

@ducmai My bad. Thought I fixed that as well. Thanks !

Pipe · Accepted Answer · 2019-01-11 22:03:50Z

0

You don't need to spread the new properties...

You can:

if (this.state.addPersonOccasion === 'OccasionProfessional') {
    NewPerson = {
        ...NewPerson,
        ProfEmployerName: this.state.addPersonOccasionProfEmployerName,
        ProfEmployerPLZ: this.state.addPersonOccasionProfEmployerPLZ,
        //... and so on
    }
}

answered Jan 11, 2019 at 22:03

Pipe

2,4342 gold badges20 silver badges37 bronze badges

Comments

Bhargav Rao · Accepted Answer · 2019-01-12 09:50:21Z

A combination of all your answers made the final version:

    var NewPerson = {
      Firstname: this.state.addPersonFirstname,
      Lastname: this.state.addPersonLastname,
      Birthday: this.state.addPersonBirthday,
      SigImage: this.sigPad.getCanvas().toDataURL('image/png'),
      Occasion: this.state.addPersonOccasion,
    };

    if (this.state.addPersonOccasion === 'OccasionProfessional') {
      NewPerson = {
        ...NewPerson,
        ProfEmployerName: this.state.addPersonOccasionProfEmployerName,
        ProfEmployerPLZ: this.state.addPersonOccasionProfEmployerPLZ,
        ProfEmployerCity: this.state.addPersonOccasionProfEmployerCity,
        ProfEmployerUVT: this.state.addPersonOccasionProfEmployerUVT
      }
    }

    if (this.state.addPersonOccasion === 'OccasionPrivate') {
      NewPerson = {
        ...NewPerson,
        PrivPersonStreet: this.state.addPersonOccasionPrivPersonStreet,
        PrivPersonPLZ: this.state.addPersonOccasionPrivPersonPLZ,
        PrivPersonCity: this.state.addPersonOccasionPrivPersonCity
      }
    }
    // Save the user input to NewPerson var - End

      // Create combined var with PreviousPersons and NewPerson - Start
      var CombinedPersons
      if (PreviousPersons === null) {
        CombinedPersons = [NewPerson]
      } else {
        CombinedPersons = [ ...PreviousPersons, NewPerson ]
      }
      // Create combined var with PreviousPersons and NewPerson - End

Collectives™ on Stack Overflow

JavaScript - How to merge/append to an Object/Array - ReactJS - Spread Syntax

4 Answers 4

1 Comment

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related