How to populate Table using entered value Angular Json?

Question

I'm working on a clickButton function to populate a table based on the entered value from user. There are 3 fields to input data. First Name, Last Name, Zip. If I type firstName, click search I need to see the associated JSON data in the table. Same thing for lastName and zipCode. When I set $scope.results = data, the table is populated correctly based on entered value for firstName. I am trying to add conditions for the other two fields and then push the results to jsp. What am I doing wrong?

JS

$scope.results = [];
$scope.clickButton = function(enteredValue) {
    $scope.items=this.result;
    var url = 'http://localhost:8080/application/names/find?firstName='+enteredValue+'&lastName='+enteredValue+'&zipCode='+enteredValue
    $http.get(url).success(function(data){
        angular.forEach($scope.items, function (item) {
            if(items.first_nm === enteredValue || items.last_nm ==enteredValue || items.zip_cd == enteredValue){
                 $scope.results.push({
                     firstName: item.first_nm,
                     lastName: item.last_nm,
                     zipCode: item.zip_cd
                 });
             }
         })
    })
   };

JSP

  <input id="firstName" name="firstName" type="text" data-ng-model="enteredValue" /> 
  <input id="lastName" name="lastName" type="text" data-ng-model="enteredValue" /> 
  <input id="zipCode" name="zipCode" type="text" data-ng-model="enteredValue" /> 

 <button class="btn btn-primary" data-ng-click='clickButton(enteredValue)'>Search</button>

 <tr data-ng-repeat="result in results" class="text-center">

 <td data-title="'ID'" >{{result.firstName}}</td>

 <td data-title="'Name'" >{{result.lastName}}</td>

  <td data-title="'Status'" >{{result.zipCode}}
  </td>

And where is your click and search criteria fields in the view? — krivtom
– krivtom, Commented Jun 23, 2015 at 15:56

krivtom · Accepted Answer · 2015-06-23 16:59:35Z

1

Currently you are binding all search parameters to the same property - enteredValue. Instead you can assign them to separate properties and then use them accordingly in your search method:

HTML:

<input id="firstName" name="firstName" type="text" data-ng-model="enteredValue.firstName" /> 
<input id="lastName" name="lastName" type="text" data-ng-model="enteredValue.lastName" /> 
<input id="zipCode" name="zipCode" type="text" data-ng-model="enteredValue.zipCode" /> 

<button class="btn btn-primary" data-ng-click='clickButton(enteredValue)'>Search</button>

Controller:

$scope.clickButton = function(enteredValue) {
    $scope.items=this.result;
    // instead of enteredValue use enteredValue.lastName and other properties
    // If your API allows it, you can even add the value only if it exists,
    // not always as it is done currently
    var url = 'http://localhost:8080/application/names/find?firstName='+
            enteredValue.firstName+'&lastName='+
            enteredValue.lastName+'&zipCode='+enteredValue.zipCode
   $http.get(url).success(function(data){
        angular.forEach($scope.items, function (item) {
            if(items.first_nm === enteredValue || items.last_nm ==enteredValue || items.zip_cd == enteredValue){
                $scope.results.push({
                    firstName: item.first_nm,
                    lastName: item.last_nm,
                    zipCode: item.zip_cd
                });
             }
         });
    });
};

answered Jun 23, 2015 at 16:59

krivtom

25k10 gold badges53 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Angular_Newbie Over a year ago

dotnetom, thanks for the feedback. I followed your steps but for some reason the data doesn't show on the table. I can view the Json Data in the console fine. Also, when I try to search by lastName with firstName empty I don't return any json data at all. Is this the issue? $scope.items=this.result;

Collectives™ on Stack Overflow

How to populate Table using entered value Angular Json?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related