how to sum variables extracted from .json file?

user_2610842 0
Viewed 67

I have 5 variables extracted from a json packet that I display in a table. I want to sum those five to make a sixth variable that I can then also use in the table.

The variables I want to sum are activity1distance to activity5distance, summed to activitytotaldistance

The page in question is https://vk7krj.com/running.html and the table is the "Last 5 activities on Strava"

Below is the relevant code from the page-

function toTime(seconds) {
  var date = new Date(null);
  date.setSeconds(seconds);
  return date.toISOString().substr(11, 8);
}

$(function() {
  $.get('/running/strava_activities.json', function(data) {
    console.log(data)
    $("#start_date_local_1").html((data[0].start_date_local).slice(0, 10))
    $("#activity1type").html(data[0].type)
    $("#activity1name").html(data[0].name)
    $("#activity1distance").html(((data[0].distance) / 1000).toFixed(3))
    $("#elevation1").html(data[0].total_elevation_gain)
    $("#moving_time_1").html(toTime(data[0].moving_time))

    $("#start_date_local_2").html((data[1].start_date_local).slice(0, 10))
    $("#activity2type").html(data[1].type)
    $("#activity2name").html(data[1].name)
    $("#activity2distance").html(((data[1].distance) / 1000).toFixed(3))
    $("#elevation2").html(data[1].total_elevation_gain)
    $("#moving_time_2").html(toTime(data[1].moving_time))

    $("#start_date_local_3").html((data[2].start_date_local).slice(0, 10))
    $("#activity3type").html(data[2].type)
    $("#activity3name").html(data[2].name)
    $("#activity3distance").html(((data[2].distance) / 1000).toFixed(3))
    $("#elevation3").html(data[2].total_elevation_gain)
    $("#moving_time_3").html(toTime(data[2].moving_time))

    $("#start_date_local_4").html((data[3].start_date_local).slice(0, 10))
    $("#activity4type").html(data[3].type)
    $("#activity4name").html(data[3].name)
    $("#activity4distance").html(((data[3].distance) / 1000).toFixed(3))
    $("#elevation4").html(data[3].total_elevation_gain)
    $("#moving_time_4").html(toTime(data[3].moving_time))

    $("#start_date_local_5").html((data[4].start_date_local).slice(0, 10))
    $("#activity5type").html(data[4].type)
    $("#activity5name").html(data[4].name)
    $("#activity5distance").html(((data[4].distance) / 1000).toFixed(3))
    $("#elevation5").html(data[4].total_elevation_gain)
    $("#moving_time_5").html(toTime(data[4].moving_time))

    if (data[0].distance > 0) {
      $("#time_km_1").html(toTime(((data[0].moving_time) / ((data[0].distance) / 1000))).slice(3))
    } else {}
    if (data[1].distance > 0) {
      $("#time_km_2").html(toTime(((data[1].moving_time) / ((data[1].distance) / 1000))).slice(3))
    } else {}
    if (data[2].distance > 0) {
      $("#time_km_3").html(toTime(((data[2].moving_time) / ((data[2].distance) / 1000))).slice(3))
    } else {}
    if (data[3].distance > 0) {
      $("#time_km_4").html(toTime(((data[3].moving_time) / ((data[3].distance) / 1000))).slice(3))
    } else {}
    if (data[4].distance > 0) {
      $("#time_km_5").html(toTime(((data[4].moving_time) / ((data[4].distance) / 1000))).slice(3))
    } else {}

  })

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="strava-widget">
  <table class="strava-stats">
    <tr>

    </tr>
    <tr>
      <td class="heading" colspan="1">Date</td>
      <td class="heading" colspan="1">Type</td>
      <td class="heading" colspan="1">Title</td>
      <td class="heading" colspan="1">Distance</td>
      <td class="heading" colspan="1">Height Gain</td>
      <td class="heading" colspan="1">Moving Time</td>
      <td class="heading" colspan="1">Time/Km</td>

    </tr>
    <tr>
      <td>
        <div id="start_date_local_1"></div>
      </td>
      <td>
        <div id="activity1type"></div>
      </td>
      <td>
        <div id="activity1name"></div>
      </td>
      <td>
        <div><span id="activity1distance"></span> Km</div>
      </td>
      <td>
        <div><span id="elevation1"></span>m</div>
      </td>
      <td>
        <div id="moving_time_1"></div>
      </td>
      <td>
        <div id="time_km_1"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div id="start_date_local_2"></div>
      </td>
      <td>
        <div id="activity2type"></div>
      </td>
      <td>
        <div id="activity2name"></div>
      </td>
      <td>
        <div><span id="activity2distance"></span> Km</div>
      </td>
      <td>
        <div><span id="elevation2"></span>m</div>
      </td>
      <td>
        <div id="moving_time_2"></div>
      </td>
      <td>
        <div id="time_km_2"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div id="start_date_local_3"></div>
      </td>
      <td>
        <div id="activity3type"></div>
      </td>
      <td>
        <div id="activity3name"></div>
      </td>
      <td>
        <div><span id="activity3distance"></span> Km</div>
      </td>
      <td>
        <div><span id="elevation3"></span>m</div>
      </td>
      <td>
        <div id="moving_time_3"></div>
      </td>
      <td>
        <div id="time_km_3"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div id="start_date_local_4"></div>
      </td>
      <td>
        <div id="activity4type"></div>
      </td>
      <td>
        <div id="activity4name"></div>
      </td>
      <td>
        <div><span id="activity4distance"></span> Km</div>
      </td>
      <td>
        <div><span id="elevation4"></span>m</div>
      </td>
      <td>
        <div id="moving_time_4"></div>
      </td>
      <td>
        <div id="time_km_4"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div id="start_date_local_5"></div>
      </td>
      <td>
        <div id="activity5type"></div>
      </td>
      <td>
        <div id="activity5name"></div>
      </td>
      <td>
        <div><span id="activity5distance"></span> Km</div>
      </td>
      <td>
        <div><span id="elevation5"></span>m</div>
      </td>
      <td>
        <div id="moving_time_5"></div>
      </td>
      <td>
        <div id="time_km_5"></div>
      </td>
    </tr>

    <tr>
      <td>
        <div id=>5-day totals</div>
      </td>
      <td>
        <div id=>-</div>
      </td>
      <td>
        <div id=>-</div>
      </td>
      <td>
        <div><span id="activitytotaldistance"></span>Km</div>
      </td>
      <td>
        <div><span id="totalelevation"></span>m</div>
      </td>
      <td>
        <div id=>-</div>
      </td>
      <td>
        <div id=>-</div>
      </td>
    </tr>

  </table>
</div>

html json javascript
1 Answers

So there is a pattern, that I am sure you saw, that you can repeat, thus condensing your code:

function toTime(seconds) {
  var date = new Date(null);
  date.setSeconds(seconds);
  return date.toISOString().substr(11, 8);
}

$(function() {
  $.get('/running/strava_activities.json', function(data) {
    console.log(data);
    /* ADDED A VARIABLE HERE CALLED AGGREGATE */
    /* INITIALIZED IT TO 0 AND ADD ANOTHER NUMBER TO IT... */
    let aggregate = 0;
    for (let i = 0; i < 5; i++)
    {
      $("#start_date_local_" + (i + 1)).html((data[0].start_date_local).slice(0, 10))
      $("#activity" + (i + 1) + "type").html(data[i].type)
      $("#activity" + (i + 1) + "name").html(data[i].name)
      $("#activity" + (i + 1) + "distance").html(((data[i].distance) / 1000).toFixed(3))
      $("#elevation" + (i + 1)).html(data[i].total_elevation_gain)
      $("#moving_time_" + (i + 1)).html(toTime(data[i].moving_time))
      
      if (data[i].distance > 0) {
        $("#time_km_" + (i + 1)).html(toTime(((data[i].moving_time) / ((data[i].distance) / 1000))).slice(3))
      } else {}
      
      /* HERE! (FOLLOW UP FROM PREVIOUS COMMENT) */
      aggregate += Number(data[i].distance);
      console.log(aggregate);
      // we can get an element with document.getElementById()
      // then we can use .innerHTML on the element and set it to something
      the_div_element_we_want_to_add_data_to = document.getElementById("activitytotaldistance");
      the_div_element_we_want_to_add_data_to.innerHTML = aggregate / 1000;
      //etc etc
    }

  })

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="strava-widget">
  <table class="strava-stats">
    <tr>

    </tr>
    <tr>
      <td class="heading" colspan="1">Date</td>
      <td class="heading" colspan="1">Type</td>
      <td class="heading" colspan="1">Title</td>
      <td class="heading" colspan="1">Distance</td>
      <td class="heading" colspan="1">Height Gain</td>
      <td class="heading" colspan="1">Moving Time</td>
      <td class="heading" colspan="1">Time/Km</td>

    </tr>
    <tr>
      <td>
        <div id="start_date_local_1"></div>
      </td>
      <td>
        <div id="activity1type"></div>
      </td>
      <td>
        <div id="activity1name"></div>
      </td>
      <td>
        <div><span id="activity1distance"></span> Km</div>
      </td>
      <td>
        <div><span id="elevation1"></span>m</div>
      </td>
      <td>
        <div id="moving_time_1"></div>
      </td>
      <td>
        <div id="time_km_1"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div id="start_date_local_2"></div>
      </td>
      <td>
        <div id="activity2type"></div>
      </td>
      <td>
        <div id="activity2name"></div>
      </td>
      <td>
        <div><span id="activity2distance"></span> Km</div>
      </td>
      <td>
        <div><span id="elevation2"></span>m</div>
      </td>
      <td>
        <div id="moving_time_2"></div>
      </td>
      <td>
        <div id="time_km_2"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div id="start_date_local_3"></div>
      </td>
      <td>
        <div id="activity3type"></div>
      </td>
      <td>
        <div id="activity3name"></div>
      </td>
      <td>
        <div><span id="activity3distance"></span> Km</div>
      </td>
      <td>
        <div><span id="elevation3"></span>m</div>
      </td>
      <td>
        <div id="moving_time_3"></div>
      </td>
      <td>
        <div id="time_km_3"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div id="start_date_local_4"></div>
      </td>
      <td>
        <div id="activity4type"></div>
      </td>
      <td>
        <div id="activity4name"></div>
      </td>
      <td>
        <div><span id="activity4distance"></span> Km</div>
      </td>
      <td>
        <div><span id="elevation4"></span>m</div>
      </td>
      <td>
        <div id="moving_time_4"></div>
      </td>
      <td>
        <div id="time_km_4"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div id="start_date_local_5"></div>
      </td>
      <td>
        <div id="activity5type"></div>
      </td>
      <td>
        <div id="activity5name"></div>
      </td>
      <td>
        <div><span id="activity5distance"></span> Km</div>
      </td>
      <td>
        <div><span id="elevation5"></span>m</div>
      </td>
      <td>
        <div id="moving_time_5"></div>
      </td>
      <td>
        <div id="time_km_5"></div>
      </td>
    </tr>

    <tr>
      <td>
        <div id=>5-day totals</div>
      </td>
      <td>
        <div id=>-</div>
      </td>
      <td>
        <div id=>-</div>
      </td>
      <td>
        <div><span id="activitytotaldistance"></span>Km</div>
      </td>
      <td>
        <div><span id="totalelevation"></span>m</div>
      </td>
      <td>
        <div id=>-</div>
      </td>
      <td>
        <div id=>-</div>
      </td>
    </tr>

  </table>
</div>

Unfortuneately, I can't get /running/stava_activities.json to test if I made the proper corrections, but the concept is there. I left an aggregate at the bottom of the for loop to show how you might sum those values.

user_31552400
Related