Javascript Fetch API не показывает результаты на нескольких картах

Question

У меня есть скрипт, который извлекает данные из ссылки, а затем вставляет их в таблицы и показывает их пользователю. скрипт работал нормально. но затем я решил сделать функцию более динамичной c, поэтому я добавил 2 аргумента name и Html div name, где будут отображаться данные. он работал нормально, когда я вызывал функцию в первый раз, но не показывает никаких данных при втором вызове. Я использую PHP для своих проектов и новичок в javascript. но я сделал подобную функцию в PHP, но это работает. какие-либо предложения?

function getInfoByCountry(name, displayName) {
  fetch("https://something.com/countries/" + name)
    .then(res => res.json())
    .then(data => {
      output = `
      <tr>
        <td>Total Cases</td>
        <td>${data.cases}</td>
      </tr>
      <tr>
        <td>Today Cases</td>
        <td>${data.todayCases}</td>
      </tr>
      <tr>
        <td>Deaths</td>
        <td>${data.deaths}</td>
      </tr>
      <tr>
        <td>Recovered</td>
        <td>${data.recovered}</td>
      </tr>        
      <tr>
        <td>Critical</td>
        <td>${data.critical}</td>
      </tr>
      <tr>
        <td>Active Cases</td>
        <td>${data.active}</td>
      </tr>                        
    `;
      document.getElementById(displayName).innerHTML = output;
    });
}

getInfoByCountry("USA", "USAInfo");

getInfoByCountry("China", "ChinaInfo");

<div class="table-responsive">
  <table class="table table-striped mb-0">
    <tbody id="ChinaInfo">

    </tbody>
  </table>
</div>

Answer 1

Добавить return как это

 function getInfoByCountry(name, displayName) {
  var display = document.getElementById(displayName);
  return fetch("https://smthing.com/countries/"+name)
    .then(res => res.json())
    .then(data => {

      output = `
  <tr>
    <td>Total Cases</td>
    <td>${data.cases}</td>
  </tr>
  <tr>
    <td>Today Cases</td>
    <td>${data.todayCases}</td>
  </tr>
  <tr>
    <td>Deaths</td>
    <td>${data.deaths}</td>
  </tr>
  <tr>
    <td>Recovered</td>
    <td>${data.recovered}</td>
  </tr>        
  <tr>
    <td>Critical</td>
    <td>${data.critical}</td>
  </tr>
  <tr>
    <td>Active Cases</td>
    <td>${data.active}</td>
  </tr>                        
`;

  document.getElementById(displayName).innerHTML += output;

    }

    );
}


  getInfoByCountry("USA", "display");

  getInfoByCountry("China", "display");

Answer 2

вам просто нужно добавить оператор return для возврата вывода.

здесь - это функция, которую вы можете проверить.

function getInfoByCountry(name,displayName) {
    debugger;
  return fetch("https://jsonplaceholder.typicode.com/posts/"+name)
    .then(res => res.json())
    .then(data => {
      output = `
      <tr>
        <td>Total Cases</td>
        <td>${data.title}</td>
      </tr>
      <tr>
        <td>Today Cases</td>
        <td>${data.body}</td>
      </tr>
    `;
      document.getElementById(displayName).innerHTML = output;
    });
}

Answer 3

Вы добавляете результат, используя displayName в качестве атрибута id, вы должны добавить еще один для USAinfo, как упомянуто в комментариях, или лучшей реализацией будет создание таблицы динамически и добавление результата в контейнер.

function getInfoByCountry(name, displayName) {
  fetch("API_URL" + name)
    .then(res => res.json())
    .then(data => {
      output = `
      <table class="table table-striped mb-0">
    <tbody>

      <tr>
        <td>Total Cases</td>
        <td>${data.cases}</td>
      </tr>
      <tr>
        <td>Today Cases</td>
        <td>${data.todayCases}</td>
      </tr>
      <tr>
        <td>Deaths</td>
        <td>${data.deaths}</td>
      </tr>
      <tr>
        <td>Recovered</td>
        <td>${data.recovered}</td>
      </tr>        
      <tr>
        <td>Critical</td>
        <td>${data.critical}</td>
      </tr>
      <tr>
        <td>Active Cases</td>
        <td>${data.active}</td>
      </tr>
       </tbody>
  </table><hr />
    `;
      document.getElementById("container").innerHTML += output;
    });
}

getInfoByCountry("USA", "USAInfo");

getInfoByCountry("China", "ChinaInfo");

table, td {
  border: 1px solid;
}

<div id="container" class="table-responsive">
  
</div>