将图像添加到 JSON 数组答案

【问题标题】：Adding images to a JSon array将图像添加到 JSON 数组
【发布时间】：2011-09-28 04:57:46
【问题描述】：

我有一个显示在 JQuery Mobile 列表中的 JSon 数组。它显示了描述 + 价格，但我想在左侧添加一个图片图标。

关于我如何实现这一点的任何指示？我可以为“品牌”添加图像标签吗？品牌是我希望图像显示的地方。

谢谢！

这是我的代码。

// Json array
var productList = {"products": [
    {"brand": "brand1", "description": "Product 1", "price": "03.25 "},
    {"brand": "brand2", "description": "Product 4", "price": "01.10 "},
    {"brand": "brand3", "description": "Product 3", "price": "04.21 "},
    {"brand": "brand4", "description": "Product 2", "price": "15.24 "},
    {"brand": "brand5", "description": "Product 5", "price": "01.52 "},
    {"brand": "brand6", "description": "Product 6", "price": "12.01 "},
    {"brand": "brand7", "description": "Product 7", "price": "05.24 "}

]
};

// Name Descending

function loadList() {

var list = $("#productList").listview();


var prods = productList.products.sort(function(a, b) {return a.description > b.description;});
$.each(prods, function() {
    list.append("
" + this.description + "  :       " + this.price + "");
});

// CALL SORT BY NAME DESCENDING
$(function(){


$("#sort-list").click(loadList2);
  });

$(list).listview("refresh");

}

【问题讨论】：

不清楚你在这里问什么；我的意思是，如果您愿意，当然可以添加图像。您遇到的具体问题是什么？
我只是不确定如何将图像添加到我的列表中，仅此而已。我想要一张图片，而不是文字品牌。
你可以把 URL 放在那里，不是吗？只需在数组中的对象中拥有另一个属性，例如“img”，并将其值设为 URL。然后，当您构建列表时，您将包含一个带有该 URL 的 <img> 标记作为“src”属性。
我已经试过了。 {“品牌”：，“描述”：“产品 1”，“价格”：“03.25”}，不起作用 = /

标签： javascript jquery html arrays json

【解决方案1】：

您正在写出从 JSON 数组派生的 HTML 列表。所以，一个实现你想要的建议：

修改生成的 JSON，以便您提供相关图片的 URI，而不是您目前在其中的 brand 文本
修改loadList() 函数，以便将img 标记作为HTML 的一部分，使用从JSON 传入的URI 作为该图像标记的src 属性。

【讨论】：

因此，如果我做对了，它将类似于 var productList = {"products": [ {"brand": "", "description": "Product 1", "price": "03.25"}，在我的函数 list.append("
"+ this.images/album-bb.jpg + this.description + " : " + this.price + "

您不需要 JSON 中图像的整个 HTML 片段——让你的代码在写出列表时这样做——只需要图像路径。此外，您正在将图像路径写入对象元素brand，因此在输出时参考它。您提供的代码不起作用。