Как мы можем использовать результат JSON из $ http.get в Angular?

#json #angularjs

Вопрос:

Я получаю json с помощью $ http. $ get, но чтобы он был «совместим» с Angular, мне нужно преобразовать его таким образом:

 $http.get('/api/v1.0/plans').
    success(function(data) {
        var plans = [];

        for(var propertyName in data)
        {
            if (data.hasOwnProperty(propertyName))
            {
                plans.push(data[propertyName]);
            }
        }

        $scope.plans = angular.fromJson(data);
    });

Но, конечно, я думаю, что в данном случае это был бы правильный путь, как показано в документах:

 $http.get('/api/v1.0/plans').
    success(function(data) {
        $scope.plans = data;
    });

Я вижу разницу между объектами, я просто не знаю, как это исправить:

данные (не принимаются angular)

 Object {alfa: Object, beta: Object, delta: Object, omega: Object}

планы (преобразованные и принятые angular)

 [Object, Object, Object, Object]

Не могли бы вы, пожалуйста, сказать, что я делаю не так?

1. Проблема не в JSON, в первом случае $scope.plans это объект, во втором случае это массив. Объект представляет собой неструктурированную коллекцию значений ключа или «вещь», массив — это последовательность вещей. Кстати, объект неупорядочен, и разные браузеры будут упорядочивать массив по-разному. Подумайте о том, чтобы прочитать о массивах и объектах либо в «Красноречивом JavaScript» (бесплатно), либо в MDN.

2. Вот ссылка: eloquentjavascript.net/chapter4.html . Видя, что ваш фон написан на PHP — массивы JS разные. В PHP массивы ассоциативны. В JS массивы являются последовательными по своей природе с a .length , который заботится только об их (численно) индексированных свойствах. ng-repeat Например, вы не можете передать объект напрямую, однако вы ng-repeat="(name, value) in plans" можете использовать специальный синтаксис.

Ответ №1:

Вам нужно немного подробнее рассказать о том, на какую «совместимую» проблему вы ссылались в своем первом предложении. Насколько я знаю, оба представления JSON отлично работают в Angular для меня.

Я полагаю, что вопрос здесь сводится к тому, как данные будут использоваться после установки $scope.plans . Если вы пытаетесь использовать ng-repeat with $scope.plans после, то способ выполнения итерации будет немного отличаться в зависимости от того, являются ли данные, которые вы получаете, объектом JSON или массивом JSON.

Для объекта JSON вы используете

 <tr ng-repeat="(name, plan) in plans">
    <td> {{name}} </td> <td> {{ plan | json }} </td>
</tr>

Для массива JSON вы используете

 <tr ng-repeat="plan in plans">
    <td> {{$index}} </td> <td> {{ plan | json }} </td>
</tr>

Конечно, для plan указанных выше фрагментов HTML вы можете получить доступ к внутренним полям объекта с помощью точечной нотации, как обычно (т. Е. , {{plan.title}} , {{plan.description}} , и т.д.). {{plan | json}} просто преобразуйте объект JSON в строку, чтобы вы могли видеть содержимое объекта непосредственно в HTML.

Подробнее о том, как использовать ngRepeat , вы можете прочитать на https://docs.angularjs.org/api/ng/directive/ngRepeat

Ответ №2:

В случае, если a (Object {alfa: Object, beta: Object, delta: Object, omega: Object} ваш api возвращает объект, поэтому вам нужно определить планы как объект, а не массив, который должен работать

 $scope.plans = {}; // <-object
$http.get('/api/v1.0/plans').
    success(function(data) {

       angular.copy(data, $scope.plans);  
    });

в случае, если ваш api вернет массив объектов, вы должны определить планы как массив, т.е.:

 $scope.plans = []; // <-array
$http.get('/api/v1.0/plans').
    success(function(data) {

       angular.copy(data, $scope.plans);  
    });

Пожалуйста, смотрите bin здесь