Я новичок в разработке интерфейса и играю с 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);
Угловой $httpProvider
автоматически добавляет заголовок Content-Type: application/json
ко всем исходящим запросам обслуживания, сделанным вашим приложением.
Кроме того, он также автоматически десериализует ответы, используя парсер JSON, если обнаружен JSON-подобный ответ.
Таким образом, нет необходимости использовать такие функции, как angular.toJson()
чтобы преобразовать JSON самостоятельно, если вы не переопределили поведение поставщика по умолчанию где-то.
Рад, что помогло. :-)
$httpProvider
. Он устанавливает заголовокContent-Type: application/json
по умолчанию.