如何使用來自Web服務的JSON數據填充Angular中的表？

Question

我有一個鏈接，當找到名字時顯示JSON數據。

 http://localhost:8080/application/names/find?firstname=f_name&LastName&Address&Status= 

例如：如果我用Tim代替f_name，我得到這個JSON響應。

 [{"f_name": "Tim","address": "Road","phone": "1234","status": "busy"}]

如果我將F_name替換為Sue，則會收到此JSON響應。

 [{"f_name": "Sue","address": "Street","phone": "4321", "status": "available"}]

我希望能夠輸入Tim或Sue並獲取相應的數據。 這就是我所擁有的。

 $http.get('http://localhost:8080/application/names/find?firstname=f_name&LastName&Address&Status=').
  success(function(data) {
 $scope.jsonData = data;
 alert("Success");
}).
error(function(data) {
alert("Invalid URL");
});


 $scope.results = [];
 $scope.clickButton = function(enteredValue) {

    $scope.items = $scope.jsonData;

    angular.forEach($scope.items, function (item) {
        if(item.f_name === enteredValue){
            $scope.results.push({
                name: enteredValue,
                address: item.address,
                number: item.phone, 
                status: item.status
            });
        }
    })};

jsp

 <table>
        <tr>
            <td><label>Name:</label></td>
            <td>
    <input id="fName" type="text" data-ng-model="enteredValue" /> 
    <button data-ng-click='clickButton(enteredValue)'>Search</button>
            </td>
        </tr>
  </table>


 <table>
 <tr data-ng-repeat="result in results" >
 <td data-title="'ID'" >{{result.name}}</td>
 <td data-title="'Name'">{{result.status}}</td>
 <td data-title="'Status'">{{result.number}}</td>
 <td data-title="'Start Date'" >{{result.date}} </td>
 </tr>
 </table>

我已經能夠使用then來成功填充下拉列表，如下所示。

 $http.get('http://localhost:8080/application/countries').then(function(cdata) 
        {
$scope.countryData = cdata.data;

})

如何啟動此搜索？ 我這樣做正確嗎？ 我需要為此服務嗎？

Answer 1

看起來您的服務器端函數已經能夠處理查詢並返回過濾后的結果，如果是這樣，那么您需要做的只是在發送搜索結果時處理請求網址。 因此，您的clickButton函數應如下所示：

        $scope.clickButton = function(enteredValue){
        //you may want to change logic here if you got other parameter need to be handled
        var url = 'http://localhost:8080/application/names/find?firstname='+enteredValue+'&LastName&Address&Status=';
        $http.get(url).success(function(data){
        $scope.results = data;
             });
    }