使用 jQuery 从 JSON 文件中提取变量并求和_技术教程

本文档将指导你如何使用 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 的变量，用于存储总距离。
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 结构中包含以下元素，以便代码可以正确地找到并更新数据：

  
    
      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
      -
      -