Перебор свойств JSON

0

Я успешно использовал службу $http в угловом режиме, чтобы вытащить объект JSON с другого сервера с помощью своего API. Затем я смог отобразить такие значения...

<div ng-controller="ApiController as ApiCtrl">
{{ApiCtrl.Api.status}}
{{ApiCtrl.Api.meta.count}}
{{ApiCtrl.Api.data[0].nickname}}
{{ApiCtrl.Api.data[0].account_id}}
</div>

Это правильно отображает значения, но я не могу отображать клавиши. Я читал, здесь и здесь. Они объяснили, что существует ng-повтор, который настроен на итерацию через объект и вытаскивает из него keys и values.

<div ng-controller="ApiController as ApiCtrl">
  <div>
    <div ng-repeat="(key, value) in Api">
        {{key}} : {{value}}
    </div>
  </div>
</div>

Для справки это ApiController

function ApiController($http) {
    var vm = this;
    vm.Api = [];

    $http.get('...').success(function (data) {
    vm.Api = data;
    });
};

Это Джон, которого я попросил

{
"status": "ok",
"meta": {
    "count": 1
},
"data": [
    {
        "nickname": "Mitcha47",
        "account_id": 1001356515
    }
]
}

Второй метод ng-repeat="(key, value) in Api" не работает и показывает только * ngRepeat: (ключ, значение) в Api * в html

Я очень смущен тем, почему он не работает, и я не уверен, что его неправильное использование синтаксиса или непонимание того, как работает ng-repeat.

редактировать

После перехода на div ng-repeat = "(ключ, значение) в ApiCtrl.Api" Это было сделано ->

 status : ok
 meta : {"count":1}
 data : [{"nickname":"Mitcha47","account_id":1001356515}]'

Это нормально, но не точно формат, который нужно положить в таблицу, что является следующим шагом. Будет ли это исправлено с помощью функции .fromJson?

Я включаю ApiCtrl, потому что в каждом модуле можно использовать несколько контроллеров, и поэтому это все указывает на правильные значения?

  • 0
    Как выглядит JSON? По крайней мере, показать образец этого.
  • 0
    Я отредактировал вопрос :)
Показать ещё 2 комментария
Теги:

3 ответа

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

Вам нужно указать контроллер в ng-repeat.

РЕДАКТИРОВАТЬ

Согласно документам, когда вы используете controller as методы и свойства декларации, привязаны непосредственно к контроллеру вместо использования $ scope, поэтому вам нужно указать контроллер, потому что объект Api является свойством этого контроллера.

Я изменил фрагмент, чтобы показать данные в таблице, но я не уверен точно, что вы хотите отобразить. Не могли бы вы привести пример?

<div ng-repeat="(key, value) in ApiCtrl.Api">

angular.module("app", [])
  .controller("ApiController", ApiController);

function ApiController($http) {
  var vm = this;

  vm.Api = {
    status: "good",
    meta: {
      count: 42
    },
    data: [{
      nickname: "Timmy",
      account_id: 1
    }, {
      nickname: "Johnny",
      account_id: 2
    }]
  };
};
table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid black;
  padding: 5px;
}

th {
  text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="ApiController as ApiCtrl">
    {{ApiCtrl.Api.status}} {{ApiCtrl.Api.meta.count}} {{ApiCtrl.Api.data[0].nickname}} {{ApiCtrl.Api.data[0].account_id}}
  </div>

  <hr>

  <div ng-controller="ApiController as ApiCtrl">
    <div>
      <table>
        <thead>
          <tr>
            <th ng-repeat="(key, value) in ApiCtrl.Api">{{key}}</th>
          </tr>
        </thead>
        <tbody>
          <td ng-repeat="(key, value) in ApiCtrl.Api">
            {{value}}
          </td>
        </tbody>
      </table>
    </div>
  </div>
</div>
Поделиться
  • 0
    Посмотрите мои правки и уточните вопрос :)
  • 0
    @DrewAckerman Я обновил ответ, но не уверен, что вы хотите отобразить в таблице. У вас есть свойство status и meta и я предполагаю, что вы не хотите повторять их, а вместо этого выполняете итерацию по свойству data ?
Показать ещё 6 комментариев
1

Возможная проблема может быть здесь:

Должен быть -

    <div ng-repeat="(key, value) in ApiCtrl.Api">
     {{key}} : {{value}}
    </div>

Вместо -

    <div ng-repeat="(key, value) in Api">
     {{key}} : {{value}}
    </div>
Поделиться
0

Если вы используете контроллер как синтаксис, вы должны использовать

ng-repeat="(key, value) in ApiCtrl.Api"
Поделиться

Ещё вопросы

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