Как отобразить вложенные объекты JSON, используя ng-repeat с Ionic Framework?

0

Я разрабатываю простое гибридное мобильное приложение, использующее Ionic framework. Когда вы ищете фамилию, запрос GET отправляется для получения всех совпадающих имен, а затем отображает их соответствующие идентификаторы. У меня возникла проблема с отображением возвращаемых данных из объекта JSON.

Ниже приведена страница html:

<ion-view view-title="Account" ng-controller="AccountCtrl">
<ion-content>
    <div class="list">
        <div class="item item-input-inset">
            <label class="item-input-wrapper">
                <input type="text" placeholder="Search" ng-model="name">
            </label>
            <button class="button button-small" ng-click="searchUser(name)">
                Go
            </button>
        </div>
    </div>
    <div>
        <ul ng-repeat="user in $results">
            <li>{{user.id}}</li>
        </ul>
    </div>
</ion-content>

Далее находится файл js, который успешно возвращает заполненный объект JSON со всем, что мне нужно.

angular.module('starter.controllers', [])

.controller('AccountCtrl', ['$scope', '$http', function ($scope, $http) {

$scope.searchUser = function (name) {
    $http.get('https://notrelevantforthis/searchLastName?=' + name).then(function (response) {
        console.log(response.data)

        //Assign JSON obj to results to repeat through and display data
        $scope.results = response.data;

        //To show the actual JSON object is returned
        //var jsonStr = JSON.stringify($scope.results);
        //document.body.innerHTML = jsonStr;

    }, function (error) {
        console.log(error)
    });
};
}]);

Теперь важной частью является структура самого объекта JSON. Я думаю, что здесь я смущаюсь. Структура выглядит следующим образом:

{
"response": {
  "totalFound": 275,
  "start": 0,
  "acc": [
    {
      "id": [
        "1"
      ],
      "first_name": [
        "Joe"
      ],
      "last_name": [
        "Smith"
      ]
    },
    {
      "id": [
        "2"
      ],
      "first_name": [
        "John"
      ],
      "last_name": [
        "Doe"
      ]
   }]}
}

Моя проблема заключается в повторении объекта JSON с использованием ng-repeat, я думаю. По какой-то причине ни одна из данных не отображается, но объект определенно присутствует при просмотре консоли. Любая помощь или направление в том, что я делаю неправильно, было бы очень оценено, поскольку я новичок в этом и пытаюсь найти правильный способ сделать это.

EDIT: Пробовал использовать повтор коллекции, также предлагаемый ионной структурой, но получал ошибки ограничения стека.

Теги:
ionic-framework

1 ответ

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

Когда вы назначаете response.data для $scope.results, вы буквально назначаете ему тело ответа HTTP, которое является целым объектом JSON, который у вас есть в вашем вопросе. Вам нужно будет указать на response.data.response.acc если вы хотите ng-repeat через эти учетные записи.

В вашем шаблоне он должен просто быть ng-repeat="user in results", без $ перед results.

Ваш объект JSON перечисляет id для каждой учетной записи в виде массива, я бы рекомендовал просто указывать буквальное значение без массива, иначе в вашем ng-repeat вам придется использовать {{user.id[0]}} для фактического напечатайте значение без печати самого массива.

Я привел пример для вас здесь: http://plnkr.co/edit/GYeF4FzVHl8Og5QTFcDx?p=preview

  • 0
    Спасибо @Dennis, скоро еще раз внимательно посмотрю на это и сообщу о моих результатах.
  • 0
    Только что проверил и ты был прав. Я определенно указывал на неправильную информацию, которая мне нужна! Я пересмотрел переменную области видимости, чтобы указать, что мне нужно, как вы предложили. Спасибо за отличный ответ за то, что я пытался сделать @Dennis Tang

Ещё вопросы

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