动态填充 JSON 层次结构答案

【问题标题】：Dynamically Populated JSON Heirarchy动态填充 JSON 层次结构
【发布时间】：2015-12-10 21:02:12
【问题描述】：

我正在尝试创建一个使用 JSON 动态填充标题、图像和描述的 div 元素。当每个整个元素只有这三个元素时，我就让它工作了，但后来我想为三个小元素中的每一个添加一些属性。

谁能看到我做错了什么？事实上，它只填充迭代的第一项，之后不再填充。此外，p 标记的类属性没有填充，甚至未定义。

我对 JSON 非常陌生，请在这里帮助我 =) 我确定有些东西我打错了或没有仔细考虑，但我很难过。

项目：

    var json = {
        "items": [

     /* Item One */
     {
         "title": 
          {
             "text": "Title",
             "class": "titleClass"
          }
         ,

         "image": 
          {
             "src": "imgs/mail.png",
             "class": "imageClass"
          }
         ,

         "description": 
             {
             "text": "Author",
             "class": "authorClass"
             }
         ,
     },


     /* Item Two */
     {
         "title": 
             {
            "text": "Title2",
            "class": "titleClass"
             }
         ,

         "image": 
             {
             "src": "img/money.png",
             "class": "imageClass"
             }
         ,

         "description": 
             {
            "text": "Author2",
            "class": "authorClass"
             }
         ,}]};

迭代项目的代码：

    var news = document.getElementsByClassName("item-container")[0];
    var items = json.items;
    for (var i = 0; i < items.length; i++) {

        /* Title */
        var h2 = document.createElement("h2");
        h2.innerHTML = items[i].title.text;
        news.appendChild(h2);

            /* Class */
            var titleClass = document.createAttribute('class');
            titleClass.value = items[i].title.class;
            h2.setAttributeNode(titleClass);                

        /* Image */
        var img = document.createElement("img");
        var src = document.createAttribute('src');
        src.value = items[i].image.src;
        img.setAttributeNode(src);
        news.appendChild(img);

            /* Class */    
            var imageClass = document.createAttribute('class');
            imageClass.value = items[i].image.class;
            img.setAttributeNode(imageClass);

        /* Description */
        var p = document.createElement("p");
        p.innerHTML = items[i].description.text;
        news.appendChild(p);

            /* Class */
            var descClass = document.createAttribute('class');
            descClass.value = items[i].description.class;
            p.setAttributeNote(descClass);

    };

HTML：

            <div class="item-container">
            </div>

CSS：

目前还没有 CSS，我试图在应用样式之前让它工作。

【问题讨论】：

标签： javascript jquery json dynamic

【解决方案1】：

你只需要替换：

p.setAttributeNote(descClass);

与：

p.setAttributeNode(descClass); //"...Node" instead of "...Note"

当一个循环只迭代一次时，问问自己是否所有的 JS 代码都有效，并开始寻找代码停止正常工作的错误。

希望对你有帮助！

【讨论】：