AngularJS를 사용하여 동적 JSON 배열 표시

안녕하세요 AngularJS 애플리케이션이 있습니다. 서버에 연결하고 일부 JSON 배열 데이터를 가져옵니다. 그것은 동적 인 데이터이며 내용이 어떤지 잘 모르겠습니다.AngularJS를 사용하여 동적 JSON 배열 표시

테이블로 표시하고 싶습니다. 이것이 JSON의 모습입니다.

RESPONSE 1

{ 
    "success": true, 
    "statusMessage": null, 
    "responseObject": { 
    "sourceContent": { 
     "Classification": [ 
     "New Feature", 
     "Bug", 
     "Bug", 
     "Improvement", 
     "Improvement" 
     ], 
     "CriticalityCode": [ 
     "2", 
     "1", 
     "4", 
     "6", 
     "9" 
     ], 
     "Title": [ 
     "TITLE1", 
     "TITLE2", 
     "TITLE3", 
     "TITLE4", 
     "TITLE5" 
     ], 
     "Description": [ 
     "Description 1", 
     "Description 2", 
     "Description 3", 
     "Description 4", 
     "Description 5" 
     ], 
     "Priority": [ 
     "Major", 
     "Major", 
     "Critical", 
     "Critical", 
     "Major" 
     ], 
     "Type": [ 
     "type 1", 
     "type 2", 
     "type 3", 
     "type 4", 
     "type 5" 
     ], 
     "Date": [ 
     "2014-01-06T11:30:10.000+0000", 
     "2013-12-30T11:14:27.000+0000", 
     "2013-12-09T10:21:09.000+0000", 
     "2013-12-05T08:12:07.000+0000", 
     "2013-12-05T08:05:46.000+0000" 
     ] 
    } 
    } 
}

RESPONSE 2

{ 
    "success": true, 
    "statusMessage": null, 
    "responseObject": { 
    "sourceContent": { 
     "Requirements": [ 
     "Requirements 1", 
     "Requirements 2", 
     "Requirements 3", 
     "Requirements 4" 
     ], 
     "Req Key": [ 
     "2", 
     "1", 
     "6", 
     "9" 
     ], 
     "Description": [ 
     "Description 1", 
     "Description 2", 
     "Description 3", 
     "Description 4" 
     ], 
     "Type": [ 
     "type 1", 
     "type 2", 
     "type 3", 
     "type 4" 
     ], 
     "Date": [ 
     "2013-12-30T11:14:27.000+0000", 
     "2013-12-09T10:21:09.000+0000", 
     "2013-12-05T08:12:07.000+0000", 
     "2013-12-05T08:05:46.000+0000" 
     ] 
    } 
    } 
}

JS 코드.

$scope.sourceContent= $scope.response.responseObject.sourceContent;

어떻게 테이블 내용을 넣을지 모르겠다. 이것은 내 HTML입니다

<table class="table-bordered" style="margin-bottom: 0;"> 
       <tr> 
        <th class="border" ng-repeat="(header, value) in sourceContent">{{header}}</th> 
       </tr> 
       <tr> 
        <td class="border" > 
         {{sourceContent.Classification[0]}} 
        </td> 
       </tr> 
    </table>

테이블 열 머리글을 설정할 수 있습니다. 그러나 내용을 설정하는 방법?

JSFiddle Link

출처

2014-05-17 iCode

JSON의 구조를 변경하면됩니다. N 개의 병렬 배열 배열 대신에 하나의 객체 배열 (각 객체는 분류, 설명 등이 있습니다) –

당신이 응답의 소스를 제어 여부를 나도 몰라, 또는에서 그것을받은 후에 당신이 응답을 처리해야 할 수도 있습니다 :

{ 
    Requirements: [], 
    Description: [] 
}

[ 
    {Requirements: '', Description: ''}, 
    {Requirements: '', Description: ''}, 
    { ... } 
]

에

이 시점에서 ngRepeat를 사용하여 테이블을 쉽게 채울 수 있습니다.)하지만이 방법 아이디어를 제공 희망, 나는 위의 코드를합니다 (SO 편집기에서 쓴) 테스트하지 않았습니다

var responseArray = []; 
for (var key in response) { 
    var keyArray = response[key]; 
    for (var i = 0; i < keyArray.length; i++) { 
     if (responseArray.length - 1 < i) { 
     var obj = {}; 
     obj[key] = keyArray[i]; 
     responseArray.push(obj); 
     } else { 
     var responseElement = responseArray[i]; 
     responseElement[key] = keyArray[i]; 
     } 
    } 
}

: 일부 샘플 코드는 두 번째로 첫 번째로 변환 할 수

전환을 구현합니다.

출처

2014-05-17 05:41:55 Mutahhir

고마워요. 이것은 효과가 있었다. 이 코드를 사용하여 형식으로 변환 한 다음이 대답을 사용하여 http://stackoverflow.com/a/22878132/2189617 표에 표시하십시오. – iCode

AngularJS를 사용하여 동적 JSON 배열 표시

답변

관련 문제