在JavaScript中的2個JSON數組之間查找匹配的JSON項，並將CSS應用於UL列表中的匹配項

Question

使用JavaScript，我需要獲取一個Tag項目的JSON數組，並從該JSON數據生成所有標簽的HTML UL列表。

接下來，我有一個標簽的第二個JSON數據集，我需要在其中查找第一個標簽JSON數據，並找到兩組標簽之間的每個匹配項。

當第一個標簽JSON數據集中存在2ns JSON數據集中的標簽時，我需要向每個匹配標簽上的第一個標簽數據生成的UL列表中添加CSS類

第一個JSON標記數據集

var allTagsJson = [{
    "id": "1",
    "name": "Tag 1"
}, {
    "id": "2",
    "name": "Tag 2"
}, {
    "id": "3",
    "name": "Tag 3"
}, {
    "id": "4",
    "name": "Tag 4"
}, {
    "id": "5",
    "name": "Tag 5"
}];

第二個JSON標記數據集

    "id": "1",
    "name": "Tag 1"
}, {
    "id": "4",
    "name": "Tag 4"
}, {
    "id": "5",
    "name": "Tag 5"
}];

因此，在此樣本數據中，我的UL列表將具有：

• 標簽1
• 標簽2
• 標簽3
• 標簽4
• 標簽5

作為第二JSON數據集具有標簽1，圖4和5上面的列表將需要的CSS類添加active到標簽1，圖4和5

要使用的JSFiddle： https ：//jsfiddle.net/jasondavis/tm9fsyvb/

var listTagsJson = [{

// generate 2 UL lists from JSON Data
$(function() {
    var allTagsHtml = '';

    // this list needs to add CSS class active to each item that has a matching tag in the 2nd list of tags
    $.each(allTagsJson, function(index, val) {
        console.log(val.name);
        allTagsHtml += " <li><a href='#" + val.name + "'>" + val.name + "</a></li>";
        $('#all-tags').html(allTagsHtml);
    });

    var listTagsHtml = '';
    $.each(listTagsJson, function(index, val) {
        console.log(val.name);
        listTagsHtml += " <li><a href='#" + val.name + "'>" + val.name + "</a></li>";
        $('#list-tags').html(listTagsHtml);
    });

});

Answer 1

假設ID只是需要比較的屬性..從第二個數組開始，並在迭代時將每個ID作為鍵存儲在哈希映射對象中，然后在迭代第一個數組時檢查它是否存在，並相應地添加類

$(function() {
  // id object
  var listIds = {}

  var listTagsHtml = '';
  $.each(listTagsJson, function(index, val) {
    // add id to object
    listIds[val.id] = true;
    listTagsHtml += " <li><a href='#" + val.name + "'>" + val.name + "</a></li>";
  });

  var allTagsHtml = '';
  $.each(allTagsJson, function(index, val) { 
    // apply class based on id object
    var className = listIds[val.id] ? 'match' : '';
    allTagsHtml += " <li class='" + className + "'><a href='#" + val.name + "'>" + val.name + "</a></li>";
  });

  // note these don't belong inside the loops when using html string concatenation
  $('#all-tags').html(allTagsHtml);
  $('#list-tags').html(listTagsHtml);

});

這種方法不需要額外的dom搜索或數組過濾，並且非常有效

演示

Answer 2

將此代碼添加到第二個循環中：

$("#all-tags").find("li").each(function(){
       if($(this).find("a")[0].innerHTML == val.name){
            $(this).addClass("active");
       }
});

Answer 3

您可以嘗試使用自定義函數來過濾第一個數組中匹配的元素。 如果元素匹配，則添加一個類。

該代碼段可能有用

//Rest of code
var listTagsHtml = '';
    $.each(listTagsJson, function(index, val) {
        // A custom function to check for the matched element
        // if it matches it will return a string(a custom class)
        var myClass=matchJson(val.id)
        // adding that class to li

        listTagsHtml += " <li class='"+myClass+"'><a href='#" + val.name + "'>" + val.name + "</a></li>";
        $('#list-tags').html(listTagsHtml);
    });



    //a function to check if it matches
    function matchJson(id){
        // using array filter function
        var filteredArray = allTagsJson.filter(function(a,b){
        return a.id ===id;
      })
      var toReturn = ''
      if(filteredArray !== undefined){
        toReturn ='customClass';
      }
      return toReturn;
    }
    });

演示