本文档将指导你如何使用 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 < 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); // 累加距离 } // 将总距离显示在页面上 $("#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 的变量，用于存储总距离。
Find JSON Path OnlineEasily find JSON paths within JSON objects using our intuitive Json Path Finder
30 -
for (let i = 0; i < 5; 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 结构中包含以下元素，以便代码可以正确地找到并更新数据：
<div class="strava-widget"> <table class="strava-stats"> <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>5-day totals</div></td> <td><div>-</div></td> <td><div>-</div></td> <td><div><span id="activitytotaldistance"></span>Km</div></td> <td><div><span id="totalelevation"></span>m</div></td> <td><div>-</div></td> <td><div>-</div></td> </tr> </table> </div>
注意事项
- 确保 jQuery 库已经正确引入到你的 HTML 文件中。
- JSON 文件的 URL (/running/strava_activities.json) 需要根据你的实际情况进行修改。
- 如果 JSON 数据结构与示例代码中的结构不一致，你需要相应地修改代码以适应你的数据结构。
- 错误处理：在实际应用中，应该添加错误处理机制，例如在 $.get() 方法的回调函数中检查请求是否成功，以及在数据处理过程中处理可能出现的异常情况。
总结
通过本文档，你学习了如何使用 jQuery 从 JSON 文件中提取数据，并将提取的数值变量进行求和，最终将结果动态地展示在网页上。 这个方法可以应用于各种需要从 JSON 数据源动态更新网页内容的场景。 记住，理解 JSON 数据结构和 jQuery 选择器的使用是关键。