从AngularJS中的对象数组通过ID获取特定对象

我有一个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呢？

在此先感谢您的帮助。

马克·马克

唯一的方法就是遍历数组。显然，如果您确定结果按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);
}]);

柱塞：http ://plnkr.co/edit/5E7FYqNNqDuqFBlyDqRh?p=preview

对于任何查看此旧帖子的人，这是目前最简单的方法。它只需要一个AngularJS $filter。它就像Willemoes的答案一样，但是更简短，更容易理解。

{ 
    "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的行

我只想在Willemoes答案中添加一些内容。直接在HTML内部编写的相同代码如下所示：

{{(FooController.results | filter : {id: 1})[0].name }}

假设“结果”是FooController的变量，并且您要显示已过滤项目的“名称”属性。

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]

如果您想要基于州ID的城市之类的项目列表，请使用

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

至少以这种方式，一旦找到正确的匹配ID，它将退出迭代。

为什么使情况复杂化？这很简单，编写一些类似这样的函数：

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

如果可以的话，请使用数组索引作为ID来设计JSON数据结构。您甚至可以“标准化” JSON数组，只要您可以毫无问题地将数组索引用作“主键”和“外键”（如RDBMS）即可。因此，将来您甚至可以执行以下操作：

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

这是“按设计”解决方案。对于您的情况，只需：

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

当然，如果您的ID格式类似于“ XX-0001”，其数组索引为0，那么您可以执行一些字符串操作来映射ID；否则除非通过迭代方法，否则什么也做不了。

我知道我来不及回答，但是总比不露面总要好：)。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);

当然，如果您有多个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];
    }