Mise à jour si elle existe ou ajouter un nouvel élément à un tableau d'objets de manière élégante en javascript + lodash

J'ai donc un tableau d'objets comme ça:

var arr = [
  {uid: 1, name: "bla", description: "cucu"},
  {uid: 2, name: "smth else", description: "cucarecu"},
]

uid est l'identifiant unique de l'objet dans ce tableau. Je suis à la recherche de la manière élégante de modifier l'objet, si nous avons l'objet de la uid, ou ajouter un nouvel élément, si l'présenté uid n'existe pas dans le tableau. J'imagine que la fonction à se comporter comme ça en js console:

> addOrReplace(arr, {uid: 1, name: 'changed name', description: "changed description"})
> arr
[
  {uid: 1, name: "bla", description: "cucu"},
  {uid: 2, name: "smth else", description: "cucarecu"},
]
> addOrReplace(arr, {uid: 3, name: 'new element name name', description: "cocoroco"})
> arr
[
  {uid: 1, name: "bla", description: "cucu"},
  {uid: 2, name: "smth else", description: "cucarecu"},
  {uid: 3, name: 'new element name name', description: "cocoroco"}
]

Ma façon actuelle ne semble pas être très élégant et fonctionnel:

function addOrReplace (arr, object) {
  var index = _.findIndex(arr, {'uid' : object.uid});
  if (-1 === index) {
    arr.push(object);
  } else {
    arr[index] = object;
  }
}

Je suis en utilisant lodash, donc je pensais à quelque chose comme modifié _.union personnalisé pour le contrôle d'égalité.

OriginalL'auteur ganqqwerty | 2014-09-10

  1. 8

    Vous pouvez utiliser un objet au lieu d'un tableau:

    var hash = {
  '1': {uid: 1, name: "bla", description: "cucu"},
  '2': {uid: 2, name: "smth else", description: "cucarecu"}
};

    Les clés sont les uides. Maintenant, votre fonction addOrReplace est simple comme ceci:

    function addOrReplace(hash, object) {
    hash[object.uid] = object;
}

    Mise à JOUR

    Il est également possible de utiliser un objet comme un indice en plus de la matrice.

    De cette façon, vous avez rapide des recherches et aussi un tableau:

    var arr = [],
    arrIndex = {};

addOrReplace({uid: 1, name: "bla", description: "cucu"});
addOrReplace({uid: 2, name: "smth else", description: "cucarecu"});
addOrReplace({uid: 1, name: "bli", description: "cici"});

function addOrReplace(object) {
    var index = arrIndex[object.uid];
    if(index === undefined) {
        index = arr.length;
        arrIndex[object.uid] = index;
    }
    arr[index] = object;
}

    Prendre un coup d'oeil à la jsfiddle-démo (un objet-orienté solution vous trouverez ici)

    oui, j'aime cette structure trop, mais certaines bibliothèques, j'utilise ne le supporte pas. Comme Angulaire typeahead, qui peut parcourir uniquement les tableaux.
    Vous pouvez utiliser cette structure comme un indice. De cette façon, vous avez rapidement des recherches et une autre matrice pour des choses comme un tableau est nécessaire.

    OriginalL'auteur friedi

  2. 4

    Vieux post, mais pourquoi ne pas utiliser la fonction de filtre?

    //If you find the index of an existing uid, save its index then delete it
//     --- after the filter add the new object.
function addOrReplace( argh, obj ) {
  var index = -1;
  argh.filter((el, pos) => {
    if( el.uid == obj.uid )
      delete argh[index = pos];
    return true;
  });

  //put in place, or append to list
  if( index == -1 ) 
    argh.push(obj);
  else 
    argh[index] = obj;
}

    Ici est un jsfiddle montrant comment il fonctionne.

    OriginalL'auteur Chris Sullivan

  3. 4

    Dans votre première approche, pas besoin de Lodash grâce à findIndex():

    function addOrReplace(array, item) { //(1)
  const i = array.findIndex(_item => _item.id === item.id);
  if (i > -1) array[i] = item; //(2)
  else array.push(item);
}

    Exemple:

    const array = [
  {id: 0, name: 'Apple', description: 'fruit'},
  {id: 1, name: 'Banana', description: 'fruit'},
  {id: 2, name: 'Tomato', description: 'vegetable'}
];

addOrReplace(array, {id: 2, name: 'Tomato', description: 'fruit'})
console.log(array);
/* =>
[
  {id: 0, name: 'Apple', description: 'fruit'},
  {id: 1, name: 'Banana', description: 'fruit'},
  {id: 2, name: 'Tomato', description: 'fruit'}
]
*/

addOrReplace(array, {id: 3, name: 'Cucumber', description: 'vegetable'})
console.log(array);
/* =>
[
  {id: 0, name: 'Apple', description: 'fruit'},
  {id: 1, name: 'Banana', description: 'fruit'},
  {id: 2, name: 'Tomato', description: 'fruit'},
  {id: 3, name: 'Cucumber', description: 'vegetable'}
]
*/

    (1) autres noms possibles: addOrUpdate(), upsert(), appendOrUpdate(), insertOrUpdate()...

    (2) Peut également être fait avec array.splice(i, 1, item)

    Noter que cette démarche est "mutable" (vs "immuable"): au lieu de retourner un nouveau tableau (sans toucher le tableau d'origine), il modifie directement le tableau d'origine. La plupart du temps, c'est ce que vous voulez.

    OriginalL'auteur tanguy_k

  4. 3

    Peut-être

    _.mixin({
    mergeById: function mergeById(arr, obj, idProp) {
        var index = _.findIndex(arr, function (elem) {
            //double check, since undefined === undefined
            return typeof elem[idProp] !== "undefined" && elem[idProp] === obj[idProp];
        });

        if (index > -1) {
            arr[index] = obj; 
        } else {
            arr.push(obj);
        }

        return arr;
    }
});

    et 

    var elem = {uid: 3, name: 'new element name name', description: "cocoroco"};

_.mergeById(arr, elem, "uid");

    OriginalL'auteur Tomalak

  5. 1

    Qu'en ayant les indices de la matrice de même que la uid?, comme:

    arr = [];
arr[1] = {uid: 1, name: "bla", description: "cucu"};
arr[2] = {uid: 2, name: "smth else", description: "cucarecu"};

    de cette façon, vous pouvez simplement utiliser

    arr[affectedId] = changedObject;
    fonctionne bien si j'ai la garantie que l'uuid est toujours int. Je pense que parfois, il n'est pas le cas. Mais même si j'ai eu de la présente garantie, je me sens mal à l'aise d'avoir des tableaux avec des éléments manquants comme ça: arr[2134], arr[2135], lors de l'arr[0] n'existe pas.
    donc, place du classique tableau associatif l'utilisation d'un (objet), de cette façon, vous pouvez utiliser non entier index et ne pas avoir de "trous" dans votre tableau

    OriginalL'auteur Drecker