Update the object value based on array index

Question

I have 2 object in array

dataV[1] = {
            "resolution": "4"
        };

datas[1] = {
     {qty_approved: "1", resolution: "5", status: "", order: "1332"}
}

if both index same then i want to update with the value from 1st. I want to update resolution value to 4 from 5. Based on upcoming value from new array value in dataV

Expected output like this :

datas[1] = {
     {qty_auth: "1", resolution: "4", status: "", order: "1332"}
}

dataV is dynamic, Each time resolution value updates based on dropdown value @MajedBadawi — Shantal Kaula, Nov 02 '21 at 18:06
dataV and datas is array, inside that object something like this `1: {qty_approved: "1", resolution: "4", status: "", order_item_id: "1332"} @Majed Badawi` — Shantal Kaula, Nov 02 '21 at 18:08
I have posted my question in detail here : [https://stackoverflow.com/questions/69808608/update-the-object-based-on-index-and-input-dropdown-change] So im segregating now part by part for better response — Shantal Kaula, Nov 02 '21 at 18:10
Does this answer your question? [Merge 2 arrays of objects](https://stackoverflow.com/questions/7146217/merge-2-arrays-of-objects) — Heretic Monkey, Nov 02 '21 at 18:31
No. I have to compare and then get the object in array @HereticMonkey — Shantal Kaula, Nov 02 '21 at 18:36
All of the answers to that question result in an array..., and all of the answers you've received here are duplicates of answers from that question. — Heretic Monkey, Nov 02 '21 at 18:39
Yes , its not just merging array, need to check object and then merge based on new value. Its not duplicate of what you mentioned, Please go through the question again. Dont mark it duplicate without checking the complete flow @HereticMonkey — Shantal Kaula, Nov 02 '21 at 18:53
Don't discount the duplicate without checking whether it answers your question, @ShantalKaula. It's not just merging the array; it's merging the objects in the array. You might need to think for yourself -- the answers might not be copy-paste-able -- but the concepts are essentially transferable. — Heretic Monkey, Nov 02 '21 at 19:00
Thank you for providing the concept, As i am new here i am looking for some simple solution. maybe you want o provide the concept i appreciate that but its not the duplicate what you shared. thank you again @HereticMonkey — Shantal Kaula, Nov 02 '21 at 19:03
@ShantalKaula ... From all the comments/answers/approaches are there any questions left? — Peter Seliger, Nov 08 '21 at 08:45

Shakirul Hasan · Answer 1 · 2021-11-02T18:16:25.723

1

Wherever you're updating the value of dataV you can do something like this, to update the datas:

datas = datas.map((data, i) => {
  return { ...data, resolution: dataV[i].resolution };
});

And if you're using react you can do the same thing in useEffect with dataV as a dependency. So, whenever dataV changes, datas will change automatically.

edited Nov 02 '21 at 18:16

answered Nov 02 '21 at 18:09

Shakirul Hasan

678
1
5
14

I am using class components , when i try with states each time the value is getting removed, So I am using var in global to process. @Shakirul Hasan – Shantal Kaula Nov 02 '21 at 18:20
Then you can try using the process I've written above. – Shakirul Hasan Nov 02 '21 at 18:26
what if datas array not exist with the particular index ? then how can i check the condition fot it ? @Shakirul Hasan – Shantal Kaula Nov 02 '21 at 18:58

score 0 · Answer 2 · answered Nov 02 '21 at 18:16

let array1 = [
    {
        resolution: '4',
    },
];

let array2 = [
    { qty_approved: '1', resolution: '5', status: '', order: '1332' },
];

let array3 = array1.map((element, index) => {
    if (typeof array2[index] != 'undefined') {
        return { ...array2[index], ...element};
    }
    return element;
});

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

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

Peter Seliger · Answer 3 · 2021-11-02T19:27:21.540

The following approach is going to map each item of datas. The mapping function nevertheless will be a real function (not an arrow function), thus it is aware of map's second thisArg argument which for the OP's use case will be the dataV array where one wants to read the resolution values from.

The advantage of such an approach is, that one can work with a reusable mapper function which is agnostic to outside array references because it does process an array while the related/corresponding array gets provided as the mapper functions this context.

The mapping functionality itself does try to not mutate the original item reference by loosely decoupling the reference via creating a shallow copy of the entire item. On top the resolution value which was read from the corresponding array via this[idx].resolution gets assigned to the just created shallow copy.

const datas = [
  { qty_approved: "1", resolution: "5", status: "", order: "1332" },
  { qty_approved: "1", resolution: "3", status: "", order: "1331" },
  { qty_approved: "1", resolution: "9", status: "", order: "1333" },
];

const dataV = [{
  "resolution": "4",
}, {
  "resolution": "7",
}, {
  "resolution": "1",
}];

// mapping approach.

function copyItemAndAssignSameIndexResolutionFromTargetArray(item, idx) {
  // - this merge pattern is agnostic about an `item`'s structure.
  // - `item` could feature more keys but just `resolution` gets reassigned.
  return Object.assign({}, item, { resolution: this[idx].resolution });
}
console.log(
  'mapped version of changed `dataV` items ...',
  datas.map(copyItemAndAssignSameIndexResolutionFromTargetArray, dataV)
);
console.log('still unmutated `datas` ...', { datas });

.as-console-wrapper { min-height: 100%!important; top: 0; }

In case the OP wants to mutate each of the datas array's items, the above introduced mapper function changes slightly in order to be utilized by a context aware forEach ...

const datas = [
  { qty_approved: "1", resolution: "5", status: "", order: "1332" },
  { qty_approved: "1", resolution: "3", status: "", order: "1331" },
  { qty_approved: "1", resolution: "9", status: "", order: "1333" },
];

const dataV = [{
  "resolution": "4",
}, {
  "resolution": "7",
}, {
  "resolution": "1",
}];

// mapping approach.

function assignSameIndexResolutionFromTargetArray(item, idx) {
  item.resolution = this[idx].resolution;
  // Object.assign(item, { resolution: this[idx].resolution });
}
datas.forEach(assignSameIndexResolutionFromTargetArray, dataV);

console.log('mutated `datas` array ...', { datas });

.as-console-wrapper { min-height: 100%!important; top: 0; }

Or (desperately guessing) is the OP looking for a solution where a datas item has to be updated/mutated by an explicitly provided dataV item? Something like this?..

const datas = [
  { qty_approved: "1", resolution: "3", status: "", order: "1331" },
  { qty_approved: "1", resolution: "5", status: "", order: "1332" },
  { qty_approved: "1", resolution: "9", status: "", order: "1333" },
];

const dataV = [{
  "resolution": "1",
}, {
  "resolution": "4",
}, {
  "resolution": "7",
}, ];

function updateResolution(targetArray, sourceArray, resolutionItem) {
  const updateIndex =
    sourceArray.findIndex(item =>
      item.resolution === resolutionItem.resolution
    );
  targetArray[updateIndex].resolution = resolutionItem.resolution;

  return targetArray[updateIndex];
}

console.log(
  'updateResolution(datas, dataV, { resolution: "4"}) ...',
  updateResolution(datas, dataV, { resolution: "4"})
);
console.log('mutated `datas` array ...', { datas });

console.log(
  'updateResolution(datas, dataV, { resolution: "7"}) ...',
  updateResolution(datas, dataV, { resolution: "7"})
);
console.log('mutated `datas` array ...', { datas });

.as-console-wrapper { min-height: 100%!important; top: 0; }

@ShantalKaula ... done. Explanation, documentation links and 2nd, mutating, approach have been provided. — Peter Seliger, Nov 02 '21 at 18:58
@ShantalKaula ... check out the latest tries. And in case of having not found so far the right approach/solution amongst all the provided answers, I suggest to reformulate the entire question where the problem is going to be explained in detail in a comprehensible way, accompanied by a more meaningful example code as well. — Peter Seliger, Nov 03 '21 at 11:58

score 0 · Answer 4 · answered Nov 02 '21 at 18:22

0

Since you can get the corresponding element by array index, you can get the corresponding resolution as easy as the following snippet:

datas.forEach( (_, i) => {
    datas[i].resolution = dataV[i].resolution
})

answered Nov 02 '21 at 18:22

mamady

180
1
11

score 0 · Answer 5 · answered Nov 02 '21 at 18:41

Using Array#reduce, iterate over dataV while updating a Map where the index is the key and the resolution is the value
Using Array#forEach, iterate over datas, if the above map has a key of such index, update the resolution

const 
  dataV = [ { "resolution": "4" }, { "resolution": "7" }, { "resolution": "1" } ],
  datas = [
    { qty_approved: "1", resolution: "5", status: "", order: "1332" },
    { qty_approved: "1", resolution: "3", status: "", order: "1331" },
    { qty_approved: "1", resolution: "9", status: "", order: "1333" },
  ];

const indexResolutionMap = dataV.reduce((map, { resolution }, i) =>
  map.set(i, resolution)
, new Map);

datas.forEach((e, i) => {
  const resolution = indexResolutionMap.get(i);
  if(resolution) e.resolution = resolution;
});

console.log(datas);

Update the object value based on array index

5 Answers5

Linked