web-dev-qa-db-fra.com

Angular Rechercher la valeur dans JSON et afficher les données correspondantes

Ce que j'essaie de faire est simple. Un utilisateur saisit une valeur, en cliquant sur le bouton, mon JS appelle un service pour récupérer mes données JSON et effectuer une recherche sur la valeur entrée par rapport au JSON et si une correspondance est trouvée, afficher le `` Propriétaire ''.

HTML: 

<div ng-app="myApp">
    <div ng-controller="MainCtrl">
        <input type="text" ng-model="enteredValue">
        </br>
        <button type="button" ng-Click="findValue(enteredValue)">Search</button>
    </div>
</div>

JS: 

angular.module('myApp', []).controller('MainCtrl', function ($scope, $http, getDataService) {   

    $scope.findValue = function(enteredValue) {     
        alert("Searching for = " + enteredValue);

        $scope.MyData = [];

        getDataService.getData(function(data) {

            $scope.MyData = data.SerialNumbers;

        });
    }

});

angular.module('myApp', []).factory('getDataService', function($http) {
    return {
        getData: function(done) {
            $http.get('/route-to-data.json')
            .success(function(data) { 
                done(data);
            })
            .error(function(error) {
                alert('An error occured');
            });
        }
    }
});

Mon JSON: 

{
    "SerialNumbers": {
        "451651": [
            {
                "Owner": "Mr Happy"
            }
        ],
        "5464565": [
            {
                "Owner": "Mr Red"
            }
        ],
        "45165": [
            {
                "Owner": "Mr Sad"
            }
        ],
        "4692": [
            {
                "Owner": "Mr Green"
            }
        ],
        "541": [
            {
                "Owner": "Mr Blue"
            }
        ],
        "D4554160N": [
            {
                "Owner": "Mr Loud"
            }
        ]
    }
}

Voici mon violon: http://jsfiddle.net/oampz/7bB6A/

Je peux appeler mon service et récupérer les données du JSON, mais je suis bloqué sur la façon d'effectuer une recherche sur mes données récupérées par rapport à la valeur entrée.

Merci

MISE À JOUR:

Ce qui suit trouve un numéro de série entré:

angular.forEach($scope.MyData, function(value, key) {
            if (key === enteredValue) {
                console.log("I Found something...");
                console.log("Serial: " + key);
                console.log("Owner: " + key.Owner);
            }

        })

Je peux afficher le numéro de série trouvé via console.log("Serial: " + key); mais en essayant d'afficher le propriétaire comme console.log("Owner: " + key.Owner); s'affiche comme Non défini.

angularjsangularjs-directiveangularjs-scopeangularjs-ng-repeatangular-services
10
Oam Psy

La clé est juste d'itérer sur l'objet de données tout en observant la structure correcte pour accéder aux valeurs.

Votre fonction de recherche pourrait ressembler à ceci:

$scope.results = [];
$scope.findValue = function(enteredValue) {     
    angular.forEach($scope.myData.SerialNumbers, function(value, key) {
        if (key === enteredValue) {
            $scope.results.Push({serial: key, owner: value[0].Owner});
        }
    });
};

Notez que je pousse les résultats dans un tableau. Vous pouvez configurer une répétition ng dans la vue qui l'utilisera pour présenter une vue en direct des résultats:

<input type="text" ng-model="enteredValue">
<br>
<button type="button" ng-Click="findValue(enteredValue)">Search</button>
<h3>Results</h3>
<ul>
    <li ng-repeat="result in results">Serial number: {{result.serial}}
    | Owner: {{result.owner}}</li>
</ul>

Démo

10
Marc Kline