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.acc
을 ng-repeat
통해 원하는 경우 실제로 가리켜 야 합니다.
템플릿에서, 그냥해야 ng-repeat="user in results"
를 빼고, $
의에 앞 results
.
JSON 개체는 id
각 계정에 대한 배열을 나열합니다 . 배열없이 리터럴 값을 제공하는 것이 좋습니다. 그렇지 않으면 ng-repeat {{user.id[0]}}
에서 배열 자체를 인쇄하지 않고 값을 실제로 인쇄하는 데 사용해야 합니다.
여기에 예제를 만들었습니다. http://plnkr.co/edit/GYeF4FzVHl8Og5QTFcDx?p=preview
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다