我如何做一個JSON對象生成HTML頁面

這裏的是我的JSON我如何做一個JSON對象生成HTML頁面

var gal = [ 
    { 
    "folder":"nu_images", 
    "pic":"gd_42.jpg", 
    "boxclass":"pirobox_gall", 
    "alt":"Rand Poster 1", 
    "title":"Rand Poster 1", 
    "thfolder":"th", 
    "thumbpic":"th_gd_42.jpg" 
    }, 
    { 
    "folder":"nu_images", 
    "pic":"gd_13.jpg", 
    "boxclass":"pirobox_gall", 
    "alt":"Explosive Pixel Design", 
    "title":"Explosive Pixel Design", 
    "thfolder":"th", 
    "thumbpic":"th_gd_13.jpg" 
    } 
];

，這裏是我的for循環

for (i = 0; i < gal.length; i++) { 
    document.getElementById("gallery").innerHTML = "<a href=\"" + "http:\/\/galnova.com\/" + gal[i].folder + "\/" + gal[i].pic + "\"" + "rel=\"gallery\"" + "class=\"" + gal[i].boxclass + "\"" + "title=\"" + gal[i].title + "\">" + "<img src=\"" + "http:\/\/galnova.com\/" + gal[i].folder + "\/" + "th\/" + gal[i].thumbpic + "\"" + "border=\"0\"" + "alt=\"" + gal[i].alt + "\"" + "title=\"" + gal[i].title + "\"\/>" + "</a>" 
};

我試圖讓我的JSON顯示所有的HTML中的對象依次排列。我可以讓它顯示第一個或我放入數組的任何數字，但我不知道如何使它生成它們的列表。

這裏是我的jsfiddle的鏈接。任何幫助你可以提供將不勝感激。

http://jsfiddle.net/o7cuxyhb/10/

它正在這裏產生<p id="gallery"></p>只是不正確。

來源

2014-10-07 riotgear

這不是JSON。它只是一個javascript數組文字。 – 2014-10-07 19:17:06

你重寫你的HTML與每一個循環迭代：

document.getElementById("gallery").innerHTML = ... 
              ^---

也許你想要的東西更像

document.getElementById("gallery").innerHTML += ... 
              ^---

將串聯原始的HTML內容與你的新東西。

從技術上講，你不應該在循環中這樣做。如果更改.innerHTML，那麼每次更改.innerHTML時都會重新渲染/重新渲染文檔，在循環中執行此操作會變得非常昂貴。您應該將您的html構建爲純字符串，然後將其添加到dom中。

例如

var str = ''; 
    foreach(...) { 
     str += 'new html here'; 
    } 
    document.getElementById("gallery").innerHTML += str;

來源

2014-10-07 19:09:06

非常感謝。這工作效率更高，我希望！ http://jsfiddle.net/o7cuxyhb/17/謝謝大家。 – riotgear 2014-10-07 19:22:13

for (i = 0; i < gal.length; i++) { 
document.getElementById("gallery").innerHTML += "<a href=\"" + "http:\/\/galnova.com\/" + gal[i].folder + "\/" + gal[i].pic + "\"" + "rel=\"gallery\"" + "class=\"" + gal[i].boxclass + "\"" + "title=\"" + gal[i].title + "\">" + "<img src=\"" + "http:\/\/galnova.com\/" + gal[i].folder + "\/" + "th\/" + gal[i].thumbpic + "\"" + "border=\"0\"" + "alt=\"" + gal[i].alt + "\"" + "title=\"" + gal[i].title + "\"\/>" + "</a>" };

添加的= A + =代替的innerHTML

來源

2014-10-07 19:11:14 mayankbatra

哦，我的天哪！我非常愛你們。我在這裏折磨自己，並一遍又一遍瘋狂地檢查這個語法。 + =誰知道!!!？ – riotgear 2014-10-07 19:14:11

後試試這個：

function displayJson(jsonArray){ 
    var container = document.getElementById("gallery"); 
    for (var i=0; i<jsonArray.length; i++){ 
    var newElement = document.createElement("a").innerHTML = jsonToHtml(jsonArray[i]) 
    container.appendChild(newElement); 
    } 
} 

function jsonToHtml(jsonObj){ 
//Define your dom object here 
var el = document.createElement("a").innerHTML = '' // you code here 
... 
return el; 
} 

displayJson(gal);

來源

2014-10-07 19:15:17 Beri

我如何做一個JSON對象生成HTML頁面

回答

相關問題