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命令吗？我没有得到完整的语法，也不知道我应该填写哪些内容和哪个密钥。

$.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）并创建适当的模板（以呈现它）。

JSON将数据加载到列表中

1 个答案: