Отримати конкретний об'єкт за ідентифікатором з масиву об’єктів у AngularJS

У мене є файл JSON, який містить деякі дані, до яких я хочу отримати доступ на своєму веб-сайті AngularJS. Тепер я хочу отримати лише один об’єкт з масиву. Тому мені подобається, наприклад, Item with 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?

Заздалегідь дякую за вашу допомогу.

Вітає Марка

Єдиний спосіб зробити це - перебрати масив. Очевидно, якщо ви впевнені, що результати впорядковані за 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" - це рядок, який ви хотіли, для свого масиву, де id дорівнював 2

Я просто хочу додати щось до відповіді Віллемоса . Той самий код, написаний безпосередньо в 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);

Якщо ви не хочете писати цю безладну петлю, ви можете скористатися underscore.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 до тих пір, поки у вас не виникне проблем із використанням індексів масиву як «первинний ключ» та «зовнішній ключ», щось на зразок RDBMS. Таким чином, у майбутньому ви навіть можете зробити щось подібне:

function getParentById(childID) {
var parentObject = parentArray[childArray[childID].parentID];
return parentObject;
}

Це рішення "За задумом" . Для вашого випадку просто:

var nameToFind = results[idToQuery - 1].name;

Звичайно, якщо ваш ідентифікаційний формат є чимось на зразок "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 () повертає значення першого елемента в масиві, який задовольняє наданій функції тестування. Інакше невизначений повертається.

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

Звичайно, якщо у вас кілька ідентифікаторів, тоді використовуйте метод 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;
        }
        }

    });
});

Не впевнений, чи справді це добре, але це було для мене корисною. Мені потрібно було використовувати $ range, щоб він працював належним чином.

використовувати $ 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 (результати, 1);

function getObjectFromResultsList(results, resultIdToRetrieve) {
        return $filter('filter')(results, { id: resultIdToRetrieve }, true)[0];
    }