Как распечатать все данные с JSON URL, используя для l oop? - PullRequest
Новая
       1

Как распечатать все данные с JSON URL, используя для l oop?

1 голос
/ 27 марта 2020

Когда я пытаюсь вывести это на HTML, он показывает не весь вывод, а по одной стране.

Я пытался вывести его, используя document.write, но он перезаписывает все HTML. Как распечатать все данные без замены всего моего HTML кода? Я также пробовал другие способы вывести его, используя getElementById, innerHTML. Ничто из этого не сработало. 

<!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>

1 Ответ

1 голос
/ 27 марта 2020

Определите txt перед тем, как начать для l oop, и отобразите значение после того, как l oop закончится. 

var txt = '';

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

$(".allcountry").html(txt);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...