JavaScript：修改 DOM 并用 JSON 数据填充它

Question

第一次求助，如果需要在特定的部分展示自己，请指出！

如标题所述，我有一个 JSON 数据库，需要用它的内容填充网站。这是第一次尝试做这样的事情（还在学习 JS）。这是一个image of the expected result。如果您愿意，这是 HTML:

中的预期输出

<div class="cardsection">
  <div class="card"> 
    <div class= "photoandname">
      <div class="profilphoto">
      </div>
      <h2 class="name"> </h2>
    </div>
    <div class="informations">
      <h3 class="location"> </h3>
      <p class="caption"> </p>
      <p class="price"> </p>
    </div>
    <div class="tags">
      <button class="tagButton"> </button>
      <button class="tagButton"> </button>
     </div>
  </div>
</div>

我遇到的问题是：

对于标签部分，每张卡片的标签数量不同。我知道我需要一个嵌套循环来访问 JSON 数据中的嵌套数组。我尝试了一些东西，但没有完全掌握，也没有理解它是如何工作的，所以你们中的一个人可以帮我解释一下或给我看吗？
此外，我的 Items 循环的“for”部分一直有错误（无法读取未定义的属性 'length'），我没有得到属性定义在上面 (var items = json.items;)
我不能 100% 确定我的代码是否正确。像我一样编码，它是否会使用 children 正确创建每张卡片？（卡片之间没有相同的类名会误导附加？并且 aria-labels 设置正确？）

HTML 代码： <div class="cardsection"> </div>

JS代码：

var json = {
  "photographers": [
    {
      "name": "jonna",
      "id": 125,
      "city": "paris",
      "country": "UK",
      "tags": ["portrait", "events", "travel", "animals"],
      "tagline": "Doing my best",
      "price": 400,
      "portrait": "MimiKeel.jpg"
    }
    ]};
    

var cardsection = document.getElementsByClassName("cardsection")[0];

var items = json.items;
for(var i = 0; i < items.length; i++) {
  
var cards = document.createElement("div");
  cards.classList.add('card');
    cards.setAttribute("aria-label", "Photographe card");
  cardsection.appendChild(cards);
  
var photoandname = document.createElement("div");
  photoandname.classList.add('photoandname');
  photoandname.setAttribute("aria-label", "Profil photo and name section");
  photoandname.innerHTML = items[i].portrait;
  cards.appendChild(photoandname);
  
   //ariel and alt to check

 var profilphoto = document.createElement("img");
 profilphoto.src = items[i].portrait;
 profilphoto.alt = "Photographer's profil image";
 profilphoto.classList.add('profilphoto');
 profilphoto.innerHTML 
 photoandname.appendChild(profilphoto);
  
  var name = document.createElement("h2");
  name.classList.add('name');
  name.innerHTML = items[i].name;
  divphotoname.appendChild(name);
  
  var informations = document.createElement("div");
  informations.classList.add('informations');
  card.appendChild(informations);
  
    var location = document.createElement("h3");
  location.classList.add('location');
  location.innerHTML = items[i].city + items[i].country;
  informations.appendChild(location);
  
      var caption = document.createElement("p");
  caption.classList.add('caption');
  caption.innerHTML = items[i].tagline;
  informations.appendChild(caption);
  
        var price = document.createElement("p");
  price.classList.add('price');
  price.innerHTML = items[i].price; 
  informations.appendChild(price);
  
          var tags = document.createElement("div");
  tags.classList.add('tags');
  
 var tagItems = json.items[i].tags;
for(var j = 0; j < tagItems.length; j++) {
  var tagButton = document.createElement(button);
  tagButton.classList.add('tagButton');
  tagButton.id = tagItems[j]; /*ID needs to be the tag itself for a further filter functionality*/
  tagButton.innerHTML = tagItems[j]; /*And setting the innerhtml of the button as the tag itself*/
  tags.appendChild(tagButton);
  
}   
  card.appendChild(tags); 
}

感谢您给我的任何帮助和建议

Answer 1

javascript 看起来不错（只是应该是 json.photographers，而不是 json.items）。但为什么要直接跳进大而重的模型呢？尝试

"photographers" : [ { "name" : "jonna" } ]

从小处着手，确保您的代码有效，然后再扩展。一步一步完成更多事情。

Answer 2

https://jsfiddle.net/chille1987/s35qz4wf/

Javascript

const jsonFile = { 
    "photographers": [
        {
            "name": "jonna",
            "id": 125,
            "city": "paris",
            "country": "UK",
            "tags": ["portrait", "events", "travel", "animals"],
            "tagline": "Doing my best",
            "price": 400,
            "portrait": "MimiKeel.jpg"
        }
     ]
};


var cardsection = document.getElementsByClassName("cardsection")[0];

var items = jsonFile;
console.log(items.photographers.length);

for(var i = 0; i < items.photographers.length; i++) {
  
  var card = document.createElement("div");
  card.classList.add('card');
  card.setAttribute("aria-label", "Photographe card");
  cardsection.appendChild(card);
  
  var photoandname = document.createElement("div");
  photoandname.classList.add('photoandname');
  photoandname.setAttribute("aria-label", "Profil photo and name section");
  photoandname.innerHTML = items.photographers[i].portrait;
  card.appendChild(photoandname);
  
  var profilphoto = document.createElement("img");
  profilphoto.src = items.photographers[i].portrait;
  profilphoto.alt = "Photographer's profil image";
  profilphoto.classList.add('profilphoto');
  photoandname.appendChild(profilphoto);
  
  var photographerName = document.createElement("H2");
  photographerName.classList.add('name');
  photographerName.textContent = items.photographers[i].name;
  photoandname.appendChild(photographerName);
  
  var informations = document.createElement("div");
  informations.classList.add('informations');
  card.appendChild(informations);
  
  var caption = document.createElement("p");
  caption.classList.add('caption');
  caption.textContent = items.photographers[i].tagline;
  informations.appendChild(caption);
  
  var price = document.createElement("p");
  price.classList.add('price');
  price.innerHTML = items.photographers[i].price; 
  informations.appendChild(price);
  
  var tags = document.createElement("div");
  tags.classList.add('tags');
  
    var tagItems = items.photographers[i].tags;
  console.log(tagItems)
  for(var j = 0; j < tagItems.length; j++) {
    
    var tagButton = document.createElement('button');
    tagButton.classList.add('tagButton');
    tagButton.id = tagItems[j]; /*ID needs to be the tag itself for a further filter functionality*/
    tagButton.textContent = tagItems[j]; /*And setting the innerhtml of the button as the tag itself*/
    tags.appendChild(tagButton);

  }   
  card.appendChild(tags);
}

JavaScript：修改 DOM 并用 JSON 数据填充它

JavaScript: Modifying DOM and populating it with JSON data

javascript

json

dom

nested-loops

multidimensional-array