本文档将指导你如何使用 jQuery 从 JSON 文件中提取数据，并将提取的数值变量进行求和，最终将结果展示在网页上。我们将通过一个实际案例，详细讲解代码实现，帮助你掌握这一实用技能。
从 JSON 文件中提取数据并动态更新表格
假设你有一个 JSON 文件，其中包含了 Strava 活动的数据，你需要从该文件中提取最近 5 次活动的距离数据，并将这些距离数据相加，最终在网页表格中显示总距离。
核心代码实现
以下是使用 jQuery 实现该功能的代码示例：
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)); });});
代码详解
toTime(seconds) 函数: 该函数用于将秒数转换为 HH:MM:SS 格式的时间字符串。
$(function() { … });: 这是一个 jQuery 的简写方式，等同于 $(document).ready(function() { … });，表示在文档加载完成后执行其中的代码。
$.get(‘/running/strava_activities.json’, function(data) { … });: 使用 jQuery 的 $.get() 方法从 /running/strava_activities.json URL 获取 JSON 数据。当数据成功获取后，执行回调函数。
let aggregate = 0;: 声明并初始化一个名为 aggregate 的变量，用于存储总距离。
for (let i = 0; i : 使用一个循环遍历 JSON 数据中的前 5 个活动。
$(“#start_date_local_” + (i + 1)).html((data[i].start_date_local).slice(0, 10));: 使用 jQuery 选择器根据 ID 找到对应的 HTML 元素，并使用 .html() 方法将 JSON 数据中的 start_date_local 属性值（截取前 10 个字符）设置为该元素的内容。 其他类似的行代码，用于将 JSON 数据中的其他属性值更新到对应的 HTML 元素中。
aggregate += Number(data[i].distance);: 将当前活动的距离值累加到 aggregate 变量中。 Number() 函数用于将字符串转换为数字，确保可以正确进行加法运算。
$(“#activitytotaldistance”).html((aggregate / 1000).toFixed(3));: 循环结束后，将计算得到的总距离（除以 1000 转换为公里，并保留 3 位小数）更新到 ID 为 activitytotaldistance 的 HTML 元素中。
HTML 结构
确保你的 HTML 结构中包含以下元素，以便代码可以正确地找到并更新数据：
注意事项
确保 jQuery 库已经正确引入到你的 HTML 文件中。JSON 文件的 URL (/running/strava_activities.json) 需要根据你的实际情况进行修改。如果 JSON 数据结构与示例代码中的结构不一致，你需要相应地修改代码以适应你的数据结构。错误处理：在实际应用中，应该添加错误处理机制，例如在 $.get() 方法的回调函数中检查请求是否成功，以及在数据处理过程中处理可能出现的异常情况。
总结
通过本文档，你学习了如何使用 jQuery 从 JSON 文件中提取数据，并将提取的数值变量进行求和，最终将结果动态地展示在网页上。 这个方法可以应用于各种需要从 JSON 数据源动态更新网页内容的场景。 记住，理解 JSON 数据结构和 jQuery 选择器的使用是关键。
以上就是使用 jQuery 从 JSON 文件中提取变量并求和的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1590450.html
微信扫一扫 
支付宝扫一扫 
