createElement Loop doesn't complete

Question

I have a Loop that builds DOM elements (photo cards) if the photo data corresponds with an Artist ID.

The problem I have is that in my JSON file, there are 10 Images with the given Artiste ID, but my loop only creates cards for 7 of them, and the 7th one is just empty.

Does anyone know why?

Thanks a lot.

Here's my CodePen : https://codepen.io/enukeron/pen/poEyLXz

my HTML :

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

my 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

The problem is that the entry:

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

doesn't have the image attribute, so Javascript code breaks with error:

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

Because it expects the image attr to operate on:

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

You could easily rewrite that entry to:

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

I've been able to spot the problem by using the devtools console