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>我遇到的问题是：对于标签部分，每张卡没有相同数量的标签。我知道我需要一个嵌套循环来访问 JSON 数据中的嵌套数组。我尝试了一些东西，但没有完全管理或理解它是如何工作的，所以你们中的一个人可以帮助我并解释或向我展示吗？另外，我的 Items 循环的“for”部分一直有错误（无法读取未定义的属性“长度”），但我没有得到该错误，因为该属性是在上面定义的（var items = json.items;）我不能 100% 确定我的代码是正确的。像我一样编码，它会正确地创建每张卡及其子卡吗？（卡之间没有相同的类名会误导附加？并且正确设置了 aria-labels？）HTML 代码： <div class="cardsection"> </div>

Answer 1

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);

}

Answer 2

javascript 看起来相当不错（除了它应该是json.photographers，而不是json.items）。但为什么要直接跳入大型重型模型呢？尝试致力于

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

从小处开始，确保您的代码有效，然后进行扩展。迈出一小步，就能完成更多事情。