使用 jQuery 从 JSON 文件中提取变量并求和-html教程-PHP中文网

使用 jQuery 从 JSON 文件中提取变量并求和

霞舞

发布： 2025-10-31 12:39:00

原创

163人浏览过

使用 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 的变量，用于存储总距离。

Find JSON Path Online
Easily 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>

登录后复制