我不知道为什么我的json不会生成HTML

Question

我认为我有语法问题，但我不知道为什么我的图像没有出现。这件事对你来说有什么不妥。

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

Demo on jsfiddle.

完整代码：

标记：

<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

根据评论更新：

问题是您使用的是document.getElementById，但有问题的元素有一个类，而不是id。只需将<div class="thumb">更改为<div id="thumb">。

我会更新您的问题以包含相关代码并链接到jsfiddle。

旧答案（有一些有用的注释）

虽然您的JSON有错误，但它们并不会阻止html生效。我通过将图像添加到页面来测试它：document.body.innerHTML = txt.characters[0].thumbn;

关于你的json，你在html本身中有不必要的逗号和转义。这更清洁：

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

Live demo here (click).

我认为更好的做法是简单地将img url（src）存储在json中，然后像这样生成html：

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\"\/>"}
    ]
};

以下是您的工作脚本：http://jsfiddle.net/mn9LV/3/

您收到了错误消息：<div class="thumb">而不是<div id="thumb">

Answer 3

在../ tiles.jpg \“/＆gt;”

之后不应该有额外的逗号

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