Javascript Fetch API 未在多张卡上显示结果

Question

I have a script that fetches the data from a link and then inserts that in tables and shows it to the user. the script worked fine. but then I decided to make the function more dynamic so I added 2 arguments name and Html div name where the data will display. it worked fine when I called the function the first time but it doesn't show any data on the second call. I'm using PHP for my projects and new to javascript. but I made a similar function in PHP but that works. any suggestions?

 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

Add return like this

 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

You are adding the result using displayName as id attribute, you should add another one for USAinfo as mentioned in the comments, or a better implementation would be to create the table dynamically and append the result to the container.

 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>

Answer 3

you just need to add return statement for returning output.

here is fiddle you can check function.

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;
    });
}