immutability-helper - Stuck on manipulating simple objects

Question

I have two types of manipulations I would like to make with immutability-helper, but I am very stuck.

I have this data, mocking the results from an API:

var test_data = {
  title: "Potato",
  sounds: [
    { sound_name: "Fork", id: 27 },
    { sound_name: "Spoon", id: 28 },
    { sound_name: "Knife", id: 29 }
  ]
};

Type 1 - Change a sound_name, when I have the index

If I know the index of the sounds array, how do I change one of the sound_name? I expect to use update(test_data, $merge ...). What I've made so far doesn't work so I haven't pasted it here.

Type 2 - Change a sound_name, when I know the ID

If I know the ID of the sound, which is a property of an object within the sounds array, is there a concise way of using update? If so, I'd love to see it. Otherwise, I'll use array.findIndex to get the index.

I really appreciate any help, I've been stuck this weekend.

Or if there is a way to do this without immutability-helper, that would be even better — Grapehand, Sep 24 '18 at 00:28
Turns out Object.assign was a simple way to do this, thanks devserkan — Grapehand, Sep 24 '18 at 13:00
You are welcome. `Object.assign` or spread syntax, use the one do you like most. But again, don't forget that they create shallow copies. If you change a nested property directly it will mutate the original one. — devserkan, Sep 24 '18 at 13:29
Thanks, I now understand. I guess this is one of the downsides of React, and a positive of Vue. Learning the hard way :) — Grapehand, Sep 24 '18 at 20:18
I don't know Vue but this is not a downside actually. This is the logic :) You are learning the React's logic here. Its beauty is coming from this logic. — devserkan, Sep 24 '18 at 20:46
I like that Vue can deal with mutations to the state data. It is good that I know to be careful with that on React. — Grapehand, Sep 24 '18 at 21:07
Reading that in Vuex you have to be as careful as React, so it is all good knowledge — Grapehand, Sep 24 '18 at 21:11
No, Redux is not related to this issue. Redux is a global state container and it needs to be handled carefully like React for mutations :) — devserkan, Sep 24 '18 at 21:30

score 0 · Answer 1 · answered Sep 24 '18 at 00:45

Here are examples without using any helper.

By index

const test_data = {
  title: "Potato",
  sounds: [
    { sound_name: "Fork", id: 27 },
    { sound_name: "Spoon", id: 28 },
    { sound_name: "Knife", id: 29 }
  ]
};

const targetIndex = 1;

// Map the sounds, find the element which has targetIndex,
// change it with spread syntax. Return other elements as
// it is
const newSounds = test_data.sounds.map( (sound,index) => {
  if( index !== targetIndex ) { return sound };
  return { ...sound, sound_name: "Foo"}
});

// Create new data again with spread syntax. Keep other
// properties, update the sounds.
const newData = { ...test_data, sounds: newSounds };

console.log( "old", test_data.sounds, "\nnew", newSounds );
console.log( newData );

By id

const test_data = {
  title: "Potato",
  sounds: [
    { sound_name: "Fork", id: 27 },
    { sound_name: "Spoon", id: 28 },
    { sound_name: "Knife", id: 29 }
  ]
};

const targetId = 28;

// Map sounds, find the element by using id, change it
// leave others.
const newSounds = test_data.sounds.map( sound => {
  if( sound.id !== targetId ) { return sound };
  return { ...sound, sound_name: "Foo" };
})

const newData = { ...test_data, sounds: newSounds };

console.log( "old", test_data.sounds, "\nnew", newSounds );
console.log( newData );

You are welcome. If you want to learn the helper method you can wait for other answers. But, if this answer is enough for you then consider accepting it. But, if you will do so, it is better to update your question and remove the helper parts and the tag. At the very least, give me my upvote :D — devserkan, Sep 24 '18 at 01:09
I gave up upvote but not enough reputation, but it says it is still counted. Thank you. — Grapehand, Sep 24 '18 at 12:59

immutability-helper - Stuck on manipulating simple objects

1 Answers1