Javascript ES6 / ES5 trouver dans le tableau et changer

J'ai un tableau d'objets. Je veux trouver par un champ, puis le changer:

var item = {...}
var items = [{id:2}, {id:2}, {id:2}];

var foundItem = items.find(x => x.id == item.id);
foundItem = item;

Je veux qu'il change l'objet d'origine. Comment? (Je m'en fiche si ce sera aussi en lodash)

Vous pouvez utiliser findIndex pour rechercher l'index dans le tableau de l'objet et le remplacer si nécessaire:

var item = {...}
var items = [{id:2}, {id:2}, {id:2}];

var foundIndex = items.findIndex(x => x.id == item.id);
items[foundIndex] = item;

Cela suppose des identifiants uniques. Si vos identifiants sont dupliqués (comme dans votre exemple), il est probablement préférable d'utiliser forEach:

items.forEach((element, index) => {
    if(element.id === item.id) {
        items[index] = item;
    }
});

Ma meilleure approche est:

var item = {...}
var items = [{id:2}, {id:2}, {id:2}];

items[items.findIndex(el => el.id === item.id)] = item;

Référence pour findIndex

Et au cas où vous ne voudriez pas remplacer par un nouvel objet, mais plutôt copier les champs de item, vous pouvez utiliser Object.assign:

Object.assign(items[items.findIndex(el => el.id === item.id)], item)

comme alternative avec .map():

Object.assign(items, items.map(el => el.id === item.id? item : el))

Approche fonctionnelle :

Ne modifiez pas le tableau, utilisez-en un nouveau pour ne pas générer d'effets secondaires

const updatedItems = items.map(el => el.id === item.id ? item : el)

Une autre approche consiste à utiliser l' épissure .

La splice()méthode modifie le contenu d'un tableau en supprimant ou en remplaçant des éléments existants et / ou en ajoutant de nouveaux éléments en place .

NB: Si vous travaillez avec des frameworks réactifs, il mettra à jour la "vue", votre tableau "sachant" que vous l'avez mis à jour.

Répondre :

var item = {...}
var items = [{id:2}, {id:2}, {id:2}];

let foundIndex = items.findIndex(element => element.id === item.id)
items.splice(foundIndex, 1, item)

Et si vous souhaitez uniquement modifier la valeur d'un élément, vous pouvez utiliser la fonction de recherche :

// Retrieve item and assign ref to updatedItem
let updatedItem = items.find((element) => { return element.id === item.id })

// Modify object property
updatedItem.aProp = ds.aProp

Étant donné un objet modifié et un tableau:

const item = {...}
let items = [{id:2}, {id:3}, {id:4}];

Mettez à jour le tableau avec le nouvel objet en itérant sur le tableau:

items = items.map(x => (x.id === item.id) ? item : x)

Peut être utiliser Filter .

const list = [{id:0}, {id:1}, {id:2}];
let listCopy = [...list];
let filteredDataSource = listCopy.filter((item) => {
       if (item.id === 1) {
           item.id = 12345;
        }

        return item;
    });
console.log(filteredDataSource);

Array [Objet {id: 0}, Objet {id: 12345}, Objet {id: 2}]

travaillé pour moi

let returnPayments = [ ...this.payments ];

returnPayments[this.payments.findIndex(x => x.id == this.payment.id)] = this.payment;

Alors que la plupart des réponses existantes sont excellentes, j'aimerais inclure une réponse utilisant une boucle for traditionnelle, qui devrait également être considérée ici. L'OP demande une réponse compatible ES5 / ES6, et la boucle for traditionnelle s'applique :)

Le problème avec l'utilisation des fonctions de tableau dans ce scénario, est qu'elles ne mutent pas les objets, mais dans ce cas, la mutation est une exigence. Le gain de performance lié à l'utilisation d'une boucle for traditionnelle n'est qu'un (énorme) bonus.

const findThis = 2;
const items = [{id:1, ...}, {id:2, ...}, {id:3, ...}];

for (let i = 0, l = items.length; i < l; ++i) {
  if (items[i].id === findThis) {
    items[i].iAmChanged = true;
    break;
  }
}

Bien que je sois un grand fan des fonctions de tableau, ne les laissez pas être le seul outil de votre boîte à outils. Si le but est de faire muter le tableau, ils ne sont pas la meilleure solution.

Monotouche utilisant un opérateur d'épandage.

 const updatedData = originalData.map(x => (x.id === id ? { ...x, updatedField: 1 } : x));