Ionic 프레임 워크에서 ng-repeat를 사용하여 중첩 된 JSON 객체를 표시하는 방법은 무엇입니까?

Sam5487

Ionic 프레임 워크를 사용하여 간단한 하이브리드 모바일 앱을 개발 중입니다. 성을 검색하면 일치하는 모든 성을 검색하기 위해 GET 요청이 전송 된 다음 해당 ID를 표시합니다. 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>

다음은 필요한 모든 것이 채워진 JSON 개체를 성공적으로 반환하는 js 파일입니다.

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"
      ]
   }]}
}

내 문제는 ng-repeat를 사용하여 JSON 객체를 반복하는 것입니다. 어떤 이유로 데이터가 표시되지 않지만 콘솔을 볼 때 개체가 확실히 있습니다. 내가 잘못하고있는 일에 대한 도움이나 지시는 내가 이것에 익숙하지 않고 올바른 방법을 찾으려고 노력했기 때문에 대단히 감사하겠습니다.

편집 : ionic 프레임 워크에서 제공하는 collection-repeat를 사용하여 시도했지만 스택 제한 오류가 발생했습니다.

데니스 탕

당신이 할당 할 때 response.data$scope.results, 당신은 말 그대로 당신이 당신의 질문을 가지고 전체 JSON 객체입니다 그것에 HTTP의 응답 본문을 할당하고 있습니다. 이러한 계정 response.data.response.accng-repeat통해 원하는 경우 실제로 가리켜 야 합니다.

템플릿에서, 그냥해야 ng-repeat="user in results"를 빼고, $의에 앞 results.

JSON 개체는 id각 계정에 대한 배열을 나열합니다 . 배열없이 리터럴 값을 제공하는 것이 좋습니다. 그렇지 않으면 ng-repeat {{user.id[0]}}에서 배열 자체를 인쇄하지 않고 값을 실제로 인쇄하는 데 사용해야 합니다.

여기에 예제를 만들었습니다. http://plnkr.co/edit/GYeF4FzVHl8Og5QTFcDx?p=preview

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

Related 관련 기사

뜨겁다태그

보관