angularjs - node - ng bind angular 4

Angular Busca el valor en JSON y muestra los datos correspondientes

Question

Lo que estoy tratando de hacer es simple. Un usuario ingresa un valor, al hacer clic en el botón, mi JS llama a un servicio para recuperar mis datos JSON y realiza una búsqueda en el valor ingresado en el JSON y, si se encuentra una coincidencia, muestra el ''Propietario''.

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

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

Aquí está mi violín: http://jsfiddle.net/oampz/7bB6A/

Puedo llamar a mi servicio y recuperar los datos de JSON, pero estoy atascado en cómo realizar una búsqueda en los datos recuperados con el valor ingresado.

Gracias

ACTUALIZAR:

Lo siguiente encuentra un número de serie ingresado:

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

Puedo mostrar el serialNumber encontrado a través de console.log console.log("Serial: " + key); pero tratando de mostrar el Propietario como console.log("Owner: " + key.Owner); se muestra como indefinido

Answer 1

La clave es simplemente iterar sobre el objeto de datos mientras se observa la estructura correcta para acceder a los valores.

Su función de búsqueda podría verse así:

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

Tenga en cuenta que estoy empujando los resultados en una matriz. Puede configurar una repetición ng en la vista que usará esto para presentar una vista en vivo de los resultados:

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

Manifestación