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

moo*_*nli 109 javascript arrays json object angularjs

我有一个JSON文件,其中包含我想在AngularJS网站上访问的一些数据.现在我想要的是从数组中只获取一个对象.所以我想要例如ID为1的Item.

数据如下所示:

{ "results": [
    {
        "id": 1,
        "name": "Test"
    },
    {
        "id": 2,
        "name": "Beispiel"
    },
    {
        "id": 3,
        "name": "Sample"
    }
] }
Run Code Online (Sandbox Code Playgroud)

我想用AngularJS $ http功能加载数据,如下所示:

$http.get("data/SampleData.json");

这是有效的.但是,我现在如何从我得到的数组中获取特定的数据对象(通过id)$http.get

在此先感谢您的帮助.

迎接马克

Wil*_*oes 240

使用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)
Run Code Online (Sandbox Code Playgroud)

我现在完全采用这种解决方案,因为它与角度或任何其他框架无关.纯Javascript.

角度解决方案(旧解决方案)

我的目标是通过执行以下操作来解决此问题:

$filter('filter')(foo.results, {id: 1})[0];
Run Code Online (Sandbox Code Playgroud)

一个用例示例:

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);
}]);
Run Code Online (Sandbox Code Playgroud)

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

  • 这应该是公认的答案.我脑子里有同样的问题,这个答案是唯一一个使用现有AngularJS并且不再重新发明轮子的人.是的,它正在发挥作用. (10认同)
  • +1这是接受的答案.使用角度库的最佳解决方案 (4认同)
  • 请注意,默认情况下,过滤器通过不区分大小写的子字符串查找.所以(foo.results,{id:2})返回[{id:12},{id:2}],{id:222}]但是(foo.results,function(d){return d.id == = 2;})返回[{id:2}] (4认同)

小智 26

对于任何看过这篇旧帖子的人来说,这是目前最简单的方法.它只需要一个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" }
Run Code Online (Sandbox Code Playgroud)

警告

正如@mpgn所说,这不能正常工作.这将获得更多结果.示例: 当您搜索3时,这也将捕获23


小智 25

我个人用下划线来表达这种东西......所以

a = _.find(results,function(rw){ return rw.id == 2 });
Run Code Online (Sandbox Code Playgroud)

然后"a"将是你想要的数组的行,其中id等于2

  • 请注意,`find`可能会返回多个对象.因为我们只需要一个,所以我们可以使用`findWhere`,它只返回第一个匹配项(我们知道它是唯一的匹配项),例如`a = _.findWhere(results,{id:2})`. (8认同)

Ena*_*Ena 16

我只是想对Willemoes的回答添加一些东西.直接在HTML中编写的相同代码如下所示:

{{(FooController.results | filter : {id: 1})[0].name }}
Run Code Online (Sandbox Code Playgroud)

假设"results"是您的FooController的变量,并且您希望显示已过滤项的"name"属性.

  • {{(FooController.results | filter:{id:1})[0] .name}:true} - 如果有人正在寻找完全匹配 (2认同)

小智 12

ng-repeat仅当数据与您要查找的内容匹配时,才可以使用和选择数据ng-show ,例如:

 <div ng-repeat="data in res.results" ng-show="data.id==1">
     {{data.name}}
 </div>    
Run Code Online (Sandbox Code Playgroud)

  • 如果您的数组包含的项目数量超过了一定数量,则会产生许多不必要的范围,这可能会降低您的应用程序速度. (2认同)

kam*_*uel 9

你可以循环遍历你的数组:

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);
Run Code Online (Sandbox Code Playgroud)

如果你不想编写这个凌乱的循环,你可以考虑使用underscore.jsLo-Dash(后者的例子):

var doc_id_2 = _.filter(doc.results, {id: 2})[0]
Run Code Online (Sandbox Code Playgroud)


Ali*_*avi 8

如果你想要基于状态id的城市项目列表然后使用

var state_Id = 5;
var items = ($filter('filter')(citylist, {stateId: state_Id }));
Run Code Online (Sandbox Code Playgroud)


sim*_*lds 7

不幸的是(除非我弄错了),我认为你需要迭代结果对象.

for(var i = 0; i < results.length; i += 1){
    var result = results[i];
    if(result.id === id){
        return result;
    }
}
Run Code Online (Sandbox Code Playgroud)

至少这样一旦找到正确的匹配id,它就会突破迭代.

  • 嗯,你知道吗......?我刚刚开始重新阅读Javascript - 反对你的论点的好部分,我错了!一直以来我都做错了!虽然......但它并没有给我带来任何问题.我已经更新了我的答案. (11认同)

Mus*_*usa 6

为什么情况复杂化?这很简单,写一些这样的函数:

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 '';
}
Run Code Online (Sandbox Code Playgroud)

使用案例:

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'));
Run Code Online (Sandbox Code Playgroud)

输出:

Result is B?rd? filial?
Run Code Online (Sandbox Code Playgroud)


Ant*_* E. 5

唯一的方法就是遍历数组。显然,如果您确定结果按ID排序,则可以执行二进制搜索

  • ...我真的希望阅读此答案后,人们认为对数组进行排序然后进行二进制搜索不是一个好主意。当然,二进制搜索是“聪明的”,但只有在数组已经排序的情况下才“ *”,实际上是:1.易于实施不便,2.实施不易则难于阅读。 (46认同)
  • 如果下降者能激励他们的决定,我将不胜感激。 (4认同)
  • 默认情况下,javascript 数组类型具有 find() 方法。find() 方法返回数组中满足提供的测试函数的第一个元素的值。 (2认同)