如何在jQuery的引导列中呈现来自JSON的数据对象(How to render data object from JSON in bootstrap columns in jQuery)

如何在jQuery的引导列中呈现来自JSON的数据对象(How to render data object from JSON in bootstrap columns in jQuery)

我怎样才能将对象从GET调用呈现给我的html，并将data包装在bootstrap col-*

试图把它渲染成这样的东西

<div class="col-sm-4"> <div class="thumbnail"> <img src="./assets/imgs/products/coke-medium.png" alt="..."> <div class="caption"> <p>Coke 500ml</p> <p> <b>£1.99</b> <a href="#" class="btn btn-success pull-right" role="button" onclick="addItem()">Add</a> </p> </div> </div> </div>

这是我的GET函数，但在foreach中它只给我最后一个项目名称。 还有更好的做法比我下面要做的更好吗？

function getDrinks() { $.get('./assets/products.json') .then(function (data) { console.log(data.drinks); var drinks = data.drinks; for (var i = 0; i < drinks.length; i++) { var element = drinks[i]; $('#drink_list').html('<div class="col-sm-4">' + element.name + '</div>'); } }) }

JSON示例 -

{ "drinks":[ { "name": "Coke", "liter": "500ml", "image": "/products/coke-medium.png" }, }

How can I render objects from GET call to my html and wrap the data in bootstrap col-*

Trying to rendering it to something like this

<div class="col-sm-4"> <div class="thumbnail"> <img src="./assets/imgs/products/coke-medium.png" alt="..."> <div class="caption"> <p>Coke 500ml</p> <p> <b>£1.99</b> <a href="#" class="btn btn-success pull-right" role="button" onclick="addItem()">Add</a> </p> </div> </div> </div>

This is my GET function, however in the foreach it's only giving me the last item name. Also is there a better way of doing this than what I'm trying to do below?

function getDrinks() { $.get('./assets/products.json') .then(function (data) { console.log(data.drinks); var drinks = data.drinks; for (var i = 0; i < drinks.length; i++) { var element = drinks[i]; $('#drink_list').html('<div class="col-sm-4">' + element.name + '</div>'); } }) }

JSON sample --

{ "drinks":[ { "name": "Coke", "liter": "500ml", "image": "/products/coke-medium.png" }, }

最满意答案

函数html替换了drink_list的内容。 你需要使用append http://api.jquery.com/append/

for (var i = 0; i < drinks.length; i++) { var element = drinks[i]; $('#drink_list').append('<div class="col-sm-4">' + element.name + '</div>'); }

the function html replace the content of drink_list. you need to use append http://api.jquery.com/append/

for (var i = 0; i < drinks.length; i++) { var element = drinks[i]; $('#drink_list').append('<div class="col-sm-4">' + element.name + '</div>'); }