using ng-repeat to retrive data from an http response array in angularjs

Question

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.

as satpal mentioned...confirm that your $scope.values has data — Sa E Chowdary
– Sa E Chowdary, Commented Jun 23, 2017 at 8:52
Change ng-repeat="val in values"> to ng-repeat="val in values.value" — Ramesh Rajendran
– Ramesh Rajendran, Commented Jun 23, 2017 at 8:53

Rohan Kawade · Accepted Answer · 2017-06-23 11:20:39Z

    <!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

John Moutafis · Accepted Answer · 2017-06-23 10:11:22Z

0

Try var me = JSON.parse(res.data.value);

or var me = JSON.parse(JSON.stringify(res.data.value));

edited Jun 23, 2017 at 10:11

John Moutafis

23.3k11 gold badges74 silver badges118 bronze badges

answered Jun 23, 2017 at 8:56

Srinivas

1

Comments

Parth Acharya · Accepted Answer · 2017-06-23 10:30:56Z

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

Collectives™ on Stack Overflow

using ng-repeat to retrive data from an http response array in angularjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related