CODEWITHSUNDEEP
javascriptjqueryhtmlarraysjson
JFFF
JFFF

Reputation: 989

Adding images to a JSon array

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

    }

    Upvotes: 0

    Views: 2989

    Answers (1)

    Ben
    Ben

    Reputation: 7597

    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.

    Upvotes: 1

    Related Questions