本文介绍了如何使用 jquery 从 jsON 文件中提取数据，并动态计算并显示总距离。通过循环遍历 json 数据，累加每日的活动距离，最终将总距离更新到 html 页面上，从而实现数据的动态展示。
从 JSON 文件中提取并计算总距离
以下步骤详细说明了如何使用 jQuery 从 JSON 文件中提取 activity1distance 到 activity5distance 的值，并将它们相加得到 activitytotaldistance，最后将结果显示在 HTML 表格中。
1. 修改 jQuery 代码
首先，需要修改现有的 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 totalDistance = 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)); } // 累加距离，注意将字符串转换为数字 totalDistance += number(data[i].distance); } // 将总距离显示在页面上 $("#activitytotaldistance").html((totalDistance / 1000).toFixed(3)); }); });
这段代码的核心改进在于：
Find JSON Path Online
30
Easily find JSON paths within JSON objects using our intuitive Json Path Finder
30 
- 使用 for 循环遍历 JSON 数据中的前五个活动。
- 在循环内部，累加每个活动的距离到 totalDistance 变量中。
- 将累加的总距离更新到 activitytotaldistance 元素的 HTML 内容中。
- 确保将从 JSON 中读取的距离值转换为数字，以便正确计算总和。
2. HTML 结构
确保 HTML 中存在用于显示总距离的元素，即 id 为 activitytotaldistance 的元素。
<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>
3. 注意事项
- 数据类型转换： 确保从 JSON 文件中读取的距离值被正确地转换为数字类型，再进行加法运算。可以使用 Number() 函数进行转换。
- 错误处理： 考虑添加错误处理机制，例如在 JSON 文件加载失败时给出提示，或者在距离值为 null 或 undefined 时进行处理。
- JSON 数据结构： 确保 JSON 数据的结构与代码中的假设一致，即 data 是一个包含多个活动对象的数组，每个活动对象都有 distance 属性。
4. 完整代码示例
以下是包含 HTML 和 javaScript 的完整示例：
<!DOCTYPE html> <html> <head> <title>Strava Activities</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> 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 totalDistance = 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)); } totalDistance += Number(data[i].distance); } $("#activitytotaldistance").html((totalDistance / 1000).toFixed(3)); }); }); </script> </head> <body> <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> </body> </html>
总结
通过以上步骤，你可以使用 jQuery 从 JSON 文件中动态提取数据，并计算总距离，最终将结果显示在 HTML 页面上。记住要处理数据类型转换和潜在的错误情况，以确保代码的健壮性和可靠性。