Поиск объекта по id в массиве объектов JavaScript

У меня есть массив:

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

Я'не могу изменить структуру массива. Мне передается id 45, и я хочу получить 'bar' для этого объекта в массиве.

Как это сделать на JavaScript или с помощью jQuery?

Поскольку вы уже используете jQuery, вы можете использовать функцию grep, которая предназначена для поиска в массиве:

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

Результатом будет массив с найденными элементами. Если вы знаете, что объект всегда находится там и встречается только один раз, вы можете просто использовать result[0].foo для получения значения. В противном случае следует проверить длину полученного массива. Пример:

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
}
Комментарии (14)
Решение

Используйте метод find():

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

Из MDN:

Метод find() возвращает первое значение в массиве, если элемент в массиве удовлетворяет заданной функции проверки. В противном случае возвращается undefined.


Если вы хотите найти его индекс, используйте findIndex():

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

Из MDN:

Метод findIndex() возвращает индекс первого элемента в массиве, который удовлетворяет заданной тестовой функции. В противном случае возвращается -1.


Если вы хотите получить массив совпадающих элементов, используйте вместо этого метод filter():

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

Это вернет массив объектов. Если вы хотите получить массив свойств foo, вы можете сделать это с помощью метода map():

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

Примечание: такие методы, как find() или filter(), и стрелочные функции не поддерживаются старыми браузерами (например, IE), поэтому если вы хотите поддерживать эти браузеры, вам следует транспонировать ваш код, используя Babelpolyfill).

Комментарии (8)

Другим решением является создание объекта поиска:

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

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

Это особенно интересно, если вам нужно выполнить много поисков.

Это не потребует большего объема памяти, поскольку идентификаторы и объекты будут общими.

Комментарии (13)

В ECMAScript 2015 обеспечивает найти() Метод с массивами:

в

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

в

Он работает без внешних библиотек. Но если вы хотите старше поддержка браузеров Вы можете включить эту полифилл.

Комментарии (7)

Underscore.js есть хороший способ для этого:

myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'},etc.]
obj = _.find(myArray, function(obj) { return obj.id == '45' })
Комментарии (3)

Я думаю, что самым простым способом будет следующий, но он не будет работать на Internet Explorer 8 (или более ранней версии):

var result = myArray.filter(function(v) {
    return v.id === '45'; // Filter out the appropriate one
})[0].foo; // Get result and access the foo property
Комментарии (5)

Попробуйте следующее

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;
}
Комментарии (5)
myArray.filter(function(a){ return a.id == some_id_you_want })[0]
Комментарии (3)

Универсальный и более гибкий вариант выше функция findbyid осуществляет:

// 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');
Комментарии (0)

Вы можете сделать это легко с помощью карты()]1 функция:

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

Рабочий пример: http://jsfiddle.net/hunter/Pxaua/

Комментарии (1)

Вы можете использовать фильтры,

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

get_my_obj = getById(73, myArray);
Комментарии (1)

В то время как есть много правильных ответов, многие из них не учитывают тот факт, что это дорогостоящая операция, т. к если делать не один раз. В крайнем случае это может быть причиной реальных проблем с производительностью.

В реальном мире, если вы обрабатываете много предметов и производительность это'ы гораздо быстрее создавать подстановки:

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

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

тогда вы можете сделать на вещи в определенное время, как это :

var bar = o[id];

Вы могли бы также рассмотреть использование карты вместо объекта в качестве подстановки: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Map

Комментарии (0)

Используя родной 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)
});

возвращает элемент объекта, если найден, в противном случае значение false

Комментарии (1)

Если вы сделаете это несколько раз, вы можете создать карту (ЕС6):

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

Затем вы можете просто сделать:

map.get(27).foo
Комментарии (0)

Здесь's, как я'd и это на чистом JavaScript, в самые минимальные способом я могу думать, что работает в ECMAScript 3 или более поздней версии. Он возвращается, как только найдено совпадение.

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'
Комментарии (0)

Более общим и короткое

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

в вашем случае экс. элемент ВАР = findFromArray(с myarray,&#39;ид&#39;,45), что даст вам всего элемента.

Комментарии (0)

Опираясь на принятый ответ:

в jQuery:

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

Или В CoffeeScript:

foo = $.grep myArray, (e) -> e.id == foo_id
myArray.pop foo
Комментарии (0)

Вы можете попробовать Sugarjs от http://sugarjs.com/.

Она имеет очень сладкий способ на массивы .найти. Поэтому вы можете найти такой элемент:

array.find( {id: 75} );

Вы можете также передать объект с несколькими свойствами для того, чтобы добавить еще один "предложениях Where и".

Обратите внимание, что Sugarjs расширяет собственные объекты, и некоторые люди считают это очень зло...

Комментарии (3)

Пока браузер поддерживает ЕСМА-262, 5-е издание (декабрь 2009 г.), Это должно работать, практически один-лайнер:

var bFound = myArray.some(function (obj) {
    return obj.id === 45;
});
Комментарии (1)

Вы можете сделать это даже на чистом JavaScript, с помощью встроенного на "фильтр" и функции для массивов:

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

Так что теперь просто перейдет на "ИД" в место ключ и "45" в место значение, и вы получите полное соответствие объекта идентификационный номер 45. Так что будет,

myArr.filterObjects("id", "45");
Комментарии (1)