使用 jQuery 和 JSON 数据动态计算总距离_技术教程

本文介绍了如何使用 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));
  });
});

这段代码的核心改进在于：

使用 for 循环遍历 JSON 数据中的前五个活动。
在循环内部，累加每个活动的距离到 totalDistance 变量中。
将累加的总距离更新到 activitytotaldistance 元素的 HTML 内容中。
确保将从 JSON 中读取的距离值转换为数字，以便正确计算总和。

2. HTML 结构

确保 HTML 中存在用于显示总距离的元素，即 id 为 activitytotaldistance 的元素。


  
    5-day totals
  
  
    -
  
  
    -
  
  
     Km
  
  
    m
  
  
    -
  
  
    -

3. 注意事项

数据类型转换： 确保从 JSON 文件中读取的距离值被正确地转换为数字类型，再进行加法运算。可以使用 Number() 函数进行转换。
错误处理： 考虑添加错误处理机制，例如在 JSON 文件加载失败时给出提示，或者在距离值为 null 或 undefined 时进行处理。
JSON 数据结构： 确保 JSON 数据的结构与代码中的假设一致，即 data 是一个包含多个活动对象的数组，每个活动对象都有 distance 属性。

4. 完整代码示例

以下是包含 HTML 和 JavaScript 的完整示例：




  Strava Activities
  
  


  
    
      
        Date
        Type
        Title
        Distance
        Height Gain
        Moving Time
        Time/Km
      
      
        
        
        
         Km
        m
        
        
      
      
        
        
        
         Km
        m
        
        
      
      
        
        
        
         Km
        m
        
        
      
      
        
        
        
         Km
        m
        
        
      
      
        
        
        
         Km
        m
        
        
      
      
        5-day totals
        -
        -
         Km
        m
        -
        -