如何处理API返回的逗号分隔JSON数据，生成绑定对应ID的去重下拉菜单

解决思路 #

你需要同步存储市场名称和对应ID的映射关系，不能只单独存市场名称数组。我们可以用对象做天然去重（对象的键具备唯一性），遍历API返回数据时同步配对市场名和ID，最后遍历映射关系生成带正确value的option即可。

修改后代码 #

$.ajax({
  method: 'GET',
  url: 'http://localhost:9001/api/directory',
}).done(function (data, status, xhr) {
  // 存储市场名和ID的映射，键为市场名自动去重
  const marketMap = {};
  $.each(data, function (index, item) {
    // 拆分市场名和ID数组，同时去除前后空格避免匹配异常
    const marketNames = item.markets.split(',').map(name => name.trim());
    const marketIds = item.market_ids.split(',').map(id => id.trim());
    // 按索引配对市场名和ID
    marketNames.forEach((name, idx) => {
      // 未重复的市场才存入映射
      if (!marketMap[name]) {
        marketMap[name] = marketIds[idx];
      }
    })
  })
  // 生成下拉选项
  Object.entries(marketMap).forEach(([marketName, marketId]) => {
    $(".directory-input.market").append(
      `<option value="${marketId}" class="market-option">${marketName}</option>`
    )
  })
});

注意事项 #

如果你的业务场景中存在同一个市场名对应不同ID的情况，可以自行调整去重逻辑：当前代码默认保留第一个出现的市场对应的ID，你可以根据需要改成覆盖保留最后出现的ID，只需要去掉if (!marketMap[name])的判断即可。

内容的提问来源于stack exchange，提问作者jfc