JSON 목록에 데이터로드

Question

다음과 같은 json 구조가 있습니다. 이것은 지리적 좌표가있는 레스토랑 목록입니다.

{"Pizza Dach": { 
"Kategorie": "Swabian", 
"Position": { 
    "Longitude": 9.307256, 
    "Latitude": 48.741518 
} 
}, 
"Galeria Zeus": { 
"Kategorie": "Greek", 
"Position": { 
    "Longitude": 9.303788, 
    "Latitude": 48.74131 
    } 
} 
} 

이제 jquery 및 jquery mobile을 기반으로이 목록을 내 앱에 포함하고 싶습니다. 그래서이 목록을 보여줄 섹션이 있습니다.

<div data-role="page" id="restaurants"> 
<header data-role="header"> 
<h1>restaurants</h1> 
</header> 
<article data-role="content"> 
      <ul> 
      <!-- CONTENT WILL BE FILLED IN HERE DYNAMICALLY --> 
      </ul> 
     </article> 
    <footer data-role="footer" data-position="fixed"> 
<nav data-role="navbar"> 
<ul> 
      <li><a class="karte" href="#karte">Karte</a></li> 
      <li><a class="uebersicht" href="#restaurants">Liste</a></li> 
      <li><a class="optionen" href="#optionen">Optionen</a></li> 
</ul> 
</nav> 
</footer> 
    </div>  

이 구조에 대한 json 명령을 도와 줄 수 있습니까? 나는 전체 구문을하지 않고 나는를 입력해야하는지 리튬 ID와 어떤 키 모른다.

$.getJSON("data/restaurants.json", function(data) { 
var items = []; 
$.each(data, function(key, val) { 
items.push("<li id='" + key + "'>" + val + "</li>"); 
}); 
$("<ul/>", { 
"class": "my-new-list", 
html: items.join("") 
}).appendTo("#restaurants"); 
}); 

모든 도움이 감사합니다.

Answer 1

mustache.js library부터 까지 데이터를 렌더링 할 수 있습니다. 개체를 JSON에서 가져 와서 (렌더링하려면) 적절한 템플릿을 만들어야합니다.