在JavaScript中查找两个JSON数组之间匹配的JSON项，并将CSS应用于UL列表中的匹配项

Find matching JSON items between 2 JSON arrays in JavaScript and apply CSS to matching items in a UL list

本文关键字：JSON CSS 列表 UL 应用于 并将 数组 查找 JavaScript 两个 之间      更新时间：2023-09-26

使用JavaScript，我需要获取一个JSON数组的标签项，并从JSON数据生成一个HTML UL列表的所有标签。

接下来，我有一个标签的第二个JSON数据集，我需要在第一个标签JSON数据中查找，并找到2组标签之间的每个匹配项。

当2ns JSON数据集中的标签存在于第一个标签JSON数据集中时，我需要将一个CSS类添加到我从每个匹配标签上的第一个标签数据生成的UL列表

第一个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 play with: 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);
    });
});

假设ID是唯一需要比较的属性....从第二个数组开始，在迭代时将每个id作为键存储在hashmap对象中，然后在迭代第一个数组时检查它是否存在并相应地添加类

$(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搜索或数组过滤，并且非常高效

演示

将以下代码添加到第二个循环中:

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

您可以尝试使用自定义函数从第一个数组中过滤匹配的元素。如果元素匹配，则添加一个类。

这段代码可能有用

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

相关文章：