javascript - 动态填充 JSON 层次结构

Question

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

有人能看出我做错了什么吗？事实上，它仅填充迭代的第一项，之后不再填充。此外，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，我试图在应用样式之前让它工作。

Answer 1

您只需替换:

p.setAttributeNote(descClass); 

与:

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

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

希望对你有帮助!