web-dev-qa-db-ja.com

Angular JSONで値を検索し、対応するデータを表示します

私がやろうとしていることは簡単です。ユーザーが値を入力し、ボタンをクリックすると、JSがサービスを呼び出してJSONデータを取得し、JSONに対して入力された値に対して検索を実行し、一致が見つかった場合は「所有者」を表示します。

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

これが私のフィドルです： http://jsfiddle.net/oampz/7bB6A/

サービスを呼び出してJSONからデータを取得できますが、取得したデータに対して、入力した値に対して検索を実行する方法に悩まされています。

ありがとう

UPDATE：

次の例では、入力されたシリアル番号を検索します。

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

        })
_

見つかったserialNumberをconsole.log("Serial: " + key);を介して表示できますが、console.log("Owner: " + key.Owner);がUndefinedと表示されているので、Ownerを表示しようとしています。

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

重要なのは、値にアクセスするための正しい構造を監視しながら、データオブジェクトを反復処理することです。

検索関数は次のようになります。

$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を設定できます。

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

デモ

10
Marc Kline