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

Question

第一次寻求帮助，所以如果我需要在特定部分展示自己，请指出！

正如标题中所述，我有一个 JSON 数据库，需要用它的内容填充网站。第一次尝试做这样的事情（还在学习JS）。这是预期结果的图像。如果您愿意，这就是 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>

我遇到的问题是：

1. 对于标签部分，每张卡没有相同数量的标签。我知道我需要一个嵌套循环来访问 JSON 数据中的嵌套数组。我尝试了一些东西，但没有完全管理或理解它是如何工作的，所以你们中的一个人可以帮助我并解释或向我展示吗？

2. 另外，我的 Items 循环的“for”部分一直有错误（无法读取未定义的属性“长度”），但我没有得到该错误，因为该属性是在上面定义的（var items = json.items;）

3. 我不能 100% 确定我的代码是正确的。像我一样编码，它会正确地创建每张卡及其子卡吗？（卡之间没有相同的类名会误导附加？并且正确设置了 aria-labels？）

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

Answer 1

https://jsfiddle.net/chille1987/s35qz4wf/JavaScriptconst jsonFile = {&nbsp;&nbsp; &nbsp; "photographers": [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "name": "jonna",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "id": 125,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "city": "paris",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "country": "UK",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "tags": ["portrait", "events", "travel", "animals"],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "tagline": "Doing my best",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "price": 400,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "portrait": "MimiKeel.jpg"&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;]};var cardsection = document.getElementsByClassName("cardsection")[0];var items = jsonFile;console.log(items.photographers.length);for(var i = 0; i < items.photographers.length; i++) {&nbsp;&nbsp;&nbsp; var card = document.createElement("div");&nbsp; card.classList.add('card');&nbsp; card.setAttribute("aria-label", "Photographe card");&nbsp; cardsection.appendChild(card);&nbsp;&nbsp;&nbsp; var photoandname = document.createElement("div");&nbsp; photoandname.classList.add('photoandname');&nbsp; photoandname.setAttribute("aria-label", "Profil photo and name section");&nbsp; photoandname.innerHTML = items.photographers[i].portrait;&nbsp; card.appendChild(photoandname);&nbsp;&nbsp;&nbsp; var profilphoto = document.createElement("img");&nbsp; profilphoto.src = items.photographers[i].portrait;&nbsp; profilphoto.alt = "Photographer's profil image";&nbsp; profilphoto.classList.add('profilphoto');&nbsp; photoandname.appendChild(profilphoto);&nbsp;&nbsp;&nbsp; var photographerName = document.createElement("H2");&nbsp; photographerName.classList.add('name');&nbsp; photographerName.textContent = items.photographers[i].name;&nbsp; photoandname.appendChild(photographerName);&nbsp;&nbsp;&nbsp; var informations = document.createElement("div");&nbsp; informations.classList.add('informations');&nbsp; card.appendChild(informations);&nbsp;&nbsp;&nbsp; var caption = document.createElement("p");&nbsp; caption.classList.add('caption');&nbsp; caption.textContent = items.photographers[i].tagline;&nbsp; informations.appendChild(caption);&nbsp;&nbsp;&nbsp; var price = document.createElement("p");&nbsp; price.classList.add('price');&nbsp; price.innerHTML = items.photographers[i].price;&nbsp;&nbsp; informations.appendChild(price);&nbsp;&nbsp;&nbsp; var tags = document.createElement("div");&nbsp; tags.classList.add('tags');&nbsp;&nbsp;&nbsp; &nbsp; var tagItems = items.photographers[i].tags;&nbsp; console.log(tagItems)&nbsp; for(var j = 0; j < tagItems.length; j++) {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; var tagButton = document.createElement('button');&nbsp; &nbsp; tagButton.classList.add('tagButton');&nbsp; &nbsp; tagButton.id = tagItems[j]; /*ID needs to be the tag itself for a further filter functionality*/&nbsp; &nbsp; tagButton.textContent = tagItems[j]; /*And setting the innerhtml of the button as the tag itself*/&nbsp; &nbsp; tags.appendChild(tagButton);&nbsp; }&nbsp; &nbsp;&nbsp; card.appendChild(tags);}

Answer 2

javascript 看起来相当不错（除了它应该是json.photographers，而不是json.items）。但为什么要直接跳入大型重型模型呢？尝试致力于"photographers"&nbsp;:&nbsp;[&nbsp;{&nbsp;"name"&nbsp;:&nbsp;"jonna"&nbsp;}&nbsp;]从小处开始，确保您的代码有效，然后进行扩展。迈出一小步，就能完成更多事情。