Represent a template literal in another way


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 => {   

async function updateNewsSources() {
  const response = await fetch(`${apiKey}`);
  const json = await response.json();
  sourceSelector.innerHTML =
  (source => `<option value="${}">${}</option>`)  

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="${}">${}</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 -

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

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


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

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