如何使用网络服务中的 JSON 数据填充 Angular 中的 table？

Question

我有一个 link 在找到名字时显示 JSON 数据。

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

例如：如果我将 f_name 替换为 Tim，我会收到此 JSON 响应。

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

如果我用 Sue 替换 f_name，我会得到这个 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

看起来你的服务器端函数已经能够处理查询和return过滤结果，如果是这样的话，你需要做的只是处理请求url时您发送搜索结果。所以，您的 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;
             });
    }

如何使用网络服务中的 JSON 数据填充 Angular 中的 table？

How to populate table in Angular with JSON data from a web Service?

javascript

json

angularjs

angular-ng