如何对JSON文件提取的变量求和？Strava活动总距离计算

核心思路 #

直接从JSON原始数据中累加距离和海拔增益，避免从DOM元素读取格式化后的字符串，保证计算准确性，再将结果插入到总计行对应的元素中。

修改步骤与代码 #

1. 修正HTML中的无效代码

总计行里的<div id=>属于无效语法，直接移除多余的id=属性即可：

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

2. 更新JavaScript代码，添加求和逻辑

在处理完5条活动数据后，添加累加计算代码，将结果格式化后插入到对应元素：

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)
    // 处理第1条活动
    $("#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))

    // 处理第2条活动
    $("#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))

    // 处理第3条活动
    $("#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))

    // 处理第4条活动
    $("#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))

    // 处理第5条活动
    $("#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))
    }
    if (data[1].distance > 0) {
      $("#time_km_2").html(toTime(((data[1].moving_time) / ((data[1].distance) / 1000))).slice(3))
    }
    if (data[2].distance > 0) {
      $("#time_km_3").html(toTime(((data[2].moving_time) / ((data[2].distance) / 1000))).slice(3))
    }
    if (data[3].distance > 0) {
      $("#time_km_4").html(toTime(((data[3].moving_time) / ((data[3].distance) / 1000))).slice(3))
    }
    if (data[4].distance > 0) {
      $("#time_km_5").html(toTime(((data[4].moving_time) / ((data[4].distance) / 1000))).slice(3))
    }

    // --- 新增：计算5日总计距离与海拔 ---
    let totalDistance = 0;
    let totalElevation = 0;
    // 遍历前5条活动数据累加
    for(let i = 0; i < 5; i++){
      totalDistance += data[i].distance;
      totalElevation += data[i].total_elevation_gain;
    }
    // 转换为公里并保留3位小数，插入到总计行
    $("#activitytotaldistance").html((totalDistance / 1000).toFixed(3));
    $("#totalelevation").html(totalElevation);
  })
});

额外优化建议 #

可以用循环简化重复的活动数据处理代码，减少冗余：

// 替换原来的5条活动处理代码
for(let i = 0; i < 5; i++){
  const index = i + 1;
  $("#start_date_local_" + index).html((data[i].start_date_local).slice(0, 10));
  $("#activity" + index + "type").html(data[i].type);
  $("#activity" + index + "name").html(data[i].name);
  $("#activity" + index + "distance").html(((data[i].distance) / 1000).toFixed(3));
  $("#elevation" + index).html(data[i].total_elevation_gain);
  $("#moving_time_" + index).html(toTime(data[i].moving_time));
  
  // 计算配速
  if (data[i].distance > 0) {
    $("#time_km_" + index).html(toTime(((data[i].moving_time) / ((data[i].distance) / 1000))).slice(3));
  }
}

内容的提问来源于stack exchange，提问作者Ken