How to get comma separated JSON data on its on line?

I am retrieving data from an API that looks like this –

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

I need to add this data to a dropdown menu like this –

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

So I need to remove the commas and any duplicates (there will be many entries with the same market)

I was thinking something like this at first –

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

        for (market of markets) {
                    `<option value="" class="market-option">${market}</option>`)

This works to separate the market names by comma and get rid of any duplicates, but the problem is that I can’t add the market ID to the value. I need the market ID to be accessible as well.


If you have control of the API design, something like

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

would make usage easier and more clear.

Given the example though, and making a couple assumptions:

  1. market names are unique
  2. market_ids is ordered same as markets including duplication

this should work

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