Professor
Reputation: 2154
using ng-repeat to retrive data from an http response array in angularjs
I am trying to retrieve a response from an HTTP request using ng-repeat. This is my JSON object:
{
"sessid":"47",
"value":[
{
"_id":"1",
"0":"1",
"_exportid":"47",
"1":"47",
"sender_id":"0",
"2":"0",
"receiver_id":"0",
"3":"0",
"sender_address":"",
"4":"",
"receiver_address":"",
"5":"",
"price_in_btc":"2",
"6":"2",
"price_in_curr":"3",
"7":"3",
"status":"1",
"8":"1",
"account_id":"12",
"9":"12",
"date":"0000-00-00 00:00:00",
"10":"0000-00-00 00:00:00"
},
{
"_id":"2",
"0":"2",
"_exportid":"47",
"1":"47",
"sender_id":"0",
"2":"0",
"receiver_id":"0",
"3":"0",
"sender_address":"",
"4":"",
"receiver_address":"",
"5":"",
"price_in_btc":"2",
"6":"2",
"price_in_curr":"3",
"7":"3",
"status":"1",
"8":"1",
"account_id":"12",
"9":"12",
"date":"0000-00-00 00:00:00",
"10":"0000-00-00 00:00:00"
},
{
"_id":"3",
"0":"3",
"_exportid":"47",
"1":"47",
"sender_id":"46",
"2":"46",
"receiver_id":"47",
"3":"47",
"sender_address":"4504859484",
"4":"4504859484",
"receiver_address":"4584958459",
"5":"4584958459",
"price_in_btc":"0.01",
"6":"0.01",
"price_in_curr":"$200",
"7":"$200",
"status":"0",
"8":"0",
"account_id":"24524",
"9":"24524",
"date":"0000-00-00 00:00:00",
"10":"0000-00-00 00:00:00"
}
]
}
This is my Angular controller:
app.controller('transCtrl', ['$scope', '$http', function ($scope, $http) {
$http.get('http://localhost/bitty/class/v1/getransactions')
.then(function (res) {
var me = res.data.value;
$scope.values = me;
console.log($scope.values);
});
...and here is how I used my ng-repeat:
<tbody>
<tr ng-repeat="val in values">
<td><span class="tablesaw-cell-content">1</span></td>
<td><span class="tablesaw-cell-content">{{val.sender_address}}</span></td>
<td><span class="tablesaw-cell-content">{{val.receiver_address}}</span></td>
<td><span class="tablesaw-cell-content">{{val.price_in_btc}}</span></td>
<td><span class="tablesaw-cell-content">${{val.price_in_curr}}</span></td>
<td><span class="tablesaw-cell-content">{{val.date}}</span></td>
</tr>
</tbody>
Trying this doesn't return anything on the table, I would really appreciate your help.
Upvotes: 0
Views: 96
Answers (3)
Rohan Kawade
Reputation: 473
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script>
</head>
<body data-ng-app="role" data-ng-controller="fooController">
<table class="table table-bordered table-condensed">
<tr class="bg-primary">
<th>SR NO.</th>
<th>Sender Address</th>
<th>Reciever Address</th>
<th>Price in BTC</th>
<th>Price in Curr</th>
<th>date</th>
</tr>
<tr ng-repeat="val in dataValue track by $index">
<td><span class="tablesaw-cell-content">1</span></td>
<td><span class="tablesaw-cell-content">{{val.sender_address}}</span></td>
<td><span class="tablesaw-cell-content">{{val.receiver_address}}</span></td>
<td><span class="tablesaw-cell-content">{{val.price_in_btc}}</span></td>
<td><span class="tablesaw-cell-content">{{val.price_in_curr}}</span></td>
<td><span class="tablesaw-cell-content">{{val.date}}</span></td>
</tr>
</table>
</body>
</html>
<script>
var app = angular.module('role', []);
app.controller('fooController', function($scope){
$scope.data = {
"sessid":"47",
"value":[
{
"_id":"1",
"0":"1",
"_exportid":"47",
"1":"47",
"sender_id":"0",
"2":"0",
"receiver_id":"0",
"3":"0",
"sender_address":"My Address",
"4":"",
"receiver_address":"",
"5":"",
"price_in_btc":"2",
"6":"2",
"price_in_curr":"3",
"7":"3",
"status":"1",
"8":"1",
"account_id":"12",
"9":"12",
"date":"0000-00-00 00:00:00",
"10":"0000-00-00 00:00:00"
},
{
"_id":"2",
"0":"2",
"_exportid":"47",
"1":"47",
"sender_id":"0",
"2":"0",
"receiver_id":"0",
"3":"0",
"sender_address":"My Address",
"4":"",
"receiver_address":"My receiver Address",
"5":"",
"price_in_btc":"2",
"6":"2",
"price_in_curr":"3",
"7":"3",
"status":"1",
"8":"1",
"account_id":"12",
"9":"12",
"date":"0000-00-00 00:00:00",
"10":"0000-00-00 00:00:00"
},
{
"_id":"3",
"0":"3",
"_exportid":"47",
"1":"47",
"sender_id":"46",
"2":"46",
"receiver_id":"47",
"3":"47",
"sender_address":"4504859484",
"4":"4504859484",
"receiver_address":"4584958459",
"5":"4584958459",
"price_in_btc":"0.01",
"6":"0.01",
"price_in_curr":"$200",
"7":"$200",
"status":"0",
"8":"0",
"account_id":"24524",
"9":"24524",
"date":"0000-00-00 00:00:00",
"10":"0000-00-00 00:00:00"
}
]
}
$scope.dataValue = $scope.data.value;
});
</script>
</html>Working Demo
Upvotes: 1
Parth Acharya
Reputation: 545
Make sure basics first, variable name, app name, controller name etc because as you say if you are getting values it should be printed with this code.
I've just put your code and data in this plunker. The js
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
data = {
"sessid":"47",
"value":[
{
"_id":"1",
"0":"1",
"_exportid":"47",
"1":"47",
"sender_id":"0",
"2":"0",
"receiver_id":"0",
"3":"0",
"sender_address":"",
"4":"",
"receiver_address":"",
"5":"",
"price_in_btc":"2",
"6":"2",
"price_in_curr":"3",
"7":"3",
"status":"1",
"8":"1",
"account_id":"12",
"9":"12",
"date":"0000-00-00 00:00:00",
"10":"0000-00-00 00:00:00"
},
{
"_id":"2",
"0":"2",
"_exportid":"47",
"1":"47",
"sender_id":"0",
"2":"0",
"receiver_id":"0",
"3":"0",
"sender_address":"",
"4":"",
"receiver_address":"",
"5":"",
"price_in_btc":"2",
"6":"2",
"price_in_curr":"3",
"7":"3",
"status":"1",
"8":"1",
"account_id":"12",
"9":"12",
"date":"0000-00-00 00:00:00",
"10":"0000-00-00 00:00:00"
},
{
"_id":"3",
"0":"3",
"_exportid":"47",
"1":"47",
"sender_id":"46",
"2":"46",
"receiver_id":"47",
"3":"47",
"sender_address":"4504859484",
"4":"4504859484",
"receiver_address":"4584958459",
"5":"4584958459",
"price_in_btc":"0.01",
"6":"0.01",
"price_in_curr":"$200",
"7":"$200",
"status":"0",
"8":"0",
"account_id":"24524",
"9":"24524",
"date":"0000-00-00 00:00:00",
"10":"0000-00-00 00:00:00"
}
]
}
$scope.values = data.value
});
Html :-
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]" data-semver="4.0.0" src="https://code.angularjs.org/latest/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller ="myCtrl">
<h1>Hello Plunker!</h1>
<table>
<tbody>
<tr ng-repeat="val in values">
<td><span class="tablesaw-cell-content">1</span></td>
<td><span class="tablesaw-cell-content">{{val.sender_address}}</span></td>
<td><span class="tablesaw-cell-content">{{val.receiver_address}}</span></td>
<td><span class="tablesaw-cell-content">{{val.price_in_btc}}</span></td>
<td><span class="tablesaw-cell-content">${{val.price_in_curr}}</span></td>
<td><span class="tablesaw-cell-content">{{val.date}}</span></td>
</tr>
</tbody>
</table>
</body>
</html>
Working Plunker :- https://plnkr.co/edit/pEBpOzcyjV5iTaaIURW6?p=preview
Upvotes: 0
Srinivas
Reputation: 1
Try var me = JSON.parse(res.data.value);
or var me = JSON.parse(JSON.stringify(res.data.value));
Upvotes: 0
Related Questions
- How to Get Array from $http and view it with ng-repeat
- Get data from JSON with ng-repeat | Angular 1.5
- Angular, parsing array out of JSON object using ng-repeat
- Displaying data with ng-repeat from JSON array in angular
- AngularJS ng-repeat get data from JSON
- How do I get data from a server for each element in an array in AngularJs
- Displaying data with ng-repeat from JSON array
- How to show json response values in Angular JS using ng-repeat
- ng-repeat working with array from JSON
- How to Parse JSON response into ng-repeat correctly in Angularjs