How to print all data from JSON URL using for loop?

Question

When I try to output this on HTML, it doesn't show the whole output, but one by one country.

I have tried to output it using document.write but it overwrites the whole HTML. How to print all data without replacing all my HTML code? I have also tried other ways to output it using getElementById, innerHTML. None of these worked.

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">

  <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>

<body style="color:silver;">

  <ons-page>
    <ons-toolbar>
      <div class="center" style="color:#fff; text-shadow: 1px 1px silver; background-color:#E20000;">CORONA VIRUS TRACKER</div>
    </ons-toolbar>

    <ons-tabbar swipeable position="auto">
      <ons-tab page="tab1.html" label="Global" icon="globe, material:md-home" active>
      </ons-tab>
    </ons-tabbar>
  </ons-page>

  <template id="tab1.html">
  <ons-page id="Tab1">
   <div class="allcountry"></div>
  </ons-page>
</template>

  <script>
    for (var i = 0; i < 199; i++) {
      (function(i) {
        $.getJSON('https://coronavirus-19-api.herokuapp.com/countries', function(data3) {
          var txt = `<table style="border-collapse: collapse; font-family: Andale Mono, monospace; border: silver;" width="100%" border="1">
        <tr><td><div style="background-color: #EB0D0D; text-transform: uppercase; text-align:center; color:#fff;">${data3[i].country}<br></div></td></tr>
		
	
	
	
        
                    <tr><td><img src="https://via.placeholder.com/150" height="90" width="90" style="float: left; padding-right: 5px;"><h5>CONFIRMED CASES</h5> <h3>${data3[i].cases}</h3></td></tr>
                    
                    <tr><td><img src="https://via.placeholder.com/150" height="90" width="90" style="float: left; padding-right: 5px;"><h5>NEW CASES</h5> <h3>${data3[i].todayCases}</h3></td></tr>
                    
                    <tr><td><img src="https://via.placeholder.com/150" height="90" width="90" style="float: left; padding-right: 5px;"><h5>DECEASED</h5> <h3>${data3[i].deaths}</h3></td></tr>
                    
                   <tr><td><img src="images/todaydeath.jpg" height="90" width="90" style="float: left; padding-right: 5px;"><h5>DEATHS TODAY</h5> <h3>${data3[i].todayDeaths}</h3></td></tr>
                   
                   <tr><td><img src="images/recovered.jpg" height="90" width="90" style="float: left; padding-right: 5px;"><h5>RECOVERED </h5> <h3>${data3[i].recovered}</h3></td></tr>
                   
                   <tr><td><img src="images/active.jpg" height="90" width="90" style="float: left; padding-right: 5px;"><h5>ACTIVE CASES</h5> <h3>${data3[i].active}</h3></td></tr>
                   
                   <tr><td><img src="images/critical.jpg" height="90" width="90" style="float: left; padding-right: 5px;"><h5>CRITICAL CONDITION</h5> <h3>${data3[i].critical}</h3></td></tr></table>`

          $(".allcountry").html(txt);
        })
      })(i);
    }
  </script>
</body>
</html>

$(".allcountry").html( $(".allcountry").html() + txt ); …? — C3roe
– C3roe, Commented Mar 27, 2020 at 9:51

mark_b · Accepted Answer · 2020-03-27 09:53:46Z

1

Define txt before you start your for loop, and display the value after the loop has finished.

var txt = '';

for (var i = 0; i < 199; i++) {
    // Concatenate the values to txt here
    txt += '<table....';
}

$(".allcountry").html(txt);

answered Mar 27, 2020 at 9:53

mark_b

1,49312 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to print all data from JSON URL using for loop?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related