Angular Suche nach Wert in JSON und entsprechende Daten anzeigen

Question

Was ich versuche zu tun ist einfach. Ein Benutzer gibt einen Wert ein, wenn er auf die Schaltfläche klickt, ruft JS einen Dienst auf, um meine JSON-Daten abzurufen, und führt eine Suche nach dem für JSON eingegebenen Wert durch. Wenn eine Übereinstimmung gefunden wird, wird der Besitzer angezeigt.

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

Meine 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" 
      } 
     ] 
    } 
} 

Hier ist meine Geige: http://jsfiddle.net/oampz/7bB6A/

Ich kann meinen Dienst aufrufen und die Daten aus dem JSON abrufen, aber ich bin fest, wie eine Suche auf meine abgerufenen Daten mit dem eingegebenen Wert durchgeführt werden.

Dank

---

UPDATE:

Die folgende findet eine Seriennummer eingegeben:

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

     }) 

ich das gefunden serial über console.log("Serial: " + key); anzeigen kann aber versuchen, den Besitzer als console.log("Owner: " + key.Owner); anzuzeigen wird angezeigt als Undefiniert.

Answer 1

Der Schlüssel besteht darin, nur über das Datenobjekt zu iterieren und dabei die korrekte Struktur für den Zugriff auf die Werte zu beachten.

Ihre Suchfunktion könnte wie folgt aussehen:

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

Beachten Sie, dass ich die Ergebnisse in ein Array bin schieben. Sie können in der Ansicht ein ng-Repeat-Setup, die diese verwenden einen Live-Blick auf die Ergebnisse präsentieren:

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

Demo