本教程旨在指导开发者如何使用 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 页面上。例如，以下代码演示了如何提取前五次活动的日期、类型、名称和距离，并将它们显示在表格中：
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);
});
});
; // 累加每次活动的距离
}
// 将总距离显示在 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 结构包含用于显示数据的元素。以下是一个简单的示例：
| Date | Type | Title | Distance | Height Gain | Moving Time | Time/Km |
| Km | m | |||||
| Km | m | |||||
| Km | m | |||||
| Km | m | |||||
| Km | m | |||||
| 5-day totals | - | - | Km | m | - | - |
确保包含 jQuery 库。
注意事项
- 数据类型转换： 确保将从 JSON 文件中提取的数据转换为正确的类型（例如，将字符串转换为数值）。
- 错误处理： 在实际应用中，应该添加错误处理机制，以处理 JSON 文件加载失败或数据格式错误的情况。
- 代码优化： 可以使用更简洁的代码来提取和显示数据，例如使用 ES6 的模板字符串。
总结
本教程介绍了如何使用 JavaScript 和 jQuery 从 JSON 文件中提取数据，并对提取的数值变量进行求和。通过一个实际案例，演示了如何从 Strava 活动数据 JSON 文件中提取跑步距离，并计算过去五次活动的跑步总距离，然后将总距离显示在表格中。希望本教程能够帮助你更好地理解和应用这些技术。
