CODEWITHSUNDEEP
javascriptjqueryhtmlcsseach
Alessandro
Alessandro

Reputation: 15

Jquery after loop show result in every div

I try learn to code, and I have to make a weather app. I have a little problem, when I call the opeweather API for the next 3 days I want to show the temperature in every panel, but I dont'know how to use correctly the loop.

Here is my code

function getWeather(query){
  $.ajax({
    url: api + chiaveId + query + giorni,
    dataType: 'jsonp',
    type: 'POST',
    success: function(data) {
      $.each(data.list, function (i) {
        //console.log(data.list[i].humidity+ ":"+i)
        //console.log(data.list[i].temp.day)
        var temp = Math.floor((data.list[i].temp.day - 273.15));
        $.each($(".pannello-temperatura"), function(element){  
          $(this).html(temp);
        }); 

      });       
      $("#pannello-citta").html(data.city.name).slideUp(0).slideDown(900);

    }
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-4 col-md-offset-0 col-xs-offset-1 col-xs-10">
    <div class="panel">
      OGGI<hr>
      <div id="pannello-tempo"></div>
      <div class="pannello-temperatura"></div>
      <div id="pannello-umidita"></div>
    </div>
  </div>
  <div class="col-md-4  col-md-offset-0 col-xs-offset-1 col-xs-10">
    <div class="panel">
      DOMANI<hr>
      <div id="pannello-tempo"></div>
      <div class="pannello-temperatura"></div>
      <div id="pannello-umidita"></div>
    </div> 
  </div>
  <div class="col-md-4 col-md-offset-0 col-xs-offset-1 col-xs-10">
    <div class="panel">
      DOPODOMANI<hr>
      <div id="pannello-tempo"></div>
      <div class="pannello-temperatura"></div>
      <div id="pannello-umidita"></div>
    </div>
  </div>
</div>

Upvotes: 1

Views: 228

Answers (3)

Robiseb
Robiseb

Reputation: 1606

I think you don't need to loop on the divs elements if a day is an item of data.list.

Use the $.each(data.list) loop index to access the right .pannello-temperatura div element.

$.each(data.list, function (i) {
   var temp = Math.floor((data.list[i].temp.day - 273.15));
   $(".pannello-temperatura").eq(i).html(temp);
});

Upvotes: 1

terales
terales

Reputation: 3200

Working example:

function getWeather(query){
  $.ajax({
    url: api + chiaveId + query + giorni,
    dataType: 'jsonp',
    type: 'POST',
    success: function(data) {
      // Select panels and iterate over each
      $(".pannello-temperatura").each(function (index, element) {
        // Get temperature by index from your data
        var temp = Math.floor((data.list[index].temp.day - 273.15));
        // Use text  instead of html for a third party data for a safety
        $(element).text(temp);
      })      
      $("#pannello-citta").html(data.city.name).slideUp(0).slideDown(900);
    }
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-4 col-md-offset-0 col-xs-offset-1 col-xs-10">
    <div class="panel">
      OGGI<hr>
      <div id="pannello-tempo"></div>
      <div class="pannello-temperatura"></div>
      <div id="pannello-umidita"></div>
    </div>
  </div>
  <div class="col-md-4  col-md-offset-0 col-xs-offset-1 col-xs-10">
    <div class="panel">
      DOMANI<hr>
      <div id="pannello-tempo"></div>
      <div class="pannello-temperatura"></div>
      <div id="pannello-umidita"></div>
    </div> 
  </div>
  <div class="col-md-4 col-md-offset-0 col-xs-offset-1 col-xs-10">
    <div class="panel">
      DOPODOMANI<hr>
      <div id="pannello-tempo"></div>
      <div class="pannello-temperatura"></div>
      <div id="pannello-umidita"></div>
    </div>
  </div>
</div>

Upvotes: 0

Devian
Devian

Reputation: 827

This is the solution to go.

    $(".pannello-temperatura").each(function(index,element){  
      $(element).html(temp);
    });

Upvotes: 1

Related Questions