本教程旨在指导开发者如何使用 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 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 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 结构包含用于显示数据的元素。以下是一个简单的示例：
确保包含 jQuery 库。
注意事项
数据类型转换： 确保将从 JSON 文件中提取的数据转换为正确的类型（例如，将字符串转换为数值）。错误处理： 在实际应用中，应该添加错误处理机制，以处理 JSON 文件加载失败或数据格式错误的情况。代码优化： 可以使用更简洁的代码来提取和显示数据，例如使用 ES6 的模板字符串。
总结
本教程介绍了如何使用 JavaScript 和 jQuery 从 JSON 文件中提取数据，并对提取的数值变量进行求和。通过一个实际案例，演示了如何从 Strava 活动数据 JSON 文件中提取跑步距离，并计算过去五次活动的跑步总距离，然后将总距离显示在表格中。希望本教程能够帮助你更好地理解和应用这些技术。
以上就是如何使用 JavaScript 对从 JSON 文件中提取的变量求和的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1590809.html
微信扫一扫 
支付宝扫一扫 
