时间戳

首页 > 解决方案 > 如何在线获取逗号分隔的 JSON 数据？

javascript - 如何在线获取逗号分隔的 JSON 数据？

问题描述

我正在从如下所示的 API 中检索数据 -

"title": "Company Name",
"markets": "US, Asia",
"market_ids": "4, 5"

我需要将此数据添加到这样的下拉菜单中 -

<option value="4">US</option>

所以我需要删除逗号和任何重复项（同一市场会有很多条目）

一开始我是这么想的——

      $.ajax({
            method: 'GET',
            url: 'http://localhost:9001/api/directory',
        }).done(function (data, status, xhr) {
            let markets = [];
            $.each(data, function (index, value) {
                markets.push(value.markets);
        })
        markets = [...new Set(markets.toString().split(','))];

        for (market of markets) {
                $(".directory-input.market").append(
                    `<option value="" class="market-option">${market}</option>`)
            };
    });

这可以用逗号分隔市场名称并消除任何重复，但问题是我无法将市场 ID 添加到值中。我还需要可以访问市场 ID。

标签： javascriptjqueryajaxrest

解决方案

如果您可以控制 API 设计，例如

{
  title: 'Company Name',
  markets: [
    { id: 4, name: 'Asia' },
    { id: 4, name: 'US' }
  ]
}

将使使用更容易和更清晰。

虽然给出了这个例子，并做出了几个假设：

  1. 市场名称是独一无二的
  2. market_ids 的顺序与包括重复在内的市场相同

这应该工作

$
  .ajax({
    method: 'GET',
    url: 'http://localhost:9001/api/directory',
  })
  .done((data, status, xhr) => {
    const marketSelect = $(".directory-input.market");
    const labels = Array.from(new Set(data.markets.split(', ')));
    const ids = Array.from(new Set(data.market_ids.split(', ')));
    
    labels.forEach(
        (label, idx) => 
            marketSelect.append(`<option value="${ids[idx]}" class="market-option">${label}</option>`)
    );
  });

推荐阅读