Получить конкретный объект JSON по идентификатору из массива JSON в AngularJS
у меня есть файл JSON, содержащий некоторые данные, которые я хотел бы получить доступ на моем веб-сайте AngularJS. Теперь я хочу получить только один объект из массива. Так что я бы, например, элемент с id 1.
данные выглядят так:
{ "results": [
{
"id": 1,
"name": "Test"
},
{
"id": 2,
"name": "Beispiel"
},
{
"id": 3,
"name": "Sample"
}
] }
Я хотел бы загрузить данные с помощью функции AngularJS $http следующим образом:
$http.get("data/SampleData.json");
который работает. Но как я могу теперь получить конкретный объект данных (по id) из массива, который я получаю от $http.get ?
заранее спасибо за вашу помощь.
здоровается
Марк
17 ответов:
единственный способ сделать это-перебирать массив. Очевидно, если вы уверены, что результаты упорядочены по id, вы можете сделать бинарный поиск
С помощью решения ES6
для тех, кто все еще читает этот ответ, если вы используете ES6
findметод был добавлен в массивах. Поэтому, предполагая ту же коллекцию, решение будет:const foo = { "results": [ { "id": 12, "name": "Test" }, { "id": 2, "name": "Beispiel" }, { "id": 3, "name": "Sample" } ] }; foo.results.find(item => item.id === 2)Я бы полностью пошел на это решение сейчас, так как меньше привязан к угловым или любым другим рамкам. Чистый Javascript.
угловое решение (старое решение)
Я стремился решить эту проблему, выполнив следующее:
$filter('filter')(foo.results, {id: 1})[0];пример использования:
app.controller('FooCtrl', ['$filter', function($filter) { var foo = { "results": [ { "id": 12, "name": "Test" }, { "id": 2, "name": "Beispiel" }, { "id": 3, "name": "Sample" } ] }; // We filter the array by id, the result is an array // so we select the element 0 single_object = $filter('filter')(foo.results, function (d) {return d.id === 2;})[0]; // If you want to see the result, just check the log console.log(single_object); }]);
для тех, кто смотрит на этот старый пост, это самый простой способ сделать это в настоящее время. Для этого требуется только AngularJS
$filter. Это похоже на ответ Виллемоса, но короче и легче понять.{ "results": [ { "id": 1, "name": "Test" }, { "id": 2, "name": "Beispiel" }, { "id": 3, "name": "Sample" } ] } var object_by_id = $filter('filter')(foo.results, {id: 2 })[0]; // Returns { id: 2, name: "Beispiel" }
предупреждение
Как говорит @mpgn, это не работает. Это позволит поймать больше результатов. пример:при поиске 3 это будет ловить 23 тоже
лично я использую подчеркивание для такого рода вещей... так что
a = _.find(results,function(rw){ return rw.id == 2 });тогда" a " будет строкой, которую вы хотели из вашего массива, где идентификатор был равен 2
Я просто хочу добавить что-то willemoes не ответ. Тот же код, написанный непосредственно внутри HTML будет выглядеть так:
{{(FooController.results | filter : {id: 1})[0].name }}предполагая, что" результаты "является переменной вашего FooController, и вы хотите отобразить свойство" name " отфильтрованного элемента.
можно использовать
ng-repeatи выберите данные, только если данные соответствуют тому, что вы ищете с помощьюng-showнапример:<div ng-repeat="data in res.results" ng-show="data.id==1"> {{data.name}} </div>
Вы можете просто перебрать массив:
var doc = { /* your json */ }; function getById(arr, id) { for (var d = 0, len = arr.length; d < len; d += 1) { if (arr[d].id === id) { return arr[d]; } } } var doc_id_2 = getById(doc.results, 2);Если вы не хотите писать эти грязные петли, вы можете рассмотреть возможность использования подчеркивания.js или Lo-Dash (пример в последнем):
var doc_id_2 = _.filter(doc.results, {id: 2})[0]
Если вы хотите список элементов, таких как город на основе государственного идентификатора, то используйте
var state_Id = 5; var items = ($filter('filter')(citylist, {stateId: state_Id }));
к сожалению (если я не ошибаюсь), Я думаю, что вам нужно перебирать объект результатов.
for(var i = 0; i < results.length; i += 1){ var result = results[i]; if(result.id === id){ return result; } }по крайней мере, таким образом он выйдет из итерации, как только найдет правильный соответствующий идентификатор.
зачем усложнять ситуацию? это просто написать некоторые функции, как это:
function findBySpecField(data, reqField, value, resField) { var container = data; for (var i = 0; i < container.length; i++) { if (container[i][reqField] == value) { return(container[i][resField]); } } return ''; }Использовать Случае:
var data=[{ "id": 502100, "name": "Bərdə filialı" }, { "id": 502122 "name": "10 saylı filialı" }, { "id": 503176 "name": "5 sayli filialı" }] console.log('Result is '+findBySpecField(data,'id','502100','name'));выход:
Result is Bərdə filialı
$scope.olkes = [{'id':11, 'name':'---Zəhmət olmasa seçim edin---'}, {'id':15, 'name':'Türkyə'}, {'id':45, 'name':'Azərbaycan'}, {'id':60, 'name':'Rusya'}, {'id':64, 'name':'Gürcüstan'}, {'id':65, 'name':'Qazaxıstan'}]; <span>{{(olkes | filter: {id:45})[0].name}}</span>вывод: Azərbaycan
Если вы можете, создайте свою структуру данных JSON, используя индексы массива в качестве идентификаторов. Вы даже можете "нормализовать" свои массивы JSON, если у вас нет проблем с использованием индексов массива в качестве "первичного ключа" и "внешнего ключа", что-то вроде СУБД. Таким образом, в будущем вы даже можете сделать что-то вроде этого:
function getParentById(childID) { var parentObject = parentArray[childArray[childID].parentID]; return parentObject; }это решение "Дизайн". Для вашего случая, просто:
var nameToFind = results[idToQuery - 1].name;конечно, если ваш формат ID что-то вроде "XX-0001" из которых его индекс массива 0, то вы можете либо сделать некоторые строковые манипуляции для отображения идентификатора; или же ничего не может быть сделано об этом, кроме как через итерационный подход.
Я знаю, что я слишком поздно, чтобы ответить, но это всегда лучше, чтобы показать, а не не появляется вообще :). ES6 способ получить его:
$http.get("data/SampleData.json").then(response => { let id = 'xyz'; let item = response.data.results.find(result => result.id === id); console.log(item); //your desired item });
простой способ получить (один) элемент из массива по ID:
метод find () возвращает значение первого элемента в массиве, который удовлетворяет предоставленной функции тестирования. В противном случае возвращается значение undefined.
function isBigEnough(element) { return element >= 15; } var integers = [12, 5, 8, 130, 160, 44]; integers.find(isBigEnough); // 130 only one element - firstвам не нужно использовать filter () и поймать первый элемент xx.filter () [0], как в комментариях выше
то же самое для объектов в массиве
var foo = { "results" : [{ "id" : 1, "name" : "Test" }, { "id" : 2, "name" : "Beispiel" }, { "id" : 3, "name" : "Sample" } ]}; var secondElement = foo.results.find(function(item){ return item.id == 2; }); var json = JSON.stringify(secondElement); console.log(json);конечно, если у вас есть несколько id, то используйте метод filter (), чтобы получить все объекты. Ура
function isBigEnough(element) { return element >= 15; } var integers = [12, 5, 8, 130, 160, 44]; integers.find(isBigEnough); // 130 only one element - firstvar foo = { "results" : [{ "id" : 1, "name" : "Test" }, { "id" : 2, "name" : "Beispiel" }, { "id" : 3, "name" : "Sample" } ]}; var secondElement = foo.results.find(function(item){ return item.id == 2; }); var json = JSON.stringify(secondElement); console.log(json);
projectDetailsController.controller('ProjectDetailsCtrl', function ($scope, $routeParams, $http) { $http.get('data/projects.json').success(function(data) { $scope.projects = data; console.log(data); for(var i = 0; i < data.length; i++) { $scope.project = data[i]; if($scope.project.name === $routeParams.projectName) { console.log('project-details',$scope.project); return $scope.project; } } }); });Не уверен, если это действительно хорошо, но это было полезно для меня.. Мне нужно использовать $scope, чтобы заставить его работать правильно.
используйте $timeout и запустите функцию для поиска в массиве "результаты"
app.controller("Search", function ($scope, $timeout) { var foo = { "results": [ { "id": 12, "name": "Test" }, { "id": 2, "name": "Beispiel" }, { "id": 3, "name": "Sample" } ] }; $timeout(function () { for (var i = 0; i < foo.results.length; i++) { if (foo.results[i].id=== 2) { $scope.name = foo.results[i].name; } } }, 10); });
Я бы перебрал массив результатов, используя фильтр angularjs следующим образом:
var foundResultObject = getObjectFromResultsList(results, 1);
function getObjectFromResultsList(results, resultIdToRetrieve) { return $filter('filter')(results, { id: resultIdToRetrieve }, true)[0]; }
Comments