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