javascript - How to populate table in Angular with JSON data from a web Service? -
i have link displays json data when first name found.
http://localhost:8080/application/names/find?firstname=f_name&lastname&address&status=
for example: if replace f_name tim json response.
[{"f_name": "tim","address": "road","phone": "1234","status": "busy"}]
if replace f_name sue json response.
[{"f_name": "sue","address": "street","phone": "4321", "status": "available"}]
i want able type tim or sue , corresponding data. here have.
$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>
i have been able populate dropdown using then such below.
$http.get('http://localhost:8080/application/countries').then(function(cdata) { $scope.countrydata = cdata.data; })
how initiate search? doing right way? have have service this?
looks server side function been able handle query , return filtered result, if that's case, need cope request url when send search result. so, clickbutton function should this:
$scope.clickbutton = function(enteredvalue){ //you may want change logic here if got other parameter need handled var url = 'http://localhost:8080/application/names/find?firstname='+enteredvalue+'&lastname&address&status='; $http.get(url).success(function(data){ $scope.results = data; }); }
Comments
Post a Comment