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

【问题标题】：Dynamic JSON not displaying but hard coded does in AngularJS动态 JSON 不显示但在 AngularJS 中硬编码
【发布时间】：2018-05-07 23:22:44
【问题描述】：

测试下面的代码时，查询返回正确的数据，但是当我尝试显示返回数据时，它没有显示在我的表中。如果我只是简单地复制返回数据并使 $scope.products 的值显示得很好。动态数据是否需要做一些特别的事情才能使其工作？我是 angularjs 新手，所以我还在学习。

返回 JSON 数据

{NAME: "21st Amendment Blood Orange IPA", ID: 327},{NAME: "3 Daughters Blonde", ID: 328},{NAME: "90 先令", 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>

【问题讨论】：

字符串连接的目的是什么？
不确定。在另一个例子中看到了这一点。
您应该能够使用相同的键访问 response.data 中的数据。看起来您正在重建字符串中的 JSON，这是不必要的。
你完全正确。我刚刚更改了我的代码来表示这个 $scope.products = response.data;它工作得很好。非常感谢。
太好了，这回答了问题吗？

标签： angularjs

【解决方案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>

【讨论】：

【解决方案2】：

尝试

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

【讨论】：

JSON.parse(str) 导致错误。 JSON.parse () 位置 2 处的 JSON 中的意外标记 N