如何让 JSON 对象在页面上生成 HTML

Question

这是我的 JSON

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> 只是不正确。

Answer 1

每次循环迭代都会覆盖您的 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;

Answer 2

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>" };

在innerHTML 之后添加一个+= 而不是=

Answer 3

试试这个：

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);