web-dev-qa-db-ja.com

AngularJSのオブジェクトの配列からIDで特定のオブジェクトを取得する

AngularJS Webサイトでアクセスしたいデータを含むJSONファイルがあります。今私が欲しいのは配列から一つのオブジェクトだけを取得することです。だから私は例えばID 1のアイテムが欲しいのですが。

データは次のようになります。

{ "results": [
    {
        "id": 1,
        "name": "Test"
    },
    {
        "id": 2,
        "name": "Beispiel"
    },
    {
        "id": 3,
        "name": "Sample"
    }
] }

私はこのようなAngularJS $ http機能でデータをロードしたいです：

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

それは働いています。しかし、$http.getから取得した配列から特定のデータオブジェクトを（idで）取得するにはどうすればよいでしょうか。

ご協力ありがとうございます。

ご挨拶マーク

javascriptarraysangularjsjsonobject
109
mooonli

これを行う唯一の方法は、配列を反復処理することです。結果がid順になっていることが確実な場合は、 バイナリ検索を実行できます

4
Antonio E.

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

239
Willemoes

この古い記事を見ている人にとっては、これが現在最も簡単な方法です。 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をキャッチします

26
Tillman32

個人的に私はこの種のものにアンダースコアを使用しています...だから

a = _.find(results,function(rw){ return rw.id == 2 });

それから、 "a"はあなたの配列に必要な行で、idは2です。

25
Jason Boerner

Willemoesの回答 に何か追加したいだけです。 HTML内に直接記述された同じコードは、次のようになります。

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

"results"があなたのFooControllerの変数であり、あなたがフィルタリングされたアイテムの "name"プロパティを表示したいと仮定します。

16
Ena

ng-repeatを使用して、データがng-showを使用して探しているものと一致する場合にのみデータを選択できます。

 <div ng-repeat="data in res.results" ng-show="data.id==1">
     {{data.name}}
 </div>
12
James Kuta Simiyu

配列をループするだけでいいのです。

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]
9
kamituel

あなたが状態IDに基づいて市のような項目のリストが欲しいならば、それから使用してください

var state_Id = 5;
var items = ($filter('filter')(citylist, {stateId: state_Id }));
8
Ali Adravi

残念ながら（私が間違えない限り）、結果オブジェクトを反復処理する必要があると思います。

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

少なくともこの方法では、正しい一致IDが見つかるとすぐに反復が中断されます。

7
simonlchilds

なぜ状況が複雑になるのでしょうか。これは簡単です。

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ı
5
Musa
$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

4
Celal Muhtar

私は答えるには遅すぎるということを知っていますが、まったく現れないよりは現れることの方が常によいです:)。それを得るための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
});
2
Hitesh Kumar

可能であれば、配列インデックスをIDとして使用してJSONデータ構造を設計します。 RDBMSのように、配列インデックスを「主キー」および「外部キー」として使用して問題がなければ、JSON配列を「正規化」することもできます。そのため、将来的には、次のようなこともできます。

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

これが解決策です「設計による」。あなたの場合は、単に：

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

もちろん、あなたのIDフォーマットが "XX-0001"のようなものであれば、その配列インデックスはでは、IDをマッピングするために文字列操作を行うことができます。それ以外の場合は、反復アプローチ以外では何もできません。

2
Antonio Ooi

Idによって配列から（1）要素を取得する簡単な方法：

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

私は、次のようにangularjsフィルタを使ってresults配列を反復処理します。

var foundResultObject = getObjectFromResultsList（results、1）;

function getObjectFromResultsList(results, resultIdToRetrieve) {
        return $filter('filter')(results, { id: resultIdToRetrieve }, true)[0];
    }
0
abovetempo
    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を使う必要がありました。

0
Jordy

$ timeoutを使って "results"配列を検索する関数を実行する

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

    });
0
Moein Fazeli