Dynamically Populated JSON Heirarchy

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 является действительным, и начинают искать ошибки там, где код перестает работать правильно.

Надеюсь, это поможет!