用于创建 DOM 元素的 For 循环中的 JSON“具有”方法答案

【问题标题】：JSON "has" method in a For loop creating DOM elements用于创建 DOM 元素的 For 循环中的 JSON“具有”方法
【发布时间】：2020-12-09 21:43:21
【问题描述】：

我正在制作一个基于 JSON 文件的灯箱。所以我有一个循环来识别 JSON 文件中具有选定 ID 的对象，然后制作与 JSON 文件中链接的照片一样多的幻灯片。

我需要显示的一些元素在"image": xxx.jpg 下，但对于其他元素，该对象没有图像作为名称值而是"video": xxxx.mp4 ，所以我正在尝试使用has 方法。

我的问题是控制台抛出“media[i] is not a function。我的想法是检查媒体中的 i 是否具有图像或视频值名称，并根据它创建适应的 DOM 元素。

该循环适用于其他 DOM 创建元素，我不需要使用 has 并且我经常使用 media[i].image 和类似的例如：`media[i].name or price etc 成功，但这是我第一次' m 使用has 方法。

谢谢大家

 const PhotographeID= 82; 

var jsonFile =  {
  "media": [
    {
      "photographerId": 82,
      "image": "Fashion_Yellow_Beach.jpg"
    },
    {
      "photographerId": 82,
      "image": "Event-_eddingGazebo.jpg"
    },
    {
      "photographerId": 82,
      "video": "Event_18thAnniversary.mp4"
    },
    {
      "photographerId": 82,
      "video": "Art_Wooden_Horse_Sculpture.mp4"
    }
  ]
}

const lightbox  = document.getElementById('Lightbox-content');

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 mySlides=  document.createElement('div');
     mySlides.classList.add('mySlides');
     mySlides.setAttribute("display", "none");
     lightbox.appendChild(mySlides);

     if ( media[i].has('image')) {
       const lightBoxImage =  document.createElement('img');
       lightBoxImage.src = "../FishEye_Photos\\Sample Photos\\" + media[i].photographerId + "\\" + media[i].image; 
       lightBoxImage.classList.add('lightBoxImage');
       mySlides.appendChild(lightBoxImage);
     }
     else if ( media[i].has('video'))  {
       const lightBoxVideo =  document.createElement('video');
       lightBoxVideo.src = "../FishEye_Photos\\Sample Photos\\" + media[i].photographerId + "\\" + media[i].video; 
       lightBoxVideo.classList.add('lightBoxVideo');
       mySlides.appendChild(lightBoxVideo);
     } 

     const slideText = document.createElement('p');
     slideText.classList.add('slideText');
     if ( media[i].has('image')) {
       slideText.textContent = media[i].image.split('.')[0].split('_').slice(1).join(' ');
     } 
     else if ( media[i].has('video'))  {
       slideText.textContent = media[i].video.split('.')[0].split('_').slice(1).join(' ');
     } 
     mySlides.appendChild(slideText);
    }
  }
}
findMediaId(jsonFile, PhotographeID);

<div id='Lightbox-content'>
  
</div>

【问题讨论】：

.has 应该是什么？ .hasOwnProperty()? .includes()?
首先，JSON是一种文本格式；它没有“方法”。其次，你提供了太多的代码，而关于你的测试输入的信息太少了。尝试将问题分解为minimal reproducible example。
错误信息很清楚。 has 不是函数。这是因为 DOM 对象上没有 has 方法。 has() 是 JQuery 中的一个方法。你认为has 应该做什么？
.has() 是 Sets 或 Maps 的一种方法。请改用.hasOwnProperty()。
@pilchard 是的，我知道，但既然你自己表示你在猜测，我只是说，让我们获取更多信息。在说明解决方案是什么之前从 OP 那里获得。

标签： javascript json for-loop dom

【解决方案1】：

.has() 是 Sets 或 Maps 的一种方法。改用.hasOwnProperty()：

hasOwnProperty() 方法返回一个布尔值，指示对象是否具有指定的属性作为它自己的属性（而不是继承它）。

— Mozilla JavaScript 参考

【讨论】：