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 命令吗？我没有完整的语法，也不知道应该填写什么 li 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）获取一个对象并创建适当的模板（来渲染它）。