J'ai un tableau:

myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}, etc.]

Je ne parviens pas à modifier la structure du tableau. Je reçois un identifiant de 45, et je veux obtenir 'bar'cet objet dans le tableau.

Comment faire cela en JavaScript ou en utilisant jQuery?

Utilisez la find()méthode:

myArray.find(x => x.id === '45').foo;

De MDN :

La find()méthode renvoie la première valeur du tableau si un élément du tableau satisfait la fonction de test fournie. Sinon undefinedest retourné.

Si vous souhaitez plutôt trouver son index , utilisezfindIndex() :

myArray.findIndex(x => x.id === '45');

De MDN :

le findIndex() méthode renvoie l'index du premier élément du tableau qui satisfait la fonction de test fournie. Sinon, -1 est renvoyé.

Si vous souhaitez obtenir un tableau d'éléments correspondants, utilisez le filter() plutôt méthode:

myArray.filter(x => x.id === '45');

Cela renverra un tableau d'objets. Si vous souhaitez obtenir un tableau de foopropriétés, vous pouvez le faire avec la map()méthode:

myArray.filter(x => x.id === '45').map(x => x.foo);

Remarque: les méthodes comme find()ou filter()et les fonctions fléchées ne sont pas prises en charge par les anciens navigateurs (comme IE), donc si vous souhaitez prendre en charge ces navigateurs, vous devez transpiler votre code à l'aide de Babel (avec le polyfill ).

Comme vous utilisez déjà jQuery, vous pouvez utiliser la fonction grep qui est destinée à rechercher un tableau:

var result = $.grep(myArray, function(e){ return e.id == id; });

Le résultat est un tableau avec les éléments trouvés. Si vous savez que l'objet est toujours là et qu'il ne se produit qu'une seule fois, vous pouvez simplement utiliser result[0].foopour obtenir la valeur. Sinon, vous devez vérifier la longueur du tableau résultant. Exemple:

if (result.length === 0) {
  // no result found
} else if (result.length === 1) {
  // property found, access the foo property using result[0].foo
} else {
  // multiple items found
}

Une autre solution consiste à créer un objet de recherche:

var lookup = {};
for (var i = 0, len = array.length; i < len; i++) {
    lookup[array[i].id] = array[i];
}

... now you can use lookup[id]...

Ceci est particulièrement intéressant si vous devez effectuer de nombreuses recherches.

Cela n'aura pas besoin de beaucoup plus de mémoire car les ID et les objets seront partagés.

ECMAScript 2015 fournit la méthode find () sur les tableaux:

var myArray = [
 {id:1, name:"bob"},
 {id:2, name:"dan"},
 {id:3, name:"barb"},
]

// grab the Array item which matchs the id "2"
var item = myArray.find(item => item.id === 2);

// print
console.log(item.name);

Il fonctionne sans bibliothèques externes. Mais si vous voulez un support de navigateur plus ancien, vous voudrez peut-être inclure ce polyfill .

Underscore.js a une belle méthode pour cela:

myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'},etc.]
obj = _.find(myArray, function(obj) { return obj.id == '45' })

Je pense que le moyen le plus simple serait le suivant, mais cela ne fonctionnera pas sur Internet Explorer 8 (ou version antérieure):

var result = myArray.filter(function(v) {
    return v.id === '45'; // Filter out the appropriate one
})[0].foo; // Get result and access the foo property

Essayez ce qui suit

function findById(source, id) {
  for (var i = 0; i < source.length; i++) {
    if (source[i].id === id) {
      return source[i];
    }
  }
  throw "Couldn't find object with id: " + id;
}

myArray.filter(function(a){ return a.id == some_id_you_want })[0]

Une version générique et plus flexible de la fonction findById ci-dessus:

// array = [{key:value},{key:value}]
function objectFindByKey(array, key, value) {
    for (var i = 0; i < array.length; i++) {
        if (array[i][key] === value) {
            return array[i];
        }
    }
    return null;
}

var array = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}];
var result_obj = objectFindByKey(array, 'id', '45');

Vous pouvez l'obtenir facilement en utilisant la fonction map () :

myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}];

var found = $.map(myArray, function(val) {
    return val.id == 45 ? val.foo : null;
});

//found[0] == "bar";

Exemple de travail: http://jsfiddle.net/hunter/Pxaua/

Vous pouvez utiliser des filtres,

  function getById(id, myArray) {
    return myArray.filter(function(obj) {
      if(obj.id == id) {
        return obj 
      }
    })[0]
  }

get_my_obj = getById(73, myArray);

Bien qu'il existe de nombreuses réponses correctes ici, beaucoup d'entre elles n'abordent pas le fait qu'il s'agit d'une opération inutilement coûteuse si elle est effectuée plusieurs fois. Dans un cas extrême, cela pourrait être la cause de réels problèmes de performances.

Dans le monde réel, si vous traitez beaucoup d'éléments et que les performances sont une préoccupation, il est beaucoup plus rapide de créer initialement une recherche:

var items = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}];

var lookup = items.reduce((o,i)=>o[i.id]=o,{});

vous pouvez ensuite accéder aux éléments dans un délai fixe comme celui-ci:

var bar = o[id];

Vous pouvez également envisager d'utiliser une carte au lieu d'un objet comme recherche: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Map

Utilisation native Array.reduce

var array = [ {'id':'73' ,'foo':'bar'} , {'id':'45' ,'foo':'bar'} , ];
var id = 73;

var found = array.reduce(function(a, b){
    return (a.id==id && a) || (b.id == id && b)
});

renvoie l'élément objet s'il est trouvé, sinon false

Si vous effectuez cette opération plusieurs fois, vous pouvez configurer une carte (ES6):

const map = new Map( myArray.map(el => [el.id, el]) );

Ensuite, vous pouvez simplement faire:

map.get(27).foo

Voici comment j'y arriverais en JavaScript pur, de la manière la plus minimale que je puisse penser qui fonctionne dans ECMAScript 3 ou version ultérieure. Il revient dès qu'une correspondance est trouvée.

var getKeyValueById = function(array, key, id) {
    var testArray = array.slice(), test;
    while(test = testArray.pop()) {
        if (test.id === id) {
            return test[key];
        }
    }
    // return undefined if no matching id is found in array
    return;
}

var myArray = [{'id':'73', 'foo':'bar'}, {'id':'45', 'foo':'bar'}]
var result = getKeyValueById(myArray, 'foo', '45');

// result is 'bar', obtained from object with id of '45'

Plus générique et court

function findFromArray(array,key,value) {
        return array.filter(function (element) {
            return element[key] == value;
        }).shift();
}

dans votre cas Ex. var element = findFromArray(myArray,'id',45)cela vous donnera l'élément entier.

Vous pouvez essayer Sugarjs sur http://sugarjs.com/ .

Il a une méthode très douce sur les tableaux, .find. Vous pouvez donc trouver un élément comme celui-ci:

array.find( {id: 75} );

Vous pouvez également lui passer un objet avec plus de propriétés pour ajouter une autre "clause where".

Notez que Sugarjs étend les objets natifs, et certaines personnes considèrent cela très mal ...

S'appuyant sur la réponse acceptée:

jQuery:

var foo = $.grep(myArray, function(e){ return e.id === foo_id})
myArray.pop(foo)

Ou CoffeeScript:

foo = $.grep myArray, (e) -> e.id == foo_id
myArray.pop foo

Récemment, je dois faire face à la même chose dans laquelle je dois rechercher la chaîne à partir d'un énorme tableau.

Après quelques recherches, j'ai trouvé que ce serait facile à manipuler avec un code simple:

Code:

var items = mydata.filter(function(item){
    return item.word.toLowerCase().startsWith( 'gk );
})

Voir https://jsfiddle.net/maheshwaghmare/cfx3p40v/4/

Itérer sur n'importe quel élément du tableau. Pour chaque élément que vous visitez, vérifiez l'ID de cet élément. Si c'est un match, retournez-le.

Si vous voulez juste le codez:

function getId(array, id) {
    for (var i = 0, len = array.length; i < len; i++) {
        if (array[i].id === id) {
            return array[i];
        }
    }
    return null; // Nothing found
}

Et la même chose en utilisant les méthodes de tableau d'ECMAScript 5:

function getId(array, id) {
    var obj = array.filter(function (val) {
        return val.id === id;
    });

    // Filter returns an array, and we just want the matching item.
    return obj[0];
}

Tant que le navigateur prend en charge ECMA-262 , 5e édition (décembre 2009), cela devrait fonctionner, presque à une ligne:

var bFound = myArray.some(function (obj) {
    return obj.id === 45;
});

Vous pouvez le faire même en JavaScript pur en utilisant la fonction de "filtre" intégrée pour les tableaux:

Array.prototype.filterObjects = function(key, value) {
    return this.filter(function(x) { return x[key] === value; })
}

Alors maintenant, passez simplement "id" à la place de keyet "45" à la place de value, et vous obtiendrez l'objet complet correspondant à un id de 45. Ce serait donc,

myArr.filterObjects("id", "45");

Utilisez la Array.prototype.filter()fonction.

DÉMO : https://jsfiddle.net/sumitridhal/r0cz0w5o/4/

JSON

var jsonObj =[
 {
  "name": "Me",
  "info": {
   "age": "15",
   "favColor": "Green",
   "pets": true
  }
 },
 {
  "name": "Alex",
  "info": {
   "age": "16",
   "favColor": "orange",
   "pets": false
  }
 },
{
  "name": "Kyle",
  "info": {
   "age": "15",
   "favColor": "Blue",
   "pets": false
  }
 }
];

FILTRE

var getPerson = function(name){
    return jsonObj.filter(function(obj) {
      return obj.name === name;
    });
}

Nous pouvons utiliser les méthodes Jquery $.each()/$.grep()

var data= [];
$.each(array,function(i){if(n !== 5 && i > 4){data.push(item)}}

ou

var data = $.grep(array, function( n, i ) {
  return ( n !== 5 && i > 4 );
});

utilisez la syntaxe ES6:

Array.find, Array.filter, Array.forEach, Array.map

Ou utilisez Lodash https://lodash.com/docs/4.17.10#filter , Underscore https://underscorejs.org/#filter

J'ai vraiment aimé la réponse fournie par Aaron Digulla mais je devais garder mon tableau d'objets afin de pouvoir le parcourir plus tard. Je l'ai donc modifié pour

	var indexer = {};
	for (var i = 0; i < array.length; i++) {
	    indexer[array[i].id] = parseInt(i);
	}
	
	//Then you can access object properties in your array using 
	array[indexer[id]].property

Utilisation:

var retObj ={};
$.each(ArrayOfObjects, function (index, obj) {

        if (obj.id === '5') { // id.toString() if it is int

            retObj = obj;
            return false;
        }
    });
return retObj;

Il doit retourner un objet par id.

Cette solution peut également être utile:

Array.prototype.grep = function (key, value) {
    var that = this, ret = [];
    this.forEach(function (elem, index) {
        if (elem[key] === value) {
            ret.push(that[index]);
        }
    });
    return ret.length < 2 ? ret[0] : ret;
};
var bar = myArray.grep("id","45");

Je l'ai fait comme $.grepet si un objet est découvert, la fonction retournera l'objet, plutôt qu'un tableau.

A partir de la réponse de aggaton , ceci est une fonction qui renvoie en fait l'élément voulu (ou nullsi elle est introuvable), étant donné la arrayet une callbackfonction qui retourne une valeur de truthy pour l'élément « correct »:

function findElement(array, callback) {
    var elem;
    return array.some(function(e) {
        if (callback(e)) {
            elem = e;
            return true;
        }
    }) ? elem : null;
});

N'oubliez pas que cela ne fonctionne pas nativement sur IE8-, car il ne prend pas en charge some. Un polyfill peut être fourni, alternativement il y a toujours la forboucle classique :

function findElement(array, callback) {
    for (var i = 0; i < array.length; i++)
        if (callback(array[i])) return array[i];
    return null;
});

C'est en fait plus rapide et plus compact. Mais si vous ne voulez pas réinventer la roue, je suggère d'utiliser une bibliothèque d'utilitaires comme le soulignement ou le lodash.

Le plus court,

var theAnswerObj = _.findWhere(array, {id : 42});

Considérez "axesOptions" comme un tableau d'objets avec un format d'objet étant {: field_type => 2,: fields => [1,3,4]}

function getFieldOptions(axesOptions,choice){
  var fields=[]
  axesOptions.each(function(item){
    if(item.field_type == choice)
        fields= hashToArray(item.fields)
  });
  return fields;
}