角度搜索JSON中的值并显示相应的数据 [英] Angular Search for value in JSON and display corresponding data
问题描述
我想做的很简单.用户输入一个值,单击按钮,我的JS调用一个服务以检索我的JSON数据,并根据JSON输入的值进行搜索,如果找到匹配项,则显示所有者".
What i am trying to do is simple. A user enters a value, on button click, my JS calls a service to retreive my JSON data and perform a search on the value entered against the JSON and if a match is found, display the 'Owner'.
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');
});
}
}
});
我的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"
}
]
}
}
这是我的小提琴: http://jsfiddle.net/oampz/7bB6A/
我能够调用我的服务,并从JSON检索数据,但是我仍然坚持如何根据输入的值对检索到的数据进行搜索.
I am able to call my service, and retrieve the data from the JSON, but i am stuck on how to perform a search on my retrieved data against the value entered.
谢谢
更新:
以下内容找到了输入的序列号:
The following finds a serialnumber entered:
angular.forEach($scope.MyData, function(value, key) {
if (key === enteredValue) {
console.log("I Found something...");
console.log("Serial: " + key);
console.log("Owner: " + key.Owner);
}
})
我可以通过console.log("Serial: " + key);
显示找到的序列号,但是尝试将所有者显示为console.log("Owner: " + key.Owner);
却显示为未定义.
I can display the found serialNumber via console.log("Serial: " + key);
but trying to display the Owner as console.log("Owner: " + key.Owner);
is showing as Undefined.
推荐答案
关键在于迭代数据对象,同时观察访问值的正确结构.
The key is just to iterate over the data object while observing the correct structure for accessing the values.
您的搜索功能可能如下所示:
Your search function could look like this:
$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});
}
});
};
请注意,我正在将结果推送到数组中.您可以在视图中设置一个ng-repeat,它将使用它来呈现结果的实时视图:
Notice that I'm pushing the results into an array. You can setup an ng-repeat in the view which will use this to present a live view of the results:
<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>
这篇关于角度搜索JSON中的值并显示相应的数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!