javascript - How to populate table with json data using angular? -
i have loaded json data via http having problem populating table json data based on entered value 'name'. plunker below.
json
[ { "name": "tim", "address": "road", "phone": "1234", "status": "busy" }, { "name": "sue", "address": "street", "phone": "4321", "status": "available" } ]
assuming controller , app defined correctly doing wrong? want type tim or type sue , populate table corresponding data.
angular.js
$http.get('data.json'). success(function(data) { $scope.jsondata = data; alert("success"); }). error(function(data) { alert("invalid url"); }); $scope.clickbutton = function(enteredvalue) { $scope.items = $scope.jsondata; angular.foreach($scope.items[enteredvalue], function (item, key) { $scope.results.push({ name: enteredvalue, address: item.address, phone: item.phone, status: item.status }); });
jsp
<table> <tr> <td><label>name:</label></td> <td> <input id="pname" name="pname" type="text" data-ng-model="enteredvalue" /> </td> </tr> <button class="btn btn-primary" data-ng-click='clickbutton(enteredvalue)'>search</button> <table> <tr data-ng-repeat="result in results"> <td data-title="'id'">{{result.status}}</td> <td data-title="'name'">{{result.name}}</td> <td data-title="'status'" >{{result.address}}</td> <td data-title="'start date'" >{{result.phone}}</td> </tr> </table>
try this, problem in json file, enteredvalue (someone's name in case) not valid key in object, angulars foreach never execute because $scope.items[enteredvalue] undefined:
$http.get('data.json') .success(function(data) { $scope.jsondata = data; alert("success"); }) .error(function(data) { alert("invalid url"); }); $scope.clickbutton = function(enteredvalue) { $scope.items = $scope.jsondata; angular.foreach($scope.items, function (item) { if(item.name === enteredvalue){ $scope.results.push({ name: enteredvalue, address: item.address, phone: item.phone, status: item.status }); } }); };
i've updated plunkr: http://plnkr.co/edit/yro8sugtdq54nivuhdvy
Comments
Post a Comment