Как передать значение массива JavaScript внутри строки html для изменения innerHTML

Question

у меня есть следующий код

<code>
resultElement.innerHTML = '';

  fetch(`https://countriesnode.herokuapp.com/v1/countries/`)
  .then(resp => resp.json()) // transform the data into json - an array with all the element
  .then(resp => 
    resp.map(({continent,native,languages})=>({continent,native,languages}))) 


  .then((resp) => {
    for(var i = 0;i <resp.length;i++){
      console.log(resp[i].continent,resp[i].native,resp[i].languages);

      resultElement.innerHTML = '<h5>Continent:</h5>' + 
      '<pre>' + (resp[i].continent, '\t') + '

'+' '+'

Native:

'+'

' + (resp[i].native, '\t') + '

';}})}

в приведенном выше коде, htmlString просто показывает тег h5, но не какое-либо значение внутри него. Я хочу, чтобы показать все значения массивов внутри тега. К сожалению, это не сработало, и я не могу найти подходящего решения для этого. Но это видно в консоли.

Answer 1

Не используйте запятую как (resp[i].continent, '\t'), так как она будет возвращать только \t, вместо этого объедините: (resp[i].native + '\t'). Кроме того, вам нужно объединить разметку HTML с помощью +=, вместо того, чтобы назначать ее:

resultElement.innerHTML = '';
fetch(`https://countriesnode.herokuapp.com/v1/countries/`)
  .then(resp => resp.json()) // transform the data into json - an array with all the element
  .then(resp => resp.map(({ continent, native, languages }) => ({ continent, native, languages })))
  .then((resp) => {
    for (var i = 0; i < resp.length; i++) {
      //console.log(resp[i].continent, resp[i].native, resp[i].languages);
      resultElement.innerHTML += 'Continent:' + '' + (resp[i].continent + '\t') + '

'+' '+'

Родной:

'+'

' + (resp[i].native + '\t') + '

';}})

<div id="resultElement"></div>

---

Табличная реализация:

resultElement.innerHTML = '';
fetch(`https://countriesnode.herokuapp.com/v1/countries/`)
  .then(resp => resp.json()) // transform the data into json - an array with all the element
  .then(resp => resp.map(({ continent, native, languages }) => ({ continent, native, languages })))
  .then((resp) => {
    for (var i = 0; i < resp.length; i++) {
      //console.log(resp[i].continent, resp[i].native, resp[i].languages);
      resultElement.innerHTML +='<tr><td>' + (resp[i].continent + '\t') + '</td>' + '<td>' + (resp[i].native + '\t') + '</td>';
    }
  })

<table>
  <thead>
    <tr>
      <td>Continent</td>
      <td>Native</td>
    </tr>
  </thead>
  <tbody id="resultElement"></tbody>
</table>