使用ng-repeat从angularjs中的http响应数组中检索数据

时间：2017-06-23 08:45:42

标签： javascript angularjs

我正在尝试使用ng-repeat从HTTP请求中检索响应。这是我的JSON对象：

{
  "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"
    }
  ]
}

这是我的Angular控制器：

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

...以下是我使用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>

尝试此操作并不会在桌面上返回任何内容，我将非常感谢您的帮助。

3 个答案:

答案 0 :(得分：1)

＆＃13;
＆＃13; 
    <!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>
＆＃13;
＆＃13;
＆＃13;

工作演示

答案 1 :(得分：0)

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

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

答案 2 :(得分：0)

首先确定基础知识，变量名称，应用程序名称，控制器名称等，因为正如您所说，如果您正在获取值，则应使用此代码打印。

我只是把你的代码和数据放在这个plunker中。 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="angular.js@4.0.0" 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

相关问题
最新问题