I don't know why my json isn't generating as HTML

Question

I think I have a syntax issue but I have no idea as far as why my image isn't showing up. Does anything look wrong in this to you.

var txt = {
    "characters": [
        {"thumbn":"<img src=\"http:\/\/galnova.com\/nu_images\/tiled.jpg\"\/>",},
    ]
};

Demo on jsfiddle.

Full code:

Markup:

<div id="char">
    <div class="thumb"></div>
    Name: <span id="fname"></span></br>
    Species: <span id="spec"></span></br>
    Occupation: <span id="occu"></span></br>
    Cider: <span id="cid"></span></br>
    Description: <span id="desc"></span></br>
    Bio: <span id="bio"></span></br>
    Alliance: <span id="alli"></span><br>
</div> 

JavaScript:

function byId (id) {
    return document.getElementById(id);
}

var obj = {
    "characters": [
        {
            "thumbn":"<img src=\"http://galnova.com/nu_images/tiled.jpg\"/>"
            "fullName":"John Doe"
            "speci":"human male"
            "occup":"Web Personality"
            "cide":"Sleeper"
            "descr":"blah"
            "biog":"blarg"
            "allia":"chaos good"}
        {
            "fullName": "Jane Doe"
            "speci":"human female"
            "occup": "Movie Producer"
            "cide":"Citric"
            "descr":"bluh"
            "biog":"blurg"
            "allia":"neutral"}
        {
            "fullName": "Canter Doma"
            "speci":"alienmale"
            "occup": "Chef"
            "cide":"Galv"
            "descr":"bleh"
            "biog":"blerg"
            "allia":"evil"
        }
    ]
};

//var obj = txt;
byId("thumb").innerHTML = obj.characters[0].thumbn;
byId("fname").innerHTML = obj.characters[0].fullName;
byId("spec").innerHTML = obj.characters[0].speci;
byId("occu").innerHTML = obj.characters[0].occup;
byId("cid").innerHTML = obj.characters[0].cide;
byId("desc").innerHTML = obj.characters[0].descr;
byId("bio").innerHTML = obj.characters[0].biog;
byId("alli").innerHTML = obj.characters[0].allia;

Answer 1

Update based on comments:

The issue is that you are using document.getElementById , but the element in question has a class, not id. Simply change <div class="thumb"> to <div id="thumb"> .

I'll update your question to include the relevant code and link to jsfiddle.

Old Answer (has some helpful notes)

While your JSON has errors, they do not stop the html from being valid. I tested it by adding the image to the page with: document.body.innerHTML = txt.characters[0].thumbn;

Regarding your json, you have unnecessary commas and escaping in the html itself. This is cleaner:

var txt = {
  "characters": [
    {"thumbn":"<img src=\"http://galnova.com/nu_images/tiled.jpg\"/>"}
  ]
};

Live demo here (click).

I think the better practice would be to simply store the img url (src) in the json, and generate the html for it like this:

var txt = {
  "characters": [
    {"thumbn":"http://galnova.com/nu_images/tiled.jpg"}
  ]
};

var img = document.createElement('img');
img.src = txt.characters[0].thumbn;
document.body.appendChild(img);

Live demo (click).

Answer 2

var txt = {
    "characters": [
        {"thumbn":"<img src=\"http:\/\/galnova.com\/nu_images\/tiled.jpg\"\/>"}
    ]
};

And here is your working scripts: http://jsfiddle.net/mn9LV/3/

You had an error: <div class="thumb"> instead of <div id="thumb">

Answer 3

There shouldn't be extra comma after ../tiled.jpg\\"/>"

var txt = {
    "characters": [
        {"thumbn":"<img src=\"http:\/\/galnova.com\/nu_images\/tiled.jpg\"\/>"},
    ]
};