createElement 循环未完成

Question

如果照片数据与艺术家 ID 相对应，我有一个构建 DOM 个元素（照片卡）的循环。

我遇到的问题是，在我的 JSON 文件中，有 10 张图像具有给定的艺术家 ID，但我的循环只为其中的 7 张创建卡片，而第 7 张只是空的。

有人知道为什么吗？

非常感谢。

这是我的 CodePen：https://codepen.io/enukeron/pen/poEyLXz

我的 HTML :

     <div class="photoGrid">  </div>
  </div>

我的 Javascript :

 const PhotographeID= 82;

var jsonFile =  {
  "media": [
    {
      "photographerId": 82,
      "image": "Fashion_Yellow_Beach.jpg",
      "likes": 62,
      "price": 55
    },
    {
      "photographerId": 82,
      "image": "Fashion_Urban_Jungle.jpg",
      "likes": 11,
      "price": 55
    },
    {
      "photographerId": 82,
      "image": "Fashion_Pattern_on_Pattern.jpg",
      "likes": 72,
      "price": 55
    },
    {
      "photographerId": 82,
      "image": "Event-_eddingGazebo.jpg",
      "likes": 69,
      "price": 55
    },
    {
      "photographerId": 82,
      "image": "Event_Sparklers.jpg",
      "likes": 2,
      "price": 55
    },
    {
      "photographerId": 82,
      "image": "Event_18thAnniversary.jpg",
      "likes": 33,
      "price": 55
    },
    {
      "photographerId": 82,
      "video": "Art_Wooden_Horse_Sculpture.mp4",
      "likes": 24,
      "price": 100
    },
    {
      "photographerId": 82,
      "image": "Art_Triangle_Man.jpg",
      "likes": 88,
      "price": 55
    },
    {
      "photographerId": 82,
      "image": "Art_Purple_light.jpg",
      "likes": 24,
      "price": 55
    },
    {
      "photographerId": 82,
      "image": "Art_Mine.jpg",
      "likes": 75,
      "price": 55
    }
  ]
}
  

const photoPrice= document.getElementById ('photoPrice');
const photoLikes= document.getElementById ('photoLikes');
const photoGrid  = document.getElementsByClassName('photoGrid')[0];
const heart=  document.getElementById('heart');
const imageCard  = document.getElementsByClassName('imageCard')[0];
  
function findMediaId(jsonFile, idToLookFor) {
  var media = jsonFile.media;
  for (var i = 0; i < media.length; i++) {
    if (media[i].photographerId == idToLookFor) {
          
      // Creating Dom Elements
      const imageCard = document.createElement('div');
      imageCard.classList.add('imageCard');
      photoGrid.appendChild(imageCard);
          
      const imageSection = document.createElement('div');
      imageSection.classList.add('imageSection');
      imageCard.appendChild(imageSection);
           
      const photoInfos = document.createElement('div');
      photoInfos.classList.add('photoInfos');
      imageCard.appendChild(photoInfos);   
          
      const photoName = document.createElement('div');
      photoName.classList.add('photoName');
      photoInfos.appendChild(photoName);   
          
      const photoPrice = document.createElement('div');
      photoPrice.classList.add('photoPrice');
      photoInfos.appendChild(photoPrice);
                   
      const photoLikes = document.createElement('input');
      photoLikes.classList.add('photoLikes');
      photoLikes.setAttribute("type", "number");
      photoLikes.readOnly = true;
      photoInfos.appendChild(photoLikes);        
          
      const heart = document.createElement('span');
      heart.classList.add('heart');
      photoInfos.appendChild(heart);   
          
      const faHeart= document.createElement('i');
      faHeart.classList.add('fa');
      faHeart.classList.add('fa-heart-o');
      faHeart.setAttribute("aria-hidden", "true" );
      faHeart.setAttribute("id", "faHeart");
      heart.appendChild(faHeart);
          
      //Setting textContents of cards          
      photoName.textContent =  (media[i].image.split('.')[0].split('_').slice(1).join(' ')); 
      photoPrice.textContent =  (media[i].price) + " $"; 
      photoLikes.setAttribute("value", media[i].likes );
                    // like button functions 
  
      heart.addEventListener('click', (event) => {
        if( heart.classList.contains("liked")){
          heart.innerHTML='<i class="fa fa-heart-o" aria-hidden="true"></i>';
          heart.classList.remove("liked");
      
          /*Removes 1 like */
          var value = parseInt(photoLikes.value, 10);
          value = isNaN(value) ? 0 : value;
          value--;
          photoLikes.value = value;  
        }
  
         else{
           heart.innerHTML='<i class="fa fa-heart" aria-hidden="true"></i>';                
           heart.classList.add("liked");
    
           /*adds 1 like */
           var value = parseInt(photoLikes.value, 10);
           value = isNaN(value) ? 0 : value;
           value++;
           photoLikes.value = value; 
         }
       }); 
     }  
  } 
} 
findMediaId(jsonFile, PhotographeID);

Answer 1

问题是条目：

{
      "photographerId": 82,
      "video": "Art_Wooden_Horse_Sculpture.mp4",
      "likes": 24,
      "price": 100
}

没有 image 属性，因此 Javascript 代码中断并出现错误：

pen.js:128 Uncaught TypeError: Cannot read property 'split' of undefined
    at findMediaId (pen.js:128)
    at pen.js:161

因为它希望 image 属性在以下位置运行：

(media[i].image.split('.')[0].split('_').slice(1).join(' '))

您可以轻松将该条目重写为：

{
      "photographerId": 82,
      "image": "Art_Wooden_Horse_Sculpture.jpg",
      "likes": 24,
      "price": 100
}

我已经能够使用 devtools 发现问题 console

createElement 循环未完成

createElement Loop doesn't complete

javascript

dom

loops

for-loop

createelement