我无法让我的json在html中正确输出

时间:2014-01-10 05:21:03

标签: jquery json object

理想情况下,我希望并排显示多个对象,或者至少可以通过它们切换。主要问题是我想让阵列更灵活,不知道如何。例如,如果我想要100个对象,我想知道在页面上生成它们的最佳方法。

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

var txt = {
    "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",
            "fullon": "<img src=\"http:\/\/galnova.com\/nu_images\/ban_two.jpg\"\/>"
    },

    {
            "thumbn": "<img src=\"http://galnova.com/nu_images/tiled.jpg\"/>",
            "fullName": "Jane Doe",
            "speci": "human female",
            "occup": "Movie Producer",
            "cide": "Citric",
            "descr": "bluh",
            "biog": "blurg",
            "allia": "neutral",
            "fullon": "<img src=\"http:\/\/galnova.com\/nu_images\/tiled.jpg\"\/>"
    },

    {
            "thumbn": "<img src=\"http://galnova.com/nu_images/tiled.jpg\"/>",
            "fullName": "Canter Doma",
            "speci": "alienmale",
            "occup": "Chef",
            "cide": "Galv",
            "descr": "bleh",
            "biog": "blerg",
            "allia": "evil",
            "fullon": "<img src=\"http:\/\/galnova.com\/nu_images\/tiled.jpg\"\/>"
    }]
};

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

1 个答案:

答案 0 :(得分:0)

var obj=txt;

var thumbn, fullName, speci, occup, cide, descr, biog, allia, fullon;

thumbn, fullName, speci, occup, cide, descr, biog, allia, fullon = "";

for(var i = 0,l = obj.length; i<l;i++) {
   thumbn = thumbn + " " + obj.characters[i].thumbn;
   fullName = fullName + " " + obj.characters[i].fullName;
   speci= speci + " " + obj.characters[i].speci;
   occup= occup + " " + obj.characters[i].occup;
   cide= cide + " " + obj.characters[i].cide;
   descr= descr + " " + obj.characters[i].descr;
   biog= biog + " " + obj.characters[i].biog;
   allia= allia + " " + obj.characters[i].allia;
   fullon= fullon + " " + obj.characters[i].fullon;

}


byId("thumb").innerHTML = thumbn;
byId("fname").innerHTML = fullName;
byId("spec").innerHTML = speci;
byId("occu").innerHTML = occup;
byId("cid").innerHTML = cide;
byId("desc").innerHTML = descr;
byId("bio").innerHTML = biog;
byId("alli").innerHTML = allia;
byId("char").innerHTML = fullon;