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

Question

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

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

当第一个标签 JSON 数据集中存在第 2ns 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 玩: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 作为键存储在 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 搜索或数组过滤，并且非常高效

DEMO