javascript - parsejson - Obtiene el objeto JSON específico por ID de la matriz JSON en AngularJS

recorrer json javascript

Question

Tengo un archivo JSON que contiene algunos datos a los que me gustaría acceder en mi sitio web AngularJS. Ahora lo que quiero es obtener solo un objeto de la matriz. Así que me gustaría, por ejemplo, Artículo con id 1.

Los datos se ven así:

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

Me gustaría cargar los datos con la funcionalidad AngularJS $ http de esta manera:

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

lo cual está funcionando Pero, ¿cómo puedo obtener ahora un objeto de datos específico (por id) de la matriz que obtengo de $http.get ?

Gracias de antemano por tu ayuda.

Greets Marc

Answer 1

¿Por qué complicar la situación? esto es simple escribir alguna función como esta:

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

Caso de uso:

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

salida:

Result is Bərdə filialı

Answer 2

Desafortunadamente (a menos que esté equivocado), creo que necesita iterar sobre el objeto de resultados.

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

Al menos de esta manera se saldrá de la iteración tan pronto como encuentre la id coincidente correcta.

Answer 3

La única forma de hacerlo es iterar sobre la matriz. Obviamente, si está seguro de que los resultados están ordenados por id, puede hacer una búsqueda binaria

Answer 4

La forma simple de obtener (un) elemento de la matriz por ID:

El método find () devuelve el valor del primer elemento en la matriz que satisface la función de prueba proporcionada. De lo contrario, se devuelve indefinido.

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

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

no necesita usar filter () y capturar el primer elemento xx.filter () [0] como en los comentarios anteriores

Lo mismo para objetos en matriz

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

Por supuesto, si tiene múltiples identificaciones, utilice el método filter () para obtener todos los objetos. Aclamaciones

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

Answer 5

Para cualquiera que mire esta publicación anterior, esta es la forma más fácil de hacerlo actualmente. Solo requiere un $filter AngularJS $filter . Es como la respuesta de Willemoes, pero más corta y más fácil de entender.

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

ADVERTENCIA

Como @mpgn dice, esto no funciona correctamente . Esto atrapará más resultados. Ejemplo: cuando buscas 3 esto también atrapará a 23

Answer 6

Puede simplemente recorrer su matriz:

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

Si no desea escribir estos bucles desordenados, puede considerar usar underscore.js o Lo-Dash (ejemplo en el último):

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

Answer 7

Puedes usar ng-repeat y recoger datos solo si los datos coinciden con lo que estás buscando usando ng-show por ejemplo:

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

Answer 8

Sé que ya es demasiado tarde para responder, pero siempre es mejor aparecer en lugar de no aparecer en absoluto :). ES6 forma de obtenerlo:

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

Answer 9

Si desea la lista de elementos como ciudad sobre la base de la identificación del estado, utilice

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

Answer 10

Si puede, diseñe su estructura de datos JSON haciendo uso de los índices de matriz como ID. Incluso puede "normalizar" sus matrices JSON siempre que no tenga problemas haciendo uso de los índices de matriz como "clave principal" y "clave externa", algo así como RDBMS. Como tal, en el futuro, incluso puedes hacer algo como esto:

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

Esta es la solución "Por diseño" . Para su caso, simplemente:

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

Por supuesto, si su formato de identificación es algo así como "XX-0001" cuyo índice de matriz es 0 , entonces puede hacer alguna manipulación de cadena para mapear la ID; o de lo contrario no se puede hacer nada al respecto, excepto a través del enfoque de iteración.

Answer 11

Solo quiero agregar algo a la respuesta de Willemoes . El mismo código escrito directamente dentro del HTML se verá así:

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

Suponiendo que "resultados" es una variable de su FooController y desea mostrar la propiedad "nombre" del elemento filtrado.

Answer 12

personalmente uso guiones bajos para este tipo de cosas ...

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

entonces "a" sería la fila que quería de su matriz donde el ID era igual a 2

Answer 13

use $ timeout y ejecute una función para buscar en la matriz de "resultados"

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

    });

Answer 14

Usando la solución ES6

Para aquellos que siguen leyendo esta respuesta, si está utilizando ES6, el método de find se agregó en las matrices. Asumiendo la misma colección, la solución sería:

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

Definitivamente iría por esta solución ahora, ya que está menos ligada a angular o cualquier otro marco. Pure Javascript.

Solución angular (solución antigua)

Apunté a resolver este problema haciendo lo siguiente:

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

Un ejemplo de caso de uso:

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

Answer 15

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

    });
});

No estoy seguro si es realmente bueno, pero esto fue útil para mí ... Necesitaba usar $ scope para que funcione correctamente.

Answer 16

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

salida: Azərbaycan