Spezifisches JSON-Objekt nach ID aus JSON-Array in AngularJS erhalten


95

Ich habe eine JSON-Datei mit einigen Daten, auf die ich gerne auf meiner AngularJS-Website zugreifen möchte. Jetzt möchte ich nur ein Objekt aus dem Array holen. So d ich zum Beispiel Artikel gerne mit ID 1.

Die Daten sieht wie folgt aus:

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

Ich würde gerne die Daten laden mit AngularJS $ http Funktionalität wie folgt aus:

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

was funktioniert. Aber wie bekomme ich jetzt ein spezifisches Datenobjekt (nach ID) aus dem Array, das ich von $http.get bekomme?

Vielen Dank im Voraus für Ihre Hilfe.

Greets Marc

  0

Haben Sie es selbst gehen gegeben? Wenn ja, können wir sehen, was Sie daraus gemacht haben? 25 okt. 132013-10-25 12:38:53

+1

Nun, ich habe keine Ahnung, welcher Weg mit AngularJS am besten wäre. Was ich nicht mag, ist über das Array zu iterieren und ein Gleichheitszeichen auf der ID zu tun. Vielleicht gibt es einen besseren Weg? 25 okt. 132013-10-25 12:40:22

  0

Sie sollten sich für solche Verarbeitung auf Unterstriche oder ähnliche Bibliotheken verlassen. AngularJS ist ein MVVM-Framework und hat möglicherweise keine API. 25 okt. 132013-10-25 12:46:52

  0

@marcbaur - Sie müssen das Array iterieren. Selbst wenn Sie Unterstriche oder etwas Ähnliches verwenden, werden die Funktionen hinter den Kulissen nur iteriert. 25 okt. 132013-10-25 13:00:06

  0

Bitte fügen Sie Winkelcode für diese 15 jul. 152015-07-15 15:21:26

  0

sieht aus wie es ist Zeit, die gewählte Antwort zu ändern. 23 sep. 152015-09-23 21:01:43

2

Die einzige Möglichkeit, dies zu tun, besteht darin, über das Array zu iterieren. Natürlich, wenn Sie sicher sind, dass die Ergebnisse von id bestellt werden, können Sie eine binary search

+44

... Ich hoffe wirklich, nach dem Lesen dieser Antwort Leute denken nicht, dass es eine gute Idee ist, ein Array zu sortieren, dann eine binäre Suche. Binäre Suche ist * clever *, sicher, aber * nur * wenn das Array bereits sortiert ist, und in Wirklichkeit ist: 1. einfach zu schlecht zu implementieren, 2. schwerer zu lesen, wenn schlecht implementiert. 25 okt. 132013-10-25 14:51:41

+4

Ich würde sehr schätzen, wenn die Downvoters ihre Entscheidung motivieren könnte. 13 jan. 152015-01-13 13:02:45

+5

Bitte geben Sie einen Winkelcode für dieses 15 jul. 152015-07-15 15:21:51

  0

ein. Standardmäßig hat der Array-Typ die Methode find(). Die Methode find() gibt den Wert des ersten Elements im Array zurück, das die angegebene Testfunktion erfüllt. 20 jul. 172017-07-20 13:12:29


7

Leider (es sei denn, ich irre), ich glaube, Sie müssen das Objekt die Ergebnisse iterieren.

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

Wenigstens auf diese Weise es so schnell aus der Iteration bricht, wie es findet die richtige Matching-ID.

  0

Es ist keine gute Methode, 'for..in' über Arrays zu verwenden. 25 okt. 132013-10-25 13:11:13

  0

Warum? Hast du etwas, um das zu untermauern? 25 okt. 132013-10-25 14:27:23

+9

Nun, weißt du was ..?Ich ging gerade los, um Javascript noch einmal zu lesen - die guten Teile, um Ihrem Argument entgegenzuwirken, und ich bin falsch! Für die ganze Zeit habe ich es falsch gemacht! Es hat mir allerdings keine Probleme bereitet ... bis jetzt. Ich habe meine Antwort aktualisiert. 25 okt. 132013-10-25 14:34:39


9

Sie können nur eine Schleife über das Array:

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

Wenn Sie diese unordentlich Schleifen nicht schreiben wollen, können Sie mit underscore.js oder Lo-Dash (zB im letzteren) betrachten:

var doc_id_2 = _.filter(doc.results, {id: 2})[0] 

25

tun persönlich verwende ich für diese Art von Sachen unterstreichen ... so

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

dann „a“ wäre die Folge, dass Sie wollten von Ihrem Array, wo die ID war gleich 2

+1

I ** wirklich lieben ** Unterstrich, aber, _does schlimmer mit einer anderen JavaScript-Bibliothek? _ 26 jul. 142014-07-26 03:09:10

+8

Beachten Sie, dass 'find' möglicherweise mehrere Objekte zurückgeben kann. Da wir nur einen wollen, können wir 'findWhere' verwenden, das nur das erste Vorkommen zurückgibt (von dem wir wissen, dass es das einzige Vorkommen ist), z. 'a = _.findWhere (Ergebnisse, {id: 2})'. 18 sep. 142014-09-18 16:47:53


2

Wenn Sie können, entwerfen Sie Ihre JSON-Datenstruktur, indem Sie die Array-Indizes als IDs verwenden. Sie können Ihre JSON-Arrays sogar "normalisieren", solange Sie keine Probleme haben, die Array-Indizes als "Primärschlüssel" und "Fremdschlüssel" zu verwenden, etwa RDBMS. Als solche in Zukunft können Sie sogar so etwas wie dies tun:

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

Dies ist die Lösung „By Design“. Für Ihren Fall einfach:

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

Natürlich, wenn Sie Ihr ID-Format ist so etwas wie "XX-0001" von denen sein Array-Index ist , dann können Sie entweder eine String-Manipulation tun zur Karte die ID; Ansonsten kann nichts unternommen werden, außer durch den Iterationsansatz.


12

können Sie ng-repeat verwenden und Daten holen nur dann, wenn Daten übereinstimmt, was Sie für die Verwendung von ng-show zum Beispiel suchen:

<div ng-repeat="data in res.results" ng-show="data.id==1"> 
    {{data.name}} 
</div>  
+2

Wenn Ihr Array mehr als eine triviale Anzahl von Elementen enthält, werden viele unnötige Bereiche erstellt, die Ihre Anwendung verlangsamen können. 02 sep. 152015-09-02 18:37:36

  0

niedrige Leistung 09 apr. 162016-04-09 01:08:03


221

Mit ES6 Lösung

Für diejenigen, die noch diese Antwort zu lesen, wenn Wenn Sie ES6 verwenden, wurde die find-Methode in Arrays hinzugefügt. Also die gleiche Sammlung unter der Annahme, sein die solution'd:

const foo = { "results": [ 
    { 
     "id": 12, 
     "name": "Test" 
    }, 
    { 
     "id": 2, 
     "name": "Beispiel" 
    }, 
    { 
     "id": 3, 
     "name": "Sample" 
    } 
] }; 
foo.results.find(item => item.id === 2) 

ich total für diese Lösung jetzt gehen würde, da weniger eckig oder einem anderen Rahmen gebunden ist. Reines Javascript.

Angular-Lösung (alte Lösung)

ich, indem Sie folgende dieses Problem lösen soll:

$filter('filter')(foo.results, {id: 1})[0]; 

Ein Anwendungsfall Beispiel:

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

+1

Eigentlich würde ich denken, dass es tut! Nach dem Abrufen des Arrays können Sie die Funktion $ filter verwenden, um das Element mit der richtigen ID herauszufiltern. 24 jun. 142014-06-24 19:39:18

+10

Dies sollte die akzeptierte Antwort sein. Ich hatte die gleiche Frage in meinem Kopf und diese Antwort ist die einzige, die vorhandene AngularJS verwendet und das Rad nicht neu erfindet. Und ja, es funktioniert. 03 jul. 142014-07-03 14:17:42

+4

+1 für das ist die akzeptierte Antwort. Beste Lösung mit eckigen Bibliotheken. 07 okt. 142014-10-07 10:08:14

  0

Ein verwandtes Thema, das ich nützlich fand, um den Filter in einem Ausdruck auszuführen: http://stackoverflow.com/questions/17793751/how-to-filter-by-object-property-in-angularjs 05 jun. 152015-06-05 08:22:03

+1

Plunker mit Filter in einem Ausdruck: http://plnkr.co/edit/yc0uZejGqWTcUVKvI7Tq?p=preview 05 jun. 152015-06-05 08:28:55

+3

Beachten Sie, dass Filter standardmäßig subsrings nach Groß- und Kleinschreibung suchen. Also (foo.results, {id: 2}) gibt [{id: 12}, {id: 2}], {id: 222}] zurück, aber (foo.results, function (d) {return d.id == = 2;}) returns [{id: 2}] 26 jul. 152015-07-26 04:31:54

  0

Sollte einfach so etwas tun: var object_by_id = $ filter ('filter') (foo.results, {id: 2}) [0]; - Siehe meine Antwort unten. 31 jul. 152015-07-31 19:18:31

  0

Wie performant ist Winkelfilter im Vergleich zu Unterstrich-Lösungen 11 nov. 152015-11-11 10:10:43

  0

Was ist mit Filterung mit zwei 'ID's? Ich meine, die zweite ID stammt von verschachtelten Daten des JSON. 06 jun. 162016-06-06 05:41:27

  0

was ist die Laufzeit davon? 28 mär. 172017-03-28 03:20:03


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

    }); 
}); 

Nicht sicher, ob es wirklich gut ist, aber das war hilfreich für mich .. Ich musste $ Scope verwenden, damit es richtig funktioniert.


16

Ich möchte nur etwas zu Willemoes answer hinzufügen. Der gleiche Code direkt im HTML geschrieben wird wie folgt aussehen:

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

Unter der Annahme, dass „Ergebnisse“ eine Variable Ihres FooController ist und Sie die Eigenschaft „Namen“ des gefilterten Eintrags anzuzeigen.

  0

@ Ena-Wie das Ergebnis des Filters überprüfen ist nicht null oder undefiniert? 09 feb. 162016-02-09 08:49:57

  0

Ich habe diese HTML-Variante verwendet, weil ich sicher war, dass ein Ergebnis existiert. Ich habe versucht und wenn es kein Ergebnis gibt, gibt die Konsole keinen Fehler, es lässt den Text einfach leer. Wenn Sie etwas Logik brauchen, wenn kein Ergebnis gefunden wird, dann denke ich, der beste Weg zu gehen ist Willemoes Antwort (js Code innerhalb des Controllers). In diesem Beispiel sollten Sie dann HTML einchecken, wenn die Variable single_object null oder nicht definiert ist. 09 feb. 162016-02-09 09:19:28

  0

okay. Danke Ena. 09 feb. 162016-02-09 09:30:03

+2

{{(FooController.results | filter: {id: 1}) [0] .name}: true} - wenn jemand nach einer genauen Übereinstimmung sucht 25 apr. 162016-04-25 14:19:51


26

Für jeden, der sich diesen alten Beitrag ansieht, ist dies derzeit der einfachste Weg. Es erfordert nur ein AngularJS $filter. Es ist wie Willemoes, aber kürzer und leichter zu verstehen.

{ 
    "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" } 

WARNUNG

Wie @mpgn sagt, diese funktioniert nicht richtig. Dies wird mehr Ergebnisse erzielen.Beispiel:, wenn Sie 3 suchen diese 23 zu

+1

auch fangen ID: 24 12 222 2002 usw. 22 sep. 162016-09-22 17:33:22

  0

Ich würde denken, dass die ' [0] 'würde dazu führen, dass es das erste gefundene Ergebnis aus der Sammlung zurückgibt. Es würde also nur funktionieren, wenn Ihre Sammlung sortiert ist und das Objekt, nach dem Sie suchen, das erste ist, das es während seiner Iteration findet. Z.B. Wenn es eine ID gibt: 12, die vor ID: 2 kommt, würde es ID: 12 zurückgeben. 08 nov. 172017-11-08 18:22:26


8

fangen Wenn Sie die Liste der Elemente wie Stadt auf der Grundlage Zustand id dann

verwenden möchten
var state_Id = 5; 
var items = ($filter('filter')(citylist, {stateId: state_Id })); 

0

Verwendung $ timeout und Lauf eine Funktion zum Suchen im Array "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); 

    }); 

3

Warum die Situation komplizieren? dies ist einfach eine Funktion wie folgt schreiben:

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

Use Case:

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

Ausgang:

Result is Bərdə filialı 

3
$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> 

Ausgang: Azərbaycan


2

Ich weiß, ich bin zu spät zu antworten, aber es ist immer besser zu s wie oben, anstatt überhaupt nicht aufzutauchen :). ES6 Weise, sie zu erhalten:

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

0

Die einfache Art und Weise (ein) Element von ID von dem Array zu erhalten:

Die find() Methode gibt den Wert des ersten Elements in der Anordnung, die die bereitgestellte erfüllt Testfunktion. Andernfalls wird undefined zurückgegeben.

function isBigEnough(element) { 
    return element >= 15; 
} 

var integers = [12, 5, 8, 130, 160, 44]; 
integers.find(isBigEnough); // 130 only one element - first 

Sie nicht brauchen, Filter zu verwenden() und das erste Element xx.filter fangen() [0] wie in den Kommentaren über

Das gleiche gilt für Objekte in Array

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

Wenn Sie mehrere IDs haben, verwenden Sie die filter() -Methode, um alle Objekte zu erhalten. Prost

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