我不知道为什么我的 json 没有生成为 HTML答案

【问题标题】：I don't know why my json isn't generating as HTML我不知道为什么我的 json 没有生成为 HTML
【发布时间】：2014-01-28 12:25:05
【问题描述】：

我认为我有语法问题，但我不知道为什么我的图像没有显示。你觉得这有什么不对吗？

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;

【问题讨论】：

您为什么希望它生成为 HTML？应该这样做的代码是什么？
不清楚你到底在问什么。 JSON 绝不是 HTML，尽管它可以包含 HTML。请投入更多时间来阐明您想知道的具体内容。
再次检查我的答案
如果您对某个答案表示赞赏，请不要忘记通过单击答案左侧投票箭头下方的复选标记来“接受”最佳答案。这也会奖励你一些声望点！如果稍后出现更好的答案，您可以切换到那个答案。如果您还没有参加 SO 之旅，请在此处查看：stackoverflow.com/tour

标签： javascript json var

【解决方案1】：

基于 cmets 的更新：

问题是您使用的是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).

【讨论】：

【解决方案2】：

../tiled.jpg\"/>" 后面不能有多余的逗号

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

【讨论】：

关闭}之后
jsfiddle.net/mn9LV/4 我把所有的逗号都去掉了，现在我在第 9 行遇到了一个错误，我不知道为什么。一切看起来都一样，但仍然没有生成
谢谢！感谢您抽出宝贵时间帮助我
知道如何同时生成页面上的每个对象吗？
我刚刚把它弄坏了。请帮忙。我试图制作所有的 ID 类，以便当我尝试在页面上放置多个时生成的 html 不会中断，现在它中断了。我做错了什么？ jsfiddle.net/mn9LV/5

【解决方案3】：

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

这是你的工作脚本：http://jsfiddle.net/mn9LV/3/

您有一个错误：<div class="thumb"> 而不是 <div id="thumb">

【讨论】：

@user3174713 你应该在帖子中包含这个链接。
正如我的回答所说：你有一个错误：<div class="thumb"> 而不是<div id="thumb">，所以我将class 更改为id