Represent a template literal in another way

[albfleck]

Here is the relevant html:

It is a select with an id of “newSources”.

Here is the relevant script:

const apiKey = 'fxxxxxxxxxxxetc';
const main = document.querySelector('main');
const sourceSelector = document.querySelector('#newsSources');

window.addEventListener('load', e => {   
updateNewsSources();    
});

async function updateNewsSources() {
  const response = await fetch(`https://newsapi.org/v2/sources?apiKey=${apiKey}`);
  const json = await response.json();
  sourceSelector.innerHTML =
  json.sources.map
  (source => `<option value="${source.id}">${source.name}</option>`)  
  .join('/n'); 
};

For some reason the code (with the correct key) didn’t fetch anything. Then I re-copied it from github and it did work - no idea what caused the change. When the code was doing nothing, I tried to find an ‘old school’ way of recreating this template literal:

               (source => `<option value="${source.id}">${source.name}</option>`) 

Unfortunately, I have tried but don’t have the knowhow to do it. I’m not even sure if there is a non template literal way of creating the selection.
Could anyone provide an alternative, non template literal for the code above?
Thanks -
Al

[mawburn]

(source =>  '<option value="'+ source.id +'">'+ source.name +'</option>')

[albfleck]

It worked - many thanks for your know-how.
Really handy now to compare the concatenation.
(all connected RWAs)
Thanks again,
Al

[Paul_Wilkins]

@albfleck

(source => <option value="${source.id}">${source.name}</option>)

Destructuring the source in the function parameter is how I’d prefer to do this without string literals.

sourceSelector.innerHTML = json.sources.map(
  ({id, name}) => "<option value=" + id + ">" + name + "</option>"
);