Question

我是前端开发的新手，正在玩angular.js（1.4.8）。在下面的代码中，我做了一个http get。然后我将json数据映射到表中。我认为我有一个映射问题，即ng-repeat没有把东西拉出来 json正确。或许这是别的东西，我无意中误导了你。你看到编程吗？错误在这里？

以下是相关的html：

<div class="table-responsive" data-ng-app="myApp" data-ng-controller="customersCtrl">
<table class="table table-striped">

    <thead>
        <tr>
            <th data-ng-repeat="header in headers">{{header}}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-ng-repeat="record in records track by $index">
                        <td>{{ record.data.day }}</td>
                        <td>{{ record.data.date }}</td>
                        <td>{{ record.data.value }}</td>
                    </tr>
                </tbody>
            </table>
        </div>

这是我的角度文件：

var app = angular.module('myApp', []);
app.controller('customersCtrl', function ($scope, $http) {
    $scope.init = function () {
        $http.get("https://localhost:4567/1")
            .then(function (response) {
                var json = angular.toJson(response.data.records);
                $scope.records = json;
                $scope.headers = response.data.headers;
            });
    };

    $scope.httpPost = function (journal) {
        var theJson = angular.toJson(journal);

        var successCallback = function (data, status, headers, config) {
            $scope.postResponse = data;
        };

        var errorCallback = function (data, status, headers, config) {
            console.log();
        };

        $http.post('https://localhost:4567/journal', {"foo": "bar"}).then(successCallback, errorCallback);
    };

    $scope.master = {};

    $scope.update = function (journal) {
        $scope.master = angular.copy(journal);
    };

    $scope.reset = function () {
        $scope.journal = angular.copy($scope.master);
    };

    $scope.init();
    $scope.reset();
});

这是响应主体（json）：

{
  "headers" : [ "day", "date", "value" ],
  "records" : [ {
    "data" : {
      "day" : "Tuesday",
      "date" : "5/3/2011",
      "value" : "2.6"
    },
    "id" : "646312cc-1931-4137-af2a-e712300b489b",
    "dateCreated" : 1453842720871,
    "dateUpdated" : 1453842720871,
    "etag" : "3bee5500-fd03-4d69-84af-8b8dc85292b0"
  }, {
    "data" : {
      "day" : "Wednesday",
      "date" : "5/4/2011",
      "value" : "2.6"
    },
    "id" : "f58eae54-6b30-4f61-b8cc-b04984a8436a",
    "dateCreated" : 1453842720871,
    "dateUpdated" : 1453842720871,
    "etag" : "29e4dc69-c118-4fad-91ae-8a1efaf9b984"
  }, {
    "data" : {
      "day" : "Thursday",
      "date" : "5/5/2011",
      "value" : "2.6"
    },
    "id" : "ebf8dba4-52a9-4e0b-a575-cda2ea29a2ea",
    "dateCreated" : 1453842720871,
    "dateUpdated" : 1453842720871,
    "etag" : "986961bb-84ff-4ac6-9f70-96827006ed87"
  } ],
  "id" : null,
  "dateCreated" : null,
  "dateUpdated" : null,
  "etag" : null
}

===== 正如两个人所指出的那样，问题就在于这一行（我已经把json对象变成了调试的东西而忘了还原;（

var json = angular.toJson(response.data.records);

Answer 1

Angular $httpProvider会自动将angular.toJson()标头添加到您的应用程序发出的所有传出服务请求中。

此外，如果检测到类似JSON的响应，它还会使用JSON解析器自动反序列化响应。

因此，除非您已在某处覆盖默认提供程序行为，否则无需使用{{1}}等函数自行执行JSON转换。

很高兴有帮助。： - ）

Angular.js表映射脑fahrt

1 个答案: