本文介绍了如何使用 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 的元素。
<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>3. 注意事项
- 数据类型转换： 确保从 JSON 文件中读取的距离值被正确地转换为数字类型，再进行加法运算。可以使用 Number() 函数进行转换。
- 错误处理： 考虑添加错误处理机制，例如在 JSON 文件加载失败时给出提示，或者在距离值为 null 或 undefined 时进行处理。
- JSON 数据结构： 确保 JSON 数据的结构与代码中的假设一致，即 data 是一个包含多个活动对象的数组，每个活动对象都有 distance 属性。
4. 完整代码示例
以下是包含 HTML 和 JavaScript 的完整示例：
<!DOCTYPE html>
<html>
<head>
<title>Strava Activities</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
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));
});
});
</script>
</head>
<body>
<div class="strava-widget">
<table class="strava-stats">
<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>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>
</table>
</div>
</body>
</html>总结
通过以上步骤，你可以使用 jQuery 从 JSON 文件中动态提取数据，并计算总距离，最终将结果显示在 HTML 页面上。记住要处理数据类型转换和潜在的错误情况，以确保代码的健壮性和可靠性。
