How can I load an image from a JSON array in this script?

Question

I'm trying to figure out how to load an image from the web server for the array "logo" in this JS. Not a big JS wizard and can't work this one out.

The script dynamically populates table cells when detecting the change event "select" and writes those into different columns of the table. Just loading an image beats my head.

The entire code inc the table is up on myjsfiddle

var data = {
"details":
    {
    "info": [
        {
        "name": "Prod1",
        "logo": "P1 Logo",
        "d1": "Specs of this",
        "d2": "Some Details",
        "d3": "More text about this",
        "d4": "Even more details here",
        "rating": "3 stars"
        },
    {
        "name": "Prod2",
        "logo": "P2 Logo",
        "d1": "Specs here",
        "d2": "Details go here",
        "d3": "wow, more text",
        "d4": "Even more text and details",
        "rating": "1 stars"
        },
    {
        "name": "Prod3",
        "logo": "P3 Logo",
        "d1": "Specs and stuff",
        "d2": "Details or some other things",
        "d3": "More details go here wow",
        "d4": "Almost forgot - more here",
        "rating": "5 stars"
        },
    {
        "name": "Prod4",
        "logo": "P4 Logo",
        "d1": "Specs, stuff etc",
        "d2": "Some other things",
        "d3": "What should I say",
        "d4": "details go here wow",
        "rating": "4 stars"
        }
    ]}
};

$(".select").change(function() {
var jthis = $(this);
var whichCol;
if (jthis.hasClass("col2")) {
    whichCol = "col2";
} else if
    (jthis.hasClass("col3")) {
    whichCol = "col3";
} else if
(jthis.hasClass("col4")) {
    whichCol = "col4";
}
$.each(data.details.info, function(i, v) {
    if (v.name == jthis.val()) {
        $("td." + whichCol + ".name").html(v.name);
        $("td." + whichCol + ".logo").html(v.logo);
        $("td." + whichCol + ".d1").html(v.d1);
        $("td." + whichCol + ".d2").html(v.d2);
        $("td." + whichCol + ".d3").html(v.d3);
        $("td." + whichCol + ".d4").html(v.d4);
        $("td." + whichCol + ".rating").html(v.rating);
        return;
    }
});

});

Answer 1

Assuming v.logo is equal to path/to/logo.png , this should work:

$.each(data.details.info, function(i, v) {
    if (v.name == jthis.val()) {
        $("td." + whichCol + ".name").html(v.name);
        $("td." + whichCol + ".logo").html('<img src="' + v.logo + '" alt="' + v.name + '" />');
        $("td." + whichCol + ".d1").html(v.d1);
        $("td." + whichCol + ".d2").html(v.d2);
        $("td." + whichCol + ".d3").html(v.d3);
        $("td." + whichCol + ".d4").html(v.d4);
        $("td." + whichCol + ".rating").html(v.rating);
        return;
    }
});

Answer 2

In json object property logo should represent the url to reqired logo on the server. If you have url you can simply add img tag instead simple text.

Example:

$.each(data.details.info, function(i, v) {
if (v.name == jthis.val()) {
    $("td." + whichCol + ".name").html(v.name);
    $("td." + whichCol + ".logo").html("<img src='" + v.logo + "' />");
    $("td." + whichCol + ".d1").html(v.d1);
    $("td." + whichCol + ".d2").html(v.d2);
    $("td." + whichCol + ".d3").html(v.d3);
    $("td." + whichCol + ".d4").html(v.d4);
    $("td." + whichCol + ".rating").html(v.rating);
    return;
}
});

Here you can see edited version of your code.

Answer 3

You can add img element in your logo html

EDIT :

I've done it better like h2ooooooo sugested : http://jsfiddle.net/ddXYt/16/