Question

我想在html页面上显示我的json文件中的图像并将它们组织成3或4行。下面是我想要我的页面的布局示例但这是硬编码的，我已经包含图像因为我有难以粘贴代码（我可以把它放在小提琴手上）不要介意一些p标签所需的单词下面的一些单词：

HTML：

<div id="container"> 
<div class="row"> 
<div class="product-container"> </div> 
<div class="col-sm-4"> 
<img src="Image/iphone5.jpg" alt="StrappyMeshInsertDress" style="width:200px;height:250px"> 
<p><span> class="bold">Iphone5s</span><br /> 
</div>

以下是我的json文件中的剪辑：

json data

我正在使用此脚本来调用数据，尽管它还没有调用json文件：

the script

我在这样的硬编码时定位了图像：

我已经在这一天工作了一天而无法让它工作，如果有人对如何让它工作有任何想法我会非常感激。

亲切的问候！

Answer 1

请确保您动态添加JSON数据，因此请删除HTML内容，或者只创建一个包含所有此输出数据的父容器。使用名称＆＃39; iproducts.json＆＃39创建一个JSON文件;在同一条路上。

$.getJSON('iproducts.json',function(products){
        var output=" <table border='1'><thead><th>Product_id</th><th>Info</th><th>Imgpath</th><th>Price</th><tbody>";
$.each(products.appleitems,function(index,value){
 output+="<tr><td>"  + value.Product_id + "</td><td></td></td><td>" + value.Information+"</td><td>"+"<img src ='images/" + value.Imgpath + ".jpg' alt='applepro' id='appleinf'" + value.Price +"</td><td>"
});

output+="</tbody></table>";
console.log("output =" + output);

调用和json文件并在html上显示它

1 个答案: