在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;
    }
    });

演示