it-swarm.com.de

Finden Sie ein Objekt anhand der ID in einem Array von JavaScript-Objekten

Ich habe ein Array:

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

Ich kann die Struktur des Arrays nicht ändern. Mir wird eine ID von 45 übergeben, und ich möchte 'bar' für dieses Objekt im Array erhalten. 

Wie mache ich das in JavaScript oder mit jQuery?

1246
thugsb

Verwenden Sie die find()-Methode:

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

Von MDN :

Die find()-Methode gibt einen Wert im Array zurück, wenn ein Element im Array die bereitgestellte Testfunktion erfüllt. Andernfalls wird undefined zurückgegeben.


Wenn Sie stattdessen index suchen möchten, verwenden Sie findIndex():

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

Von MDN :

Die findIndex()-Methode gibt den Index des ersten Elements im Array zurück, das die bereitgestellte Testfunktion erfüllt. Andernfalls wird -1 zurückgegeben.


Wenn Sie ein Array mit übereinstimmenden Elementen erhalten möchten, verwenden Sie stattdessen die Methode filter() :

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

Dadurch wird ein Array von Objekten zurückgegeben. Wenn Sie ein Array mit foo-Eigenschaften abrufen möchten, können Sie dies mit der map() -Methode tun:

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

Anmerkung: Methoden wie find() oder filter() und arrow Funktionen werden nicht von älteren Browsern (wie IE) unterstützt. Wenn Sie diese Browser unterstützen möchten, sollten Sie Ihren Code mit Babel (mit dem Polyfill ).

677

Da Sie bereits jQuery verwenden, können Sie die grep - Funktion verwenden, die zum Suchen eines Arrays gedacht ist:

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

Das Ergebnis ist ein Array mit den gefundenen Elementen. Wenn Sie wissen, dass das Objekt immer vorhanden ist und nur einmal vorkommt, können Sie einfach mit result[0].foo den Wert abrufen. Andernfalls sollten Sie die Länge des resultierenden Arrays überprüfen. Beispiel:

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

Eine andere Lösung ist das Erstellen eines Suchobjekts:

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

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

Dies ist besonders interessant, wenn Sie viele Suchvorgänge durchführen müssen.

Dies erfordert nicht viel mehr Speicher, da die IDs und Objekte gemeinsam genutzt werden.

347
Aaron Digulla

ECMAScript 2015 stellt die find () - Methode für Arrays bereit: 

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);

Es funktioniert ohne externe Bibliotheken. Wenn Sie jedoch ältere Browserunterstützung möchten, möchten Sie dieses Polyfill einschließen.

158
Rúnar Berg

Underscore.js hat dafür eine nette Methode:

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

Ich denke, der einfachste Weg wäre der folgende, aber er funktioniert nicht mit Internet Explorer 8 (oder früher):

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

Versuche Folgendes

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;
}
65
JaredPar
myArray.filter(function(a){ return a.id == some_id_you_want })[0]
42
Danilo Colasso

Eine generische und flexiblere Version der findById-Funktion oben:

// 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');
30
will Farrell

Sie können dies mit der Funktion map () leicht erreichen:

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";

Arbeitsbeispiel: http://jsfiddle.net/hunter/Pxaua/

14
hunter

Sie können Filter verwenden,

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

get_my_obj = getById(73, myArray);
13
Joe Lewis

Zwar gibt es viele richtige Antworten, aber viele von ihnen gehen nicht darauf ein, dass dies eine unnötig teure Operation ist, wenn sie mehr als einmal durchgeführt wird. Im Extremfall kann dies zu echten Leistungsproblemen führen.

Wenn Sie in der realen Welt viele Artikel bearbeiten und Leistung ein Problem darstellt, ist es viel schneller, zunächst eine Suche durchzuführen:

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

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

sie können dann Artikel in festgelegter Zeit wie folgt erhalten: 

var bar = o[id];

Sie können auch die Verwendung einer Map anstelle eines Objekts als Suchfunktion in Betracht ziehen: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Map

10
Tom

Verwendung von nativem 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)
});

gibt das Objektelement zurück, falls gefunden, andernfalls false

10
laggingreflex

So würde ich in reinem JavaScript vorgehen, auf die minimalste Weise, die ich mir vorstellen kann, die in ECMAScript 3 oder höher funktioniert. Es wird zurückgegeben, sobald eine Übereinstimmung gefunden wird.

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'
6
Dan W

Aufbauend auf der akzeptierten Antwort:

jQuery:

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

Oder CoffeeScript:

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

Sie können Sugarjs unter http://sugarjs.com/ ausprobieren.

Es hat eine sehr süße Methode für Arrays, .find. So können Sie ein Element wie dieses finden:

array.find( {id: 75} );

Sie können auch ein Objekt mit mehr Eigenschaften übergeben, um eine weitere "where-Klausel" hinzuzufügen.

Beachten Sie, dass Sugarjs native Objekte erweitert, und manche Leute halten das für sehr böse ...

4
deepflame

Wenn Sie dies mehrmals tun, können Sie eine Map (ES6) einrichten:

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

Dann können Sie einfach folgendes tun:

map.get(27).foo
4
Jonas Wilms

Verwenden Sie die Funktion Array.prototype.filter().

DEMO: 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
  }
 }
];

FILTER

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

Durchlaufen Sie jedes Element im Array. Überprüfen Sie für jeden Artikel, den Sie besuchen, die ID dieses Artikels. Wenn es eine Übereinstimmung ist, geben Sie es zurück.

Wenn Sie nur die Codez wollen:

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
}

Und dasselbe mit den Array-Methoden von 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];
}
3
Zirak

Sie können dies sogar in reinem JavaScript tun, indem Sie die integrierte "filter" -Funktion für Arrays verwenden:

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

Übergeben Sie nun einfach "id" anstelle von key und "45" anstelle von value, und Sie erhalten das vollständige Objekt, das einer ID von 45 entspricht.

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

Solange der Browser ECMA-262 , 5. Ausgabe (Dezember 2009) unterstützt, sollte dies fast einzeilig funktionieren:

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

Die Antwort von Aaron Digulla hat mir wirklich gut gefallen, aber ich musste mein Array von Objekten behalten, damit ich es später durchlaufen konnte. Also habe ich es geändert 

	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

2
quincyaft

Diese Lösung kann auch hilfreich sein:

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");

Ich habe es genau wie $.grep gemacht, und wenn ein Objekt herausgefunden wird, gibt function das Objekt zurück und nicht ein Array.

1
soytian

Benutzen:

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

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

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

Es sollte ein Objekt nach ID zurückgeben.

1
volumexxx

Betrachten Sie "axisOptions" als Array von Objekten mit einem Objektformat {: 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;
}
0
ramya

Mehr generisch und kurz

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

in Ihrem Fall Ex. var element = findFromArray(myArray,'id',45) das gibt Ihnen das ganze Element.

0
Savan Kaneriya

Kürzeste,

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

Wir können die Jquery-Methoden $ .each ()/$. Grep () var data= []; $.each(array,function(i){if(n !== 5 && i > 4){data.Push(item)}} verwenden.

oder 

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

verwenden Sie die ES6-Syntax: Array.find, Array.filter, Array.forEach, Array.map

Oder verwenden Sie Lodash https://lodash.com/docs/4.17.10#filter , Unterstrich https://underscorejs.org/#filter

0
TLbiz

Ausgehend von aggatons Antwort ist dies eine Funktion, die das gewünschte Element (oder null, falls nicht gefunden) tatsächlich zurückgibt, wenn die array und eine callback-Funktion einen wahrheitsgemäßen Wert für das "korrekte" Element zurückgibt:

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

Denken Sie daran, dass dies auf IE8 nicht nativ funktioniert, da es some nicht unterstützt. Ein Polyfill kann bereitgestellt werden, alternativ gibt es immer die klassische for-Schleife:

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

Es ist eigentlich schneller und kompakter. Wenn Sie das Rad jedoch nicht neu erfinden möchten, schlage ich vor, eine Dienstprogrammbibliothek wie Unterstriche oder Lodash zu verwenden.

0
MaxArt