将图像添加到JSon阵列 [英] Adding images to a JSon array

问题描述

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

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

谢谢！

这是我的代码。 p>

  // Json数组
 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， 价格：05.24} 
 
 
 
] 
}; 
 
 
 
 // Name Descending 
 
 
 
函数loadList（）{
  var list = $（＃ productList的）列表视图（）; 
  
 var prods = productList.products.sort（function（a，b）{return a.description> b.description;}）; 
 $ .each（prods，function（）{
 list.append（
+ this.description +：+ this.price +
）; 
 
 $ b 
  //调用按名字删除
 $（function（）{
  
 $（＃sort-list）。click（loadList2）; 
}）; 
 
 
 $（list）.listview（refresh）; 
  

}

解决方案 div>

你正在编写一个从JSON数组派生的HTML列表。所以，有一个建议可以实现你想要的功能：

1. 修改生成的JSON，以取代品牌您目前在那里的文本，您提供相关图片的URI


2. 修改 loadList（）函数，以便您使用从JSON传入的URI作为该图像标记的 src <>标记将 img 标记作为HTML的一部分写出/ code>属性。






I have a JSon array that displays in a JQuery Mobile list. It shows the description + price, but I'd like to add a picture Icon to the left.

Any pointers on how I could achieve that ? Can I add an image tag to the "brand" ? Brand is where I'd like the image to display.

Thanks !

Here's my code.

// 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");

}

解决方案

You're writing out an HTML list derived from a JSON array. So, one suggestion for achieving what you want:

1. Modify the JSON produced so that instead of the brand text you have in there at the moment, you provide the URI for the relevant image
2. Modify the loadList() function so that you write out an img tag as part of your HTML, using the URI passed-in from your JSON as that image tag's src attribute.

这篇关于将图像添加到JSon阵列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！