javascript - 如何将数字与香草JavaScript中的数组中的数字匹配？

Question

我正在 JS 5 中制作一个过滤器。

简而言之：Bubble 有 ids、attributes。我获取气泡 ID，并将其与对象数组匹配。如果气泡 id 与对象数组中的一个 id 匹配，我想显示对象信息/id。

用户单击气泡，我得到气泡 ID 并将其存储。

然后需要在对象/JSON 中比较气泡 ID，如果气泡 ID 与对象中的项目之一相同，则应显示对象 ID 及其信息。

到目前为止，我设法获得了 obj ID，以及我认为的数组中的数字，但这似乎不太正确。

我该如何解决这个问题，所以当我单击数字时，它与对象数组中的数字匹配，并采用适当的数字并显示该对象信息？

代码笔： https ://codepen.io/Aurelian/pen/xyVmgw ?editors=0010

JS代码：

var dataEquipmentList = [

   {
     "equipmentId": 16, 
     "equipmentTitle": "Horizontal Lifelines & Anchors",
     "equipmentMainBgImg": "https://www.yorkshirewildlifepark.com/wp-content/uploads/2016/06/lion-country-banner-1.jpg",

     "productList": [
         {  
            "rowId": 1,
            "toolList": [
               {
                   "toolPicture": "https://youtube.com/",
                   "toolName": "Tracoda",
                   "toolModelNumber": "ET 10",
                   "toolDescription": "Chest belt fitted",
                   "toolUrl": "https://google.com/"
                 },
                 {
                   "toolPicture": "https://youtube.com/",
                   "toolName": "Tracoda",
                   "toolModelNumber": "ET 10",
                   "toolDescription": "Chest belt fitted",
                   "toolUrl": "https://google.com/"
                 }
               ]
         },
         {  
            "rowId": 2,
            "toolList": [
               {
                   "toolPicture": "https://youtube.com/",
                   "toolName": "Tracoda",
                   "toolModelNumber": "ET 10",
                   "toolDescription": "Chest belt fitted",
                   "toolUrl": "https://google.com/"
                }
            ]
          }
      ]
   },
   {
      "equipmentId": 17, 
      "equipmentTitle": "DDDDD Lifelines & Anchors",
      "equipmentMainBgImg": "http://www.waterandnature.org/sites/default/files/styles/full/public/general/shutterstock_creative_travel_projects.jpg?itok=MsZg16JU",

      "productList": [
         {  
            "rowId": 1,
            "toolList": [
                {
                  "toolPicture": "https://youtube.com/",
                  "toolName": "Tracoda",
                  "toolModelNumber": "ET 10",
                  "toolDescription": "Chest belt fitted",
                  "toolUrl": "https://google.com/"
                },
                {
                  "toolPicture": "https://youtube.com/",
                  "toolName": "Tracoda",
                  "toolModelNumber": "ET 10",
                  "toolDescription": "Chest belt fitted",
                  "toolUrl": "https://google.com/"
                }
             ]
          },
         {  
            "rowId": 2,
            "toolList": [
               {
                   "toolPicture": "https://youtube.com/",
                   "toolName": "Tracoda",
                   "toolModelNumber": "ET 10",
                   "toolDescription": "Chest belt fitted",
                   "toolUrl": "https://google.com/"
               }
            ]
         }

      ]
   }
]

function getEquipmentIds() {
   for(var keys in dataEquipmentList) {
      var key = dataEquipmentList[keys];
   }
}

getEquipmentIds();


//////////
// Mindmap Code
//////////

function filterBubbles() {
   var equipmentList = document.querySelectorAll('.pt-bubble');

   equipmentList.forEach(function(item) {
      var equipmentId = item.getAttribute('data-equipment-id');

       item.addEventListener('click', function(){
            //console.log(equipmentId);

            for(var keys in dataEquipmentList) {
               var keyArray = [];
               var key = dataEquipmentList[keys].equipmentId;

              keyArray.push(keys);
               console.log(keyArray);

               for (var i=0; i < keyArray.length; i++) {        
                   if (equipmentId === keyArray[i]) {   
                       console.log(equipmentId + " It's a match with " + keyArray[0]);
                   }    
               }                
               //  if(equipmentId === keyArray) {
               //    console.log(equipmentId + "It's a match with " + key);
               // } else {
               //    console.log("else" + key);
               // }
            }  
       })        
   })
}
filterBubbles();

标签： javascriptecmascript-5

Answer 1

function getMatch(data, id) {
  // Returns the object that match with the ID
  return data[data.map(i=>i.equipmentId).indexOf(id)];
}
console.log(dataEquipmentList, 16);