Question

当测试下面的代码时，查询会返回正确的数据，但是当我尝试显示返回数据时，它不会显示在我的表中。如果我只是复制返回数据，并使$ scope.products的值显示就好了。有没有什么特别的东西需要对动态数据才能使它工作？我是angularjs的新手，所以我还在学习。

返回JSON数据

{NAME：“21st Amendment Blood Orange IPA”，ID：327}，{NAME：“3 Daughters Blonde”，ID：328}，{NAME：“90 Shillings”，ID：329}，{NAME：“ Avrey Ellie's Brown“，ID：330}，{NAME：”Bed Head Red Ale“，ID：331}，{NAME：”Bell's Two Hearted“，ID：332}，{NAME：”Berkshire Steel Rail“，ID： 333}

angularjs代码

var app = angular.module("root", [])
    app.controller("repeater", ["$scope", "$http", function($scope, $http) {
            $http({method: 'GET', url: 'http://server/angularjs/cfc/sqldata.cfc?method=products'})
        .then(function (response) {
                    var str = '[';
                    for(var i in response.data){
                        str += '{NAME: ' + '"' + response.data[i].NAME + '", ID: ' + response.data[i].ID + '},';                                    
                    }
                    str += ']';
                    //console.log(str);
                    $scope.products = str;
                    //document.write(str);
            });
    }]);

HTML代码

<div ng-controller="repeater">
    <table border="1" bordercolor="#000000" cellpadding="0" cellspacing="0">
      <thead>
          <tr>
              <td style="font-weight:bold">Index</td>
        <td style="font-weight:bold">Item Id</td>
              <td style="font-weight:bold">Item Name</td>
          </tr>
      </thead>
      <tbody>
          <tr ng-repeat="product in products track by $index" ng-class="{oddRow: $odd}">
              <td>{{$index}}</td>
        <td>{{product.ID}}</td>
              <td>{{product.NAME}}</td>
          </tr>
      </tbody>
  </table>  
</div>

Answer 1

您不需要重建JSON或解析它。您可以直接从响应对象中获取数据，如：response.data。

看看这个例子：

var app = angular.module('app', []);

app.controller('postController', ['$scope', '$http', function($scope, $http){
    $scope.data = 'empty';
    $scope.runAJAX = function(){
  $http.get('https://jsonplaceholder.typicode.com/posts').then(function(response){
            $scope.data = response.data;
        }).catch(function(error){
            console.log(error);
        });
    }
}]);

<!DOCTYPE html>
<html lang="en" ng-app="app">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body ng-controller="postController">
    <div>
        <input type="button" value="run" ng-click="runAJAX()" />
    </div>
    <div>
        <table>
            <tr>
                <th>id</th>
            </tr>
            <tr ng-repeat="post in data">
                <td>{{post.id}}</td>
            </tr>
        </table>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script src="scripts.js"></script>
</body>

</html>

Answer 2

尝试

$scope.products = JSON.parse(str);

AngularJS中不显示动态JSON但硬编码

2 个答案: