Estoy recuperando datos de una API que se ve así:
"title": "Company Name", "markets": "US, Asia", "market_ids": "4, 5"Necesito agregar estos datos a un menú desplegable como este:
<option value="4">US</option>Entonces necesito eliminar las comas y cualquier duplicado (habrá muchas entradas con el mismo mercado)
Al principio estaba pensando en algo como esto:
$.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>`) }; });Esto funciona para separar los nombres de mercado por comas y deshacerse de cualquier duplicado, pero el problema es que no puedo agregar la ID de mercado al valor. Necesito que la identificación del mercado también sea accesible.
Si tienes el control del diseño de la API, algo como
{ title: 'Company Name', markets: [ { id: 4, name: 'Asia' }, { id: 4, name: 'US' } ] }haría el uso más fácil y más claro.
Sin embargo, dado el ejemplo, y haciendo un par de suposiciones:
Esto debería funcionar
$ .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>`) ); });Suponiendo que habrá el mismo número de ids y mercados. Tenga en cuenta que si está agregando muchas opciones, probablemente querrá crear la selección en sí misma con opciones como un fragmento de documento para evitar repintar.
const data = { "title": "Company Name", "markets": "US, Asia, Asia", "market_ids": "4, 5, 5" }; const marketSelectEl = document.getElementById('market-select'); const markets = Array.from( new Set(data.markets.split(',').map(m => m.trim())) ); const market_ids = Array.from( new Set(data.markets.split(',').map(m => m.trim())) ); const marketOptions = markets .map((marketName, index) => { const optionEl = document.createElement('option'); optionEl.value = market_ids[index]; optionEl.innerText = marketName; return optionEl; }) ; marketOptions.forEach(el => marketSelectEl.append(el)); <select id="market-select" style="width: 200px;"> </select>