webentwicklung-frage-antwort-db.com.de

Ruft ein bestimmtes Objekt anhand der ID aus einem Array von Objekten in AngularJS ab

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

Die Daten sehen folgendermaßen aus:

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

Ich möchte die Daten mit folgender AngularJS $ http-Funktionalität laden:

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

was funktioniert. Aber wie kann ich jetzt ein bestimmtes Datenobjekt (nach ID) aus dem Array abrufen, das ich aus $http.get Erhalte?

Vielen Dank im Voraus für Ihre Hilfe.

Grüße Marc

javascriptarraysangularjsjsonobject
109
mooonli

Die einzige Möglichkeit, dies zu tun, besteht darin, über das Array zu iterieren. Wenn Sie sicher sind, dass die Ergebnisse nach ID sortiert sind, können Sie natürlich eine binäre Suche ausführen

4
Antonio E.

Verwenden der ES6-Lösung

Wenn Sie diese Antwort noch lesen und ES6 verwenden, wurde die find -Methode in Arrays hinzugefügt. Unter der Annahme der gleichen Sammlung wäre die Lösung:

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

Ich würde mich jetzt für diese Lösung entscheiden, da sie weniger an angular oder ein anderes Framework gebunden ist. Reines Javascript.

Winkellösung (alte Lösung)

Ich wollte dieses Problem folgendermaßen lösen:

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

Ein Anwendungsfallbeispiel:

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

239
Willemoes

Für alle, die sich diesen alten Beitrag ansehen, ist dies derzeit der einfachste Weg, dies zu tun. Es benötigt nur einen AngularJS $filter. Es ist wie Willemoes Antwort, 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, ist dies funktioniert nicht richtig. Dies wird mehr Ergebnisse erzielen. Beispiel: Wenn Sie 3 suchen, fängt dies auch 23

26
Tillman32

ich persönlich benutze Unterstrich für diese Art von Sachen ... also

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

dann wäre "a" die Zeile, die Sie von Ihrem Array wollten, wobei die ID gleich 2 war

25
Jason Boerner

Ich möchte nur etwas hinzufügen zu Willemoes Antwort . Derselbe Code, der direkt in HTML geschrieben wurde, sieht folgendermaßen aus:

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

Angenommen, "results" ist eine Variable Ihres FooControllers und Sie möchten die Eigenschaft "name" des gefilterten Elements anzeigen.

16
Ena

Sie können ng-repeat und wähle nur Daten aus, die mit den von dir gesuchten Daten übereinstimmen. ng-show beispielsweise:

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

Sie können Ihr Array einfach durchlaufen:

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 unordentlichen Schleifen nicht schreiben möchten, können Sie nderscore.js oder Lo-Dash verwenden (Beispiel in letzterem):

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

Wenn Sie die Liste der Elemente wie Stadt auf der Grundlage der Status-ID möchten, verwenden Sie

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

Leider (es sei denn, ich täusche mich), denke ich, dass Sie über das Ergebnisobjekt iterieren müssen.

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

Zumindest auf diese Weise wird die Iteration abgebrochen, sobald die richtige übereinstimmende ID gefunden wurde.

7
simonlchilds

Warum die Situation komplizieren? Dies ist einfach, schreiben Sie eine Funktion wie diese:

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

Anwendungsfall:

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

ausgabe:

Result is Bərdə filialı
6
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>

ausgabe: Azərbaycan

4
Celal Muhtar

Ich weiß, ich bin zu spät, um zu antworten, aber es ist immer besser, zu erscheinen, als überhaupt nicht zu erscheinen :). ES6 Weg, um es zu bekommen:

$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

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 problemlos die Array-Indizes als "Primärschlüssel" und "Fremdschlüssel" verwenden, etwa RDBMS. Als solches können Sie in Zukunft sogar Folgendes 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;

Wenn Ihr ID-Format etwa "XX-0001" lautet, dessen Array-Index lautet, können Sie entweder eine Zeichenfolgenmanipulation durchführen, um die ID zuzuordnen; oder es kann nichts dagegen unternommen werden, außer durch den Iterationsansatz.

2
Antonio Ooi

Der einfache Weg, um (ein) Element aus einem Array über die ID zu erhalten:

Die find () -Methode gibt den Wert des ersten Elements im Array zurück, das die angegebene Testfunktion erfüllt. 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 müssen nicht filter () verwenden und das erste Element xx.filter () [0] wie in den obigen Kommentaren abfangen

Dasselbe gilt für Objekte im 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 natürlich die filter () -Methode, um alle Objekte abzurufen. 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);
1
abosancic

Ich würde das Ergebnis-Array mit einem anglejs-Filter wie folgt durchlaufen:

var foundResultObject = getObjectFromResultsList (Ergebnisse, 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;
        }
        }

    });
});

Ich bin mir nicht sicher, ob es wirklich gut ist, aber das war hilfreich für mich. Ich musste $ scope verwenden, damit es richtig funktioniert.

0
Jordy

verwenden Sie $ timeout und führen Sie eine Funktion aus, um im Array "results" zu suchen

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