本文介绍了如何使用 jQuery 从 JSON 文件中提取数据，并动态计算并显示总距离。通过循环遍历 JSON 数据，累加每日的活动距离，最终将总距离更新到 HTML 页面上，从而实现数据的动态展示。
从 JSON 文件中提取并计算总距离
以下步骤详细说明了如何使用 jQuery 从 JSON 文件中提取 activity1distance 到 activity5distance 的值，并将它们相加得到 activitytotaldistance，最后将结果显示在 HTML 表格中。
1. 修改 jQuery 代码
首先，需要修改现有的 jQuery 代码，从 JSON 文件中读取数据，并计算总距离。关键在于使用循环来处理多个活动的数据，并累加它们的距离。
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);
// 初始化总距离变量
let totalDistance = 0;
// 循环处理每个活动的数据
for (let i = 0; i < 5; i++) {
$("#start_date_local_" + (i + 1)).html((data[i].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));
}
// 累加距离，注意将字符串转换为数字
totalDistance += Number(data[i].distance);
}
// 将总距离显示在页面上
$("#activitytotaldistance").html((totalDistance / 1000).toFixed(3));
});
});这段代码的核心改进在于：
- 使用 for 循环遍历 JSON 数据中的前五个活动。
- 在循环内部，累加每个活动的距离到 totalDistance 变量中。
- 将累加的总距离更新到 activitytotaldistance 元素的 HTML 内容中。
- 确保将从 JSON 中读取的距离值转换为数字，以便正确计算总和。
2. HTML 结构
确保 HTML 中存在用于显示总距离的元素，即 id 为 activitytotaldistance 的元素。
3. 注意事项
- 数据类型转换： 确保从 JSON 文件中读取的距离值被正确地转换为数字类型，再进行加法运算。可以使用 Number() 函数进行转换。
- 错误处理： 考虑添加错误处理机制，例如在 JSON 文件加载失败时给出提示，或者在距离值为 null 或 undefined 时进行处理。
- JSON 数据结构： 确保 JSON 数据的结构与代码中的假设一致，即 data 是一个包含多个活动对象的数组，每个活动对象都有 distance 属性。
4. 完整代码示例
以下是包含 HTML 和 JavaScript 的完整示例：
Strava Activities
总结
通过以上步骤，你可以使用 jQuery 从 JSON 文件中动态提取数据，并计算总距离，最终将结果显示在 HTML 页面上。记住要处理数据类型转换和潜在的错误情况，以确保代码的健壮性和可靠性。
