Jquery, как найти объект по атрибуту в массиве
Учитывая, что у меня есть массив "целевых" объектов:
//array of purpose objects:
var purposeObjects = [
{purpose: "daily"},
{purpose: "weekly"},
{purpose: "monthly"}
];
(для простоты я опускаю другие атрибуты)
Теперь я хочу иметь метод, который возвращает определенный один из объектов, если найдено подходящее имя цели.
Это не работает:
function findPurpose(purposeName){
return $.grep(purposeObjects, function(){
return this.purpose == purposeName;
});
};
findPurpose("daily");
но на самом деле он возвращает пустой массив:
[]
Я использую JQuery 1.5.2. Я также пытался с $.each(), но безуспешно. По-видимому, большинство методов JQuery предназначены для использования с элементами DOM (такими как filter(),
Есть идеи, как этого добиться?
10 ответов
Ошибка была в том, что вы не можете использовать this в grep, но вы должны использовать ссылку на элемент. Это работает:
function findPurpose(purposeName){
return $.grep(purposeObjects, function(n, i){
return n.purpose == purposeName;
});
};
findPurpose("daily");
возвращает:
[Object { purpose="daily"}]
Самый быстрый способ (и он работает даже без jQuery):
var findPurpose = function(purposeName) {
for (var i = 0, len = purposeObjects.length; i < len; i++) {
if (purposeObjects[i].purpose === purposeName)
return purposeObjects[i]; // Return as soon as the object is found
}
return null; // The object was not found
}
Заметка
jQuery $.grep (или другая функция фильтрации) не является оптимальным решением.
$.grep Функция будет перебирать все элементы массива, даже если искомый объект уже был найден во время цикла. Из документации jQuery grep:
Метод $.grep() удаляет элементы из массива по мере необходимости, чтобы все оставшиеся элементы проходили предоставленный тест. Тест - это функция, которой передается элемент массива и индекс элемента в массиве. Только если тест вернет true, элемент будет в массиве результатов.
Вы должны передать ссылку на элемент в функции grep:
function findPurpose(purposeName){
return $.grep(purposeObjects, function(item){
return item.purpose == purposeName;
});
};
Я лично использую более общую функцию, которая работает для любого свойства любого массива:
function lookup(array, prop, value) {
for (var i = 0, len = array.length; i < len; i++)
if (array[i] && array[i][prop] === value) return array[i];
}
Вы просто называете это так:
lookup(purposeObjects, "purpose", "daily");
Используйте функцию findWhere для Underscore.js ( http://underscorejs.org/):
var purposeObjects = [
{purpose: "daily"},
{purpose: "weekly"},
{purpose: "monthly"}
];
var daily = _.findWhere(purposeObjects, {purpose: 'daily'});
daily будет равно:
{"purpose":"daily"}
Вот скрипка: http://jsfiddle.net/spencerw/oqbgc21x/
Чтобы вернуть более одного (если у вас было больше в вашем массиве), вы можете использовать _.where(...)
Если ваш массив на самом деле представляет собой набор объектов JQuery, как насчет простого использования метода.filter()?
purposeObjects.filter('[purpose="daily"]')
Лучший, самый быстрый способ
function arrayLookup(array, prop, val) {
for (var i = 0, len = array.length; i < len; i++) {
if (array[i].hasOwnProperty(prop) && array[i][prop] === val) {
return array[i];
}
}
return null;
}
Еще одно решение:
function firstOrNull(array, expr) {
for (var i = 0; i < array.length; i++) {
if (expr(array[i]))
return array[i];
}
return null;
}
С помощью: firstOrNull([{ a: 1, b: 2 }, { a: 3, b: 3 }], function(item) { return item.a === 3; });
Эта функция не выполняется для каждого элемента массива (это полезно для больших массивов)
Скопировал из кода Array.prototype.find в полифилл Array.find и добавил массив в качестве первого параметра.
Вы можете передать критерий поиска в качестве предиката
// Example
var listOfObjects = [{key: "1", value: "one"}, {key: "2", value: "two"}]
var result = findInArray(listOfObjects, function(element) {
return element.key == "1";
});
console.log(result);
// the function you want
function findInArray(listOfObjects, predicate) {
if (listOfObjects == null) {
throw new TypeError('listOfObjects is null or not defined');
}
var o = Object(listOfObjects);
var len = o.length >>> 0;
if (typeof predicate !== 'function') {
throw new TypeError('predicate must be a function');
}
var thisArg = arguments[1];
var k = 0;
while (k < len) {
var kValue = o[k];
if (predicate.call(thisArg, kValue, k, o)) {
return kValue;
}
k++;
}
return undefined;
}Я создал сервис утилит для моего углового приложения. У него есть две функции, которые используют очень часто.
Например, у вас есть объект.
Сначала получить значение из объекта рекурсивно, не выдавая неопределенную ошибку.
{prop: {nestedProp1: {nestedProp2: somevalue}}}; получить nestedProp2 2 без неопределенных проверок.
Второй массив фильтров на основе
[{prop: { nestedProp1: {nestedProp2: somevalue1}}}, {prop: { nestedProp1: {nestedProp2: somevalue2}}}];
Найти объект из массива с помощью nestedProp2=somevalue2
app.service('UtilService', function(httpService) {
this.mapStringKeyVal = function(map, field) {
var lastIdentifiedVal = null;
var parentVal = map;
field.split('.').forEach(function(val){
if(parentVal[val]){
lastIdentifiedVal = parentVal[val];
parentVal = parentVal[val];
}
});
return lastIdentifiedVal;
}
this.arrayPropFilter = function(array, field,value) {
var lastIdentifiedVal = null;
var mapStringKeyVal = this.mapStringKeyVal;
array.forEach(function(arrayItem){
var valueFound = mapStringKeyVal(arrayItem,field);
if(!lastIdentifiedVal && valueFound && valueFound==value){
lastIdentifiedVal = arrayItem;
}
});
return lastIdentifiedVal;
}});
Для решения текущего вопроса. введите UtilService и позвоните,
UtilService.arrayPropFilter(purposeArray,'purpose','daily');
Или более продвинутый
UtilService.arrayPropFilter(purposeArray,'purpose.nestedProp1.nestedProp2','daily');
Javascript имеет функцию только для этого: Array.prototype.find. Как пример
function isBigEnough(element) {
return element >= 15;
}
[12, 5, 8, 130, 44].find(isBigEnough); // 130
Нетрудно расширить функцию обратного вызова для функции. Однако это не совместимо с IE (и частично с Edge). Для полного списка посмотрите на Совместимость браузера