Angular.js таблица сопоставления мозга

0

Я новичок в разработке интерфейса и играю с 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);
  • 0
    Вам не нужно явно сериализовать ваши данные в JSON перед получением или отправкой запросов на ваш сервер, если вы не настроили $httpProvider . Он устанавливает заголовок Content-Type: application/json по умолчанию.
  • 0
    Почему вы сериализуете возвращаемое значение в json, прежде чем присваиваете его переменной $ scope.records? Сериализация записей означает, что теперь это строка, а не массив. Попробуйте изменить эту строку на $ scope.records = response.data.records. Ng-repeat необходимо передать массив, чтобы перебрать не строку.
Показать ещё 1 комментарий
Теги:
angularjs-ng-repeat

1 ответ

1
Лучший ответ

Угловой $httpProvider автоматически добавляет заголовок Content-Type: application/json ко всем исходящим запросам обслуживания, сделанным вашим приложением.

Кроме того, он также автоматически десериализует ответы, используя парсер JSON, если обнаружен JSON-подобный ответ.

Таким образом, нет необходимости использовать такие функции, как angular.toJson() чтобы преобразовать JSON самостоятельно, если вы не переопределили поведение поставщика по умолчанию где-то.

Рад, что помогло. :-)

  • 0
    Хотя мне немного неловко публиковать мои мозговые сообщения, я понимаю, что время от времени они есть у всех. Иногда я указывал очевидные вещи блестящим программистам. Спасибо за то, что ты мой приятель по коду;)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню