我無法讓我的json在html中正確輸出

Question

理想情況下，我希望並排顯示多個對象或至少有一種方法來切換它們。主要問題是我想讓陣列更靈活，不知道如何。例如，如果我想要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; 

Answer 1

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;