json을 중첩 된 HTML 목록 구조로 구문 분석하는 방법

Question

XML을 사용하여이 작업을 시도했지만 Firefox에서 IE 로의 동작이 이상합니다. 이전에 json에서 일한 적이 없으므로 도움을 주시면 감사하겠습니다. 에서 JSON을로드, 아래의 해결책을 시도

<div id="storeList"> 
    <ul> 
     <li> 
      <h3>State Name 1</h3> 
      <a href="storeurl" id="storeid">storename</a> 
      <a href="storeurl" id="storeid">storename</a> 
     </li> 
     <li> 
      <h3>State Name 2</h3> 
      <a href="storeurl" id="storeid">storename</a> 
     </li> 
    </ul> 
</div> 

업데이트 -

{ 
    "storeList":{ 
     "state":[ 
     { 
      "stateName":"Maine", 
      "store":[ 
       { 
        "storeName":"Store 1", 
        "storeID":"store1", 
        "storeURL":"http:\/\/www.sitename.com" 
       }, 
       { 
        "storeName":"Store 2", 
        "storeID":"store2", 
        "storeURL":"http:\/\/www.sitename.com" 
       }, 
       { 
        "storeName":"Store 3", 
        "storeID":"store3", 
        "storeURL":"http:\/\/www.sitename.com" 
       } 
      ] 
     }, 
     { 
      "stateName":"Connecticut", 
      "store":[ 
       { 
        "storeName":"Store 1", 
        "storeID":"store1", 
        "storeURL":"http:\/\/www.sitename.com" 
       } 
      ] 
     } 
     ] 
    } 
} 

내가 갈거야 구조 : 여기

내 JSON의 외부 파일이지만 객체가 정의되지 않았다는 오류가 발생합니다 :

여기

$(document).ready(function() { 
        var object; 
        $.getJSON('xml/storeList.json', function(json) { 
         object = json; 
        }); 


        $('#storeList').append('<ul/>') 
        $.each(object.storeList.state, function() { 
         var list = $('#storeList ul'), 
         listItem = $('<li/>'), 
         html = listItem.append($('<h3/>').text(this.stateName)); 

         $.each(this.store, function() { 
         listItem.append($('<a />').attr('href', this.storeURL).text(this.storeName)); 
         }); 

         list.append(html) 
        }); 
        }); 

Answer 1

6,은 간단한 예제 :

$('#storeList').append('<ul/>') 
$.each(object.storeList.state, function() { 
    var list = $('#storeList ul'), 
     listItem = $('<li/>'), 
     html = listItem.append($('<h3/>').text(this.stateName)); 

    $.each(this.store, function() { 
     listItem.append($('<a />').attr('href', this.storeURL).text(this.storeName)); 
    }); 

    list.append(html) 

}); 

Example

편집

var object; 
$.getJSON('xml/storeList.json', function(json) { 
    object = json; 
    $('#storeList').append('<ul/>') 
    $.each(object.storeList.state, function() { 
     var list = $('#storeList ul'), 
      listItem = $('<li/>'), 
      html = listItem.append($('<h3/>').text(this.stateName)); 

     $.each(this.store, function() { 
      listItem.append($('<a />').attr('href', this.storeURL).text(this.storeName)); 
     }); 

     list.append(html) 
    }); 
}); 

Answer 2

JSON은 중첩 된 객체를 허용 자바 스크립트의 부분 집합에 불과 객체 리터럴 표기법입니다 및/또는 어레이, s o 자바 스크립트 객체와 배열 데이터 구조에 대해 공부하고 싶을 것이다.

"맨손"json이 변수에 할당되면 "json"("json ="으로 시작하는 테스트)을 가정 해 봅시다. JSON을 다음과 같은 방식으로 시작할 수 있습니다. 당신이 배열에서와 같이 내 대답은 "순수"자바 스크립트입니다 ....

for (var i=0, n=json.storeList.state.length; i<n; i++) { 
    var state = json.storeList.state[i]; 
    console.log(state.stateName); //Maine, then Connecticut 
    for (var j=0, k=state.store.length; j<k; j++) { 
     var store = state.store[j]; //the object containing store name, id & URL 
     console.log(store.storeID); 
    } 
} 

PS jQuery를 사용하는 것이 아니라, 그래서 당신은 일을 JQuery와 방법을 수행하기 위해 최선을 다하고 있다면, 확실히 다른 답변을 고려 . 그러나 전환해야하는 경우를 대비하여 jQuery, ExtJS 등과 같은 다양한 프레임 워크의 배경에있는 Javascript 기반에 익숙해지는 것이 좋습니다.

Answer 3

jQuery의 $.each() 함수를 사용하여 객체 속성을 반복하고 배열을 반복하는 반복 표준을 사용합니다. http://jsfiddle.net/qZ6U4/

그리고 코드 :

var htmlStr = ''; 

$.each(myObj, function(i,v){ 
    htmlStr += '<div id="' + i + '">'; 
    $.each(v, function(i, v){ 
     htmlStr += '<ul>'; 
     for(var i = 0; i < v.length; i++){ 
      htmlStr += '<li><h3>' + v[i].stateName + '</h3>'; 
      for(var n = 0; n < v[i].store.length; n++){ 
       var store = v[i].store[n]; 
       htmlStr += '<a href="' + store.storeURL + '" id="' + store.storeID + '">' + store.storeName + '</a>'; 
      } 
      htmlStr += '</li>'; 
     } 
     htmlStr += '</ul>'; 
    }); 
    htmlStr += '</div>'; 
}); 

Answer 4

내가 템플릿 엔진을 사용

다음은 작업 예입니다. 템플릿 엔진을 사용하면 그렇게 (읽기 및 유지 관리가 용이하다) 템플릿을 정의 할 수 있습니다 : 당신의 사업부 채우기 위해

<script id="template" type="text/x-jquery-tmpl"> 
    <ul> 
     {{#each state}} 
     <li> 
      <h3>{{=stateName}}</h3> 
      {{#each store}} 
      <a href="{{=storeURL}}" id="{{=storeID}}">{{=storeName}}</a> 
      {{/each}} 
     </li> 
     {{/each}} 
    </ul> 
</script> 

을 다음 단순히

$("#storeList").html(
    $("#template").render(json.storeList) 
); 

전화

<div id="storeList"></div> 

나는 demo ready입니다. 여기에서 사용하는 템플릿 엔진은 JsRender입니다.