Получить конкретный объект 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 ?



заранее спасибо за вашу помощь.



здоровается
Марк

797   17  

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

Plunker:http://plnkr.co/edit/5E7FYqNNqDuqFBlyDqRh?p=preview

для тех, кто смотрит на этот старый пост, это самый простой способ сделать это в настоящее время. Для этого требуется только 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 - first

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

    Ничего не найдено.