Searching and updating elements within an array object in JavaScript - what's the best way to do this?

Question

Searching and updating elements within an array object in JavaScript - what's the best way to do this?

I am attempting to locate an element in the target array and update it in the source array.

let sourceArray = [
  {
    "userId": "123",
    "applicationId": "abc",
    "selections": [
      {
        "applicationId": 70930,
        "creationDate": "2021-01-28",
        "responseStatus": "PENDING"
      }
    ]
  }
]

let array2 = [
  {
      "applicationId": 70930,
      "code": "TEST CODE",
      "creationDate": "2021-01-28",
      "submissionDate": "2021-01-29",
      "status": "SUBMITTED",
      "outcomeStatus": "PENDING",
      "responseStatus": "PENDING"
  }
]

The desired outcome is for selections in the source array to be updated with matching elements from array2 based on applicationId

[
  {
    "userId": "123",
    "applicationId": "abc",
    "selections": [
      {
        "applicationId": 70930,
        "code": "TEST CODE",
        "creationDate": "2021-01-28",
        "submissionDate": "2021-01-29",
        "status": "SUBMITTED",
        "outcomeStatus": "PENDING",
        "responseStatus": "PENDING"
      }
    ]
  }
]

I attempted updating the array using the following code snippet

const newArray = sourceArray.map(item => {
  let item2 = array2.find(i2 => item.selections.some(id => i2.applicationId === id.applicationId));
  return item2 ? { ...item, ...item2 } : item;
});

javascript typescript

Answer 1

Answer №1

If you're looking for a solution, consider implementing this code snippet. However, don't forget to maintain other relevant information while performing the destructuring process.

let sourceArray = [
  {
    userId: "123",
    applicationId: "abc",
    selections: [
      {
        applicationId: 70930,
        creationDate: "2021-01-28",
        responseStatus: "PENDING",
      },
    ],
  },
];

let array2 = [
  {
    applicationId: 70930,
    code: "TEST CODE",
    creationDate: "2021-01-28",
    submissionDate: "2021-01-29",
    status: "SUBMITTED",
    outcomeStatus: "PENDING",
    responseStatus: "PENDING",
  },
];

sourceArray = sourceArray.map(({ selections, ...otherInfo }) => ({
  ...otherInfo,
  selections: selections.map((selection) => ({
    ...selection,
    ...array2.find((el) => el.applicationId === selection.applicationId),
  })),
}));

console.log(sourceArray)

Answer 2

If you're looking for a solution, consider implementing this code snippet. However, don't forget to maintain other relevant information while performing the destructuring process.

let sourceArray = [
  {
    userId: "123",
    applicationId: "abc",
    selections: [
      {
        applicationId: 70930,
        creationDate: "2021-01-28",
        responseStatus: "PENDING",
      },
    ],
  },
];

let array2 = [
  {
    applicationId: 70930,
    code: "TEST CODE",
    creationDate: "2021-01-28",
    submissionDate: "2021-01-29",
    status: "SUBMITTED",
    outcomeStatus: "PENDING",
    responseStatus: "PENDING",
  },
];

sourceArray = sourceArray.map(({ selections, ...otherInfo }) => ({
  ...otherInfo,
  selections: selections.map((selection) => ({
    ...selection,
    ...array2.find((el) => el.applicationId === selection.applicationId),
  })),
}));

console.log(sourceArray)

Searching and updating elements within an array object in JavaScript - what's the best way to do this?

Answer №1

Similar questions

"Utilizing Typescript's keyof operator on its own

Extracting data from hidden columns in jQuery DataTables

I encountered a "ReferenceError: db is not defined" while trying to call a function in Express.js with MongoDB intergr

Encountering an error of incorrect format while attempting to ssh into an Azure NextGen VM created by P

Ways to transmit the appropriate model

Executing a console.log statement within an array nested inside a function of an object

Can you explain the use of the 'this' keyword in map() and call() functions?

When a Vue.js Directive is inserted or bound, it actually takes precedence over the click event

Preventing the need for reassessing ng-options

The formBuilder validator pattern seems to be malfunctioning

Leverage the new Animation support in RC 5 to animate each item in an *ngFor list sequentially in Angular 2

Using JavaScript, iterate over an array to generate input fields and assign values, with the last item in the array pop

Avoid triggering the API with rapid successive clicks

My simple application is experiencing a problem where ComponentDidMount is not being invoked

Encountering issues with token header syntax while making an API call in Google Sheets using Apps Script

Vue and Vuex retrieve state data from the server in a single request

Unable to transfer an array from getStaticProps method in Next.js

Tips on narrowing down the type of callback event depending on the specific event name

What is the best way to show and hide text by toggling a link instead of a button?

How do useCases interact with each other within Clean Architecture principles in NodeJS?