Javascript createElement循环不'；不完整

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

我的问题是，在我的JSON文件中，有10个图像具有给定的艺人ID，但我的循环仅为其中7个创建卡片，而第7个是空的

有人知道为什么吗

非常感谢

这是我的密码笔：

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

常数id=82；
var jsonFile={
“媒体”：[
{
“摄影师”：82，
“图片”：“Fashion_Yellow_Beach.jpg”，
“喜欢”：62，
“价格”：55
},
{
“摄影师”：82，
“图片”：“Fashion\u Urban\u Jungle.jpg”，
“喜欢”：11，
“价格”：55
},
{
“摄影师”：82，
“图片”：“Fashion_Pattern_on_Pattern.jpg”，
“喜欢”：72，
“价格”：55
},
{
“摄影师”：82，
“图片”：“事件-_eddingGazebo.jpg”，
“喜欢”：69，
“价格”：55
},
{
“摄影师”：82，
“图片”：“Event_sparkers.jpg”，
“喜欢”：2，
“价格”：55
},
{
“摄影师”：82，
“图像”：“Eventthanniversary.jpg”，
“喜欢”：33，
“价格”：55
},
{
“摄影师”：82，
“视频”：“艺术·木雕·马雕·mp4”，
“喜欢”：24，
“价格”：100
},
{
“摄影师”：82，
“图片”：“Art_Triangle_Man.jpg”，
“喜欢”：88，
“价格”：55
},
{
“摄影师”：82，
“图像”：“Art_Purple_light.jpg”，
“喜欢”：24，
“价格”：55
},
{
“摄影师”：82，
“图片”：“Art_Mine.jpg”，
“喜欢”：75，
“价格”：55
}
]
}
const photoPrice=document.getElementById（'photoPrice'）；
const photoLikes=document.getElementById（'photoLikes'）；
const photoGrid=document.getElementsByClassName（'photoGrid'）[0]；
const heart=document.getElementById（'heart'）；
常量imageCard=document.getElementsByCassName（'imageCard'）[0]；
函数findMediaId（jsonFile，idToLookFor）{
var media=jsonFile.media；
对于（变量i=0；i{
if（heart.classList.contains（“喜欢”））{
heart.innerHTML=''；
heart.classList.remove（“喜欢”）；
/*删除1个相似项*/
var值=parseInt（1.value，10）；
值=isNaN（值）？0：值；
价值--；
价值=价值；
}
否则{
heart.innerHTML=''；
heart.classList.add（“喜欢”）；
/*添加1个like*/
var值=parseInt（1.value，10）；
值=isNaN（值）？0：值；
值++；
价值=价值；
}
}); 
}  
} 
} 
findMediaId（jsonFile，摄影师ID）；

问题在于条目：

{
“摄影师”：82，
“视频”：“艺术·木雕·马雕·mp4”，
“喜欢”：24，
“价格”：100
}

没有

image

属性，因此Javascript代码会出现错误：

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

因为它期望

图像

attr对以下对象进行操作：

（媒体[i].image.split（'.'）[0].split（''.'）.slice（1）.join（''）

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

{
“摄影师”：82，
“图像”：“艺术·木雕·马雕·jpg”，
“喜欢”：24，
“价格”：100
}

---

我已经能够通过使用devtools

控制台发现问题了

非常感谢，没有注意到里面有MP4！我需要保持JSON数据不变，不能更改。因为我也应该使用工厂模式的方法，用图像本身或从视频中提取的图像填充图像部分。所以我想我会把photoName设置为相同的工厂模式。现在只需要了解tf工厂模式是如何工作的：（非常感谢！