Combine 2 arrays, updating values

Question

In my reducer I am pulling down results from my API, I would like to combine this array with the persisted data from storage if it exists, the only fields that need to be overwritten in the data are bookMarked, totalScore, and completed. How can I compare arrays and overwrite the required properties if they are different?

What is the best way to do this?

let arrayFromAPI= [
    {
        bookMarked: false,
        completed: false,
        totalScore: 50,
        current: 0,
        description:
            "<p>Lorem ipsum culpa qui officia deserunt mollit anim id est laborum.</p>",
        icon: "male-urinary-catheterisation",
        id: 1
    },
    {
        bookMarked: false,
        completed: false,
        totalScore: 50,
        current: 0,
        description:
            "<p>Lorem ipsum culpa qui officia deserunt mollit anim id est laborum.</p>",
        icon: "male-urinary-catheterisation",
        id: 2
    }
];

let arrayFromPersist = [
    {
        bookMarked: true,
        completed: false,
        totalScore: 50,
        completed: true,
        current: 0,
        description:
            "<p>Lorem ipsum culpa qui officia deserunt mollit anim id est laborum.</p>",
        icon: "male-urinary-catheterisation",
        id: 1
    },
    {
        bookMarked: true,
        completed: false,
        totalScore: 50,
        completed: true,
        current: 0,
        description:
            "<p>Lorem ipsum culpa qui officia deserunt mollit anim id est laborum.</p>",
        icon: "male-urinary-catheterisation",
        id: 2
    }
];

Assuming both arrays have the same length. Loop through one and compare your desired data. — Beru, Jul 19 '19 at 09:19

score 0 · Accepted Answer · answered Jul 19 '19 at 09:27

You can use filter and merge all the values from arrayFromAPI response to arrayFromPersist based on the property ID since it has to be same in both the array in order to replace the new values from arrayFromAPI

let arrayFromAPI= [
    {
        bookMarked: false,
        completed: false,
        totalScore: 500,
        current: 250,
        description:
            "<p>Lorem ipsum culpa qui officia deserunt mollit anim id est laborum.</p>",
        icon: "male-urinary-catheterisation",
        id: 1
    },
    {
        bookMarked: false,
        completed: false,
        totalScore: 750,
        current: 870,
        description:
            "<p>Lorem ipsum culpa qui officia deserunt mollit anim id est laborum.</p>",
        icon: "male-urinary-catheterisation",
        id: 2
    }
];

let arrayFromPersist = [
    {
        bookMarked: true,
        completed: false,
        totalScore: 50,
        completed: true,
        current: 0,
        description:
            "<p>Lorem ipsum culpa qui officia deserunt mollit anim id est laborum.</p>",
        icon: "male-urinary-catheterisation",
        id: 1
    },
    {
        bookMarked: true,
        completed: false,
        totalScore: 50,
        completed: true,
        current: 0,
        description:
            "<p>Lorem ipsum culpa qui officia deserunt mollit anim id est laborum.</p>",
        icon: "male-urinary-catheterisation",
        id: 2
    }
];

function merge(a, b, prop){
  var reduced = a.filter(function(aitem){
      return ! b.find(function(bitem){
          return aitem[prop] === bitem[prop];
      });
  });
  return reduced.concat(b);
}

console.log(merge(arrayFromPersist, arrayFromAPI, "id"))

Combine 2 arrays, updating values

1 Answers1