本教程旨在指导开发者如何使用 JavaScript 和 jQuery 从 JSON 文件中提取数据，并对提取的数值变量进行求和，最终将结果展示在网页上。我们将通过一个实际案例，演示如何从 Strava 活动数据 JSON 文件中提取跑步距离，并计算过去五次活动的跑步总距离，然后将总距离显示在表格中。
从 JSON 文件中提取数据并求和
在 Web 开发中，经常需要从 JSON (JavaScript Object Notation) 文件中获取数据，并对这些数据进行处理。本节将介绍如何使用 JavaScript 和 jQuery 从 JSON 文件中提取数据，并对提取的数值变量进行求和。
1. 加载 JSON 数据
首先，需要使用 jQuery 的 $.get() 方法从指定的 URL 加载 JSON 数据。以下代码演示了如何从 /running/strava_activities.json 加载数据：
$(function() {
$.get('/running/strava_activities.json', function(data) {
console.log(data); // 打印加载的数据，用于调试
// 后续的数据处理代码将在这里添加
});
});2. 提取数据并显示
加载数据后，我们需要提取所需的数据并将其显示在 HTML 页面上。例如，以下代码演示了如何提取前五次活动的日期、类型、名称和距离，并将它们显示在表格中：
立即学习“Java免费学习笔记（深入）”；
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);
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))
}
}
});
});上述代码使用了一个循环来遍历前五次活动的数据，并将提取的数据分别填充到对应的 HTML 元素中。例如，$("#activity1distance").html(((data[0].distance) / 1000).toFixed(3)) 将第一次活动的距离（单位为公里，保留三位小数）显示在 id 为 activity1distance 的 HTML 元素中。
3. 对距离数据进行求和
为了计算总距离，我们需要在循环中累加每次活动的距离。以下代码演示了如何计算总距离，并将结果显示在 id 为 activitytotaldistance 的 HTML 元素中：
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 aggregate = 0; // 初始化总距离为 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))
}
aggregate += Number(data[i].distance); // 累加每次活动的距离
}
// 将总距离显示在 HTML 元素中
the_div_element_we_want_to_add_data_to = document.getElementById("activitytotaldistance");
the_div_element_we_want_to_add_data_to.innerHTML = (aggregate / 1000).toFixed(3);
});
});上述代码首先初始化一个变量 aggregate 为 0，然后在循环中将每次活动的距离累加到 aggregate 中。注意，data[i].distance 是字符串类型，需要使用 Number() 函数将其转换为数值类型。循环结束后，将 aggregate / 1000 （单位为公里）显示在 id 为 activitytotaldistance 的 HTML 元素中。
4. HTML 结构
确保你的 HTML 结构包含用于显示数据的元素。以下是一个简单的示例：
<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>确保包含 jQuery 库。
注意事项
- 数据类型转换： 确保将从 JSON 文件中提取的数据转换为正确的类型（例如，将字符串转换为数值）。
- 错误处理： 在实际应用中，应该添加错误处理机制，以处理 JSON 文件加载失败或数据格式错误的情况。
- 代码优化： 可以使用更简洁的代码来提取和显示数据，例如使用 ES6 的模板字符串。
总结
本教程介绍了如何使用 JavaScript 和 jQuery 从 JSON 文件中提取数据，并对提取的数值变量进行求和。通过一个实际案例，演示了如何从 Strava 活动数据 JSON 文件中提取跑步距离，并计算过去五次活动的跑步总距离，然后将总距离显示在表格中。希望本教程能够帮助你更好地理解和应用这些技术。
