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

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.