如何使用 JavaScript 对从 JSON 文件中提取的变量求和-html教程-PHP中文网

如何使用 JavaScript 对从 JSON 文件中提取的变量求和

心靈之曲

发布： 2025-11-01 11:40:16

原创

117人浏览过

如何使用 javascript 对从 json 文件中提取的变量求和

本教程旨在指导开发者如何使用 JavaScript 和 jQuery 从 JSON 文件中提取数据，并对提取的数值变量进行求和，最终将结果展示在网页上。我们将通过一个实际案例，演示如何从 Strava 活动数据 JSON 文件中提取跑步距离，并计算过去五次活动的跑步总距离，然后将总距离显示在表格中。

从 JSON 文件中提取数据并求和

在 Web 开发中，经常需要从 JSON (JavaScript Object Notation) 文件中获取数据，并对这些数据进行处理。本节将介绍如何使用 JavaScript 和 jQuery 从 JSON 文件中提取数据，并对提取的数值变量进行求和。

1. 加载 JSON 数据

首先，需要使用 jQuery 的 $.get() 方法从指定的 URL 加载 JSON 数据。以下代码演示了如何从 /running/strava_activities.json 加载数据：

$(function() {
  $.get('/running/strava_activities.json', function(data) {
    console.log(data); // 打印加载的数据，用于调试
    // 后续的数据处理代码将在这里添加
  });
});

登录后复制

2. 提取数据并显示

加载数据后，我们需要提取所需的数据并将其显示在 HTML 页面上。例如，以下代码演示了如何提取前五次活动的日期、类型、名称和距离，并将它们显示在表格中：

立即学习“Java免费学习笔记（深入）”；

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);
    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))
      }
    }
  });
});

登录后复制

上述代码使用了一个循环来遍历前五次活动的数据，并将提取的数据分别填充到对应的 HTML 元素中。例如，$("#activity1distance").html(((data[0].distance) / 1000).toFixed(3)) 将第一次活动的距离（单位为公里，保留三位小数）显示在 id 为 activity1distance 的 HTML 元素中。

3. 对距离数据进行求和

为了计算总距离，我们需要在循环中累加每次活动的距离。以下代码演示了如何计算总距离，并将结果显示在 id 为 activitytotaldistance 的 HTML 元素中：

Find JSON Path Online

Easily find JSON paths within JSON objects using our intuitive Json Path Finder

查看详情

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; // 初始化总距离为 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); // 累加每次活动的距离
    }

    // 将总距离显示在 HTML 元素中
    the_div_element_we_want_to_add_data_to = document.getElementById("activitytotaldistance");
    the_div_element_we_want_to_add_data_to.innerHTML = (aggregate / 1000).toFixed(3);
  });
});

登录后复制

上述代码首先初始化一个变量 aggregate 为 0，然后在循环中将每次活动的距离累加到 aggregate 中。注意，data[i].distance 是字符串类型，需要使用 Number() 函数将其转换为数值类型。循环结束后，将 aggregate / 1000 （单位为公里）显示在 id 为 activitytotaldistance 的 HTML 元素中。

4. HTML 结构

确保你的 HTML 结构包含用于显示数据的元素。以下是一个简单的示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="strava-widget">
  <table class="strava-stats">
    <tr>
    </tr>
    <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 id=>5-day totals</div>
      </td>
      <td>
        <div id=>-</div>
      </td>
      <td>
        <div id=>-</div>
      </td>
      <td>
        <div><span id="activitytotaldistance"></span>Km</div>
      </td>
      <td>
        <div><span id="totalelevation"></span>m</div>
      </td>
      <td>
        <div id=>-</div>
      </td>
      <td>
        <div id=>-</div>
      </td>
    </tr>
  </table>
</div>

登录后复制

确保包含 jQuery 库。

注意事项

数据类型转换： 确保将从 JSON 文件中提取的数据转换为正确的类型（例如，将字符串转换为数值）。
错误处理： 在实际应用中，应该添加错误处理机制，以处理 JSON 文件加载失败或数据格式错误的情况。
代码优化： 可以使用更简洁的代码来提取和显示数据，例如使用 ES6 的模板字符串。

总结

本教程介绍了如何使用 JavaScript 和 jQuery 从 JSON 文件中提取数据，并对提取的数值变量进行求和。通过一个实际案例，演示了如何从 Strava 活动数据 JSON 文件中提取跑步距离，并计算过去五次活动的跑步总距离，然后将总距离显示在表格中。希望本教程能够帮助你更好地理解和应用这些技术。

以上就是如何使用 JavaScript 对从 JSON 文件中提取的变量求和的详细内容，更多请关注php中文网其它相关文章！