本文档将指导你如何使用 jQuery 从 JSON 文件中提取数据，并动态计算总距离，最终将结果显示在网页的表格中。我们将通过循环遍历 JSON 数据，累加距离值，并将总距离更新到指定的 HTML 元素中，提供代码示例和详细步骤，帮助你理解和应用该技术。
从 JSON 文件中提取数据并计算总距离
本教程将演示如何使用 jQuery 从 JSON 文件中提取数据，并计算表格中显示的五个活动距离的总和。
1. HTML 结构
首先，确保你的 HTML 结构包含用于显示数据的表格，并且包含用于显示总距离的元素，例如 span 或 div。以下是一个基本的 HTML 结构示例：
注意 activitytotaldistance 这个 span 元素，我们将在这里显示计算得到的总距离。
2. JavaScript 代码
接下来，我们将使用 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 aggregate = 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); // 累加距离 } // 将总距离显示在页面上 $("#activitytotaldistance").html((aggregate / 1000).toFixed(3)); });});
代码解释：
$.get(‘/running/strava_activities.json’, function(data) { … });: 使用 jQuery 的 $.get() 方法异步请求 JSON 文件。let aggregate = 0;: 初始化一个变量 aggregate 用于存储总距离。for (let i = 0; i : 循环遍历 JSON 数据的前五个元素。$(“#activity” + (i + 1) + “distance”).html(((data[i].distance) / 1000).toFixed(3));: 从 JSON 数据中提取距离值，将其转换为公里，并保留三位小数，然后将其显示在对应的 HTML 元素中。aggregate += Number(data[i].distance);: 将当前活动的距离累加到 aggregate 变量中。注意使用 Number() 函数将距离值转换为数字类型。$(“#activitytotaldistance”).html((aggregate / 1000).toFixed(3));: 循环结束后，将计算得到的总距离（转换为公里并保留三位小数）显示在 activitytotaldistance 元素中。
3. 注意事项
确保你的 JSON 文件路径 /running/strava_activities.json 是正确的，并且该文件包含有效的 JSON 数据。JSON 数据中的距离值应该以米为单位，代码中会将其转换为公里。在累加距离值时，务必使用 Number() 函数将字符串转换为数字，否则可能会导致字符串拼接而不是数值相加。可以根据实际需求调整循环次数和数据显示格式。
4. 完整代码示例
Strava Activities .strava-stats { width: 100%; border-collapse: collapse; } .strava-stats td, .strava-stats th { border: 1px solid #ddd; padding: 8px; text-align: left; } .strava-stats th { background-color: #f2f2f2; } 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; 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); } $("#activitytotaldistance").html((aggregate / 1000).toFixed(3)); });});
5. 总结
通过本教程，你学习了如何使用 jQuery 从 JSON 文件中提取数据，循环遍历数据，计算总距离，并将结果动态显示在网页上。 这种技术可以应用于各种场景，例如显示统计数据、汇总信息等。 记住要确保 JSON 数据格式正确，并且在进行数值计算时要进行类型转换。
以上就是使用 jQuery 和 JSON 数据动态计算并显示总距离的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1589873.html
微信扫一扫 
支付宝扫一扫 
