Angular 搜索 JSON 中的值并显示相应数据 [英] Angular Search for value in JSON and display corresponding data

问题描述

我想做的很简单.用户输入一个值，在单击按钮时，我的 JS 调用一个服务来检索我的 JSON 数据并根据 JSON 对输入的值执行搜索，如果找到匹配项，则显示所有者".

HTML:

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

JS:

angular.module('myApp', []).controller('MainCtrl', function ($scope, $http, getDataService) {$scope.findValue = 函数(输入值){alert("正在搜索 = " + enterValue);$scope.MyData = [];getDataService.getData(function(data) {$scope.MyData = data.SerialNumbers;});}});angular.module('myApp', []).factory('getDataService', function($http) {返回 {获取数据:功能(完成){$http.get('/route-to-data.json').成功(功能(数据){完成(数据)；}).错误(功能(错误){alert('发生错误');});}}});

我的 JSON:

<代码>{序列号": {451651":[{业主":快乐先生"}],5464565":[{业主":红先生"}],45165":[{所有者":悲伤先生"}],4692":[{业主":格林先生"}],541":[{业主":蓝先生"}],D4554160N":[{业主":大声先生"}]}}

这是我的小提琴:http://jsfiddle.net/oampz/7bB6A/

我能够调用我的服务，并从 JSON 中检索数据，但我无法根据输入的值对检索到的数据执行搜索.

谢谢

<小时>

更新:

以下查找输入的序列号:

angular.forEach($scope.MyData, function(value, key) {如果(键 === 输入值){console.log("我发现了一些东西......");console.log("序列号:" + key);console.log("所有者:" + key.Owner);}})

我可以通过 console.log("Serial: " + key); 显示找到的 serialNumber，但试图将所有者显示为 console.log("Owner: " + key.Owner); 显示为 Undefined.

解决方案

关键是要遍历数据对象，同时观察访问值的正确结构.

您的搜索功能可能如下所示:

$scope.results = [];$scope.findValue = 函数(输入值){angular.forEach($scope.myData.SerialNumbers, function(value, key) {如果(键 === 输入值){$scope.results.push({serial: key, owner: value[0].Owner});}});};

请注意，我将结果推送到数组中.您可以在视图中设置一个 ng-repeat，它将使用它来呈现结果的实时视图:

<br><button type="button" ng-Click="findValue(enteredValue)">搜索</button><h3>结果</h3><ul><li ng-repeat="result in results">序列号:{{result.serial}}|所有者:{{result.owner}}</li>

演示

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

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

Here's my fiddle: http://jsfiddle.net/oampz/7bB6A/

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.

Thanks

---

UPDATE:

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

        })

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

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>

Demo

这篇关于Angular 搜索 JSON 中的值并显示相应数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！