Question

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


}
												

Answer 1

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.