Switch out an item within a list of objects with a different item

Question

Switch out an item within a list of objects with a different item

I have a variable called this.rows that contains a collection of items. There is a real-time item being received from the server, which matches one of the items in the this.rows object collection.

How can I replace an item with new values?

Below is an example:


    let rows = [
        {id: 11, active: 'no'},
        {id: 22, active: 'yes'},
        {id: 33, active: 'no'},
        {id: 44, active: 'no'}
    ]

    new_item = {id: 22, active:'yeah'};

    rows.forEach(item => {
        if (item.id === new_item.id) {
          return new_item;
        }
    });

javascript vue.js socket.io lodash

Answer 1

Answer №1

Utilize the "findIndex" function to locate the index of the new item element within the rows array. Then, validate if a match was found (by checking if the index is greater than -1). Set the new item in the array at the position of the located element.

const indexOfItemInArray = rows.findIndex(q => q.id === new_item.id);

if (indexOfItemInArray > -1) {
   rows[indexOfItemInArray] = new_item;
}

Alternatively, you can use the "splice" method:

const indexOfItemInArray = rows.findIndex(q => q.id === new_item.id);
rows.splice(indexOfItemInArray, 1, new_item);

Answer 2

Utilize the "findIndex" function to locate the index of the new item element within the rows array. Then, validate if a match was found (by checking if the index is greater than -1). Set the new item in the array at the position of the located element.

const indexOfItemInArray = rows.findIndex(q => q.id === new_item.id);

if (indexOfItemInArray > -1) {
   rows[indexOfItemInArray] = new_item;
}

Alternatively, you can use the "splice" method:

const indexOfItemInArray = rows.findIndex(q => q.id === new_item.id);
rows.splice(indexOfItemInArray, 1, new_item);

Answer 3

Answer №2

If you want to efficiently update an array by replacing a value for a specific id, the map function is your best friend:

items = items.map((item) => {
    if (item.id === updated_item.id) {
        item = updated_item;
    }

    return item;
});

Answer 4

If you want to efficiently update an array by replacing a value for a specific id, the map function is your best friend:

items = items.map((item) => {
    if (item.id === updated_item.id) {
        item = updated_item;
    }

    return item;
});

Answer 5

Answer №3

search for an item within rows and update its keys:

modify rows:

_.chain(rows)
    .find({ id: new_item.id })
    .assign(new_item)
    .value();

avoid modifying rows directly:

const updatedRows = _.chain(rows)
    .findIndex({ id: new_item.id })
    .thru(index => _.chain(rows)
        .cloneDeep()
        .set(index, new_item)
        .value()
    )
    .value();

Answer 6

search for an item within rows and update its keys:

modify rows:

_.chain(rows)
    .find({ id: new_item.id })
    .assign(new_item)
    .value();

avoid modifying rows directly:

const updatedRows = _.chain(rows)
    .findIndex({ id: new_item.id })
    .thru(index => _.chain(rows)
        .cloneDeep()
        .set(index, new_item)
        .value()
    )
    .value();

Switch out an item within a list of objects with a different item

Answer №1

Answer №2

Answer №3

Similar questions

Validating date inputs with ng-change in AngularJS

Trigger an event on an element upon first click, with the condition that the event will only fire again if a different element is clicked

What steps should I take to enable this SimpleModal to load automatically?

Failed to convert value to a string

Looking for Precise Matching within JSON Using JavaScript

"Enhancing the edit functionality of *.Vue components within Laravel: A comprehensive guide

Effective ways to check for the time discrepancy between dates in moment.js

What is the best way to save characters from different languages into variables?

How can you prevent videos from constantly reloading when the same source is used in multiple components or pages?

How to avoid console messages when dealing with Axios 422 error handling?

Evaluating the conditional rendering of a React child component using Jest and Enzyme

Error in React JS: SyntaxError - "Unexpected token '?'"

I am puzzled as to why my Details Modal keeps appearing whenever I click anywhere, even when I have specifically added it to only show up on the event of today. Additionally, I am encountering

Having trouble with Window.open on Mobile Devices and Canvas?

How do I set up middleware with async/await in NestJS?

What is the best way to initially conceal content and then reveal it only after an ajax call is made?

Error 500: Issue with JQuery AJAX File Upload

Vue allows you to use regular expressions with arrays

What is causing my Javascript media query for the sidebar to not function properly?

Different ways to showcase a value from the CSS file on the console using console.log