Javascript - 接收和格式化 HTML答案

【问题标题】：Javascript - Receive and format HTMLJavascript - 接收和格式化 HTML
【发布时间】：2017-12-28 03:04:29
【问题描述】：

我已经尝试了很长时间了。我正在构建地图（使用 Google Maps JS API）来显示指定卫星的轨道。我已经能够实现一些结果，这些结果都没有从 HTML 页面中获取数据，这是我希望能够做到的。使用 Laravel Blade 为每个页面动态生成数据，结果来自我的 SQL 数据库。

为了绘制卫星的轨道，我必须使用 orbits-js 库。

到目前为止，我设法做到了：
从文本文件中获取数据，格式为：

0 ISS (ZARYA)             
1 25544U 98067A   17202.25860705  .00002617  00000-0  46671-4 0  9999
2 25544  51.6406 228.4871 0006083  57.5520  20.0514 15.54198040 67054

如您所见，这是用于计算轨道的数据。每行都以标识符开头 - 0,1 或 2。orbit-js 使用它来计算轨道参数。

我使用这个 JS 代码来获取数据：

$.get("/other/stations.txt", function(data) {
  stations = orbits.util.parseTLE(data);
  var i = 0;
  for (; i < stations.length; i++) {
    var name = stations[i].name;
    var satOpts = {
      map: map,
      tle: stations[i],
      pathLength: 3,
    };

    var sat = new orbits.Satellite(satOpts);
    sat.refresh();
    sat.refresh_path();
    sats.push(sat);
  }

  setInterval(function() {
    var i = 0;
    for (; i < sats.length; i++) sats[i].refresh();
  }, 500);

  setInterval(function() {
    var i = 0;
    for (; i < sats.length; i++) sats[i].refresh_path();
  }, 5 * 60000);
});

orbits-js 库像这样格式化数据：

orbits.util.parseTLE = function(text) {
  "use strict";
  if (!text || typeof text != "string" || text === "") return [];

  var lines = text.split("\n");

  // trim emepty lines
  for (var i = 0; i < lines.length; i++)
    if (lines[i] === "") lines.splice(i, 1);

  // see if we got something reasonable
  if (lines.length < 3) return [];
  if (lines.length % 3 !== 0)
    throw new SyntaxError("The number of lines should be multiple of 3");

  // try and make the array
  var three;
  var array = [];
  while (lines.length) array.push(new orbits.TLE(lines.splice(0, 3).join("\n")));

  return array;
};

我想要的是从我的 HTML 而不是 txt 文件中获取数据。我的 HTML 格式是这样的：

<li id="tle-data-main">0 ISS (ZARYA)</li>
<li id="tle-data-main">1 25544U 98067A 17198.59697288 +.00000849 +00000-0 +20077-4 0 9991</li>
<li id="tle-data-main">2 25544 051.6415 246.7397 0005882 046.2932 050.6122 15.54169454066485</li>

基本上我需要修改 JS 以从我的网页/HTML 而不是 txt 文件中获取数据。

【问题讨论】：

标签： javascript jquery html node.js laravel

【解决方案1】：

首先，您的 html 中不应有多次相同的 id。根据定义，id 是唯一的。改用类：

<li class="tle-data-main">0 ISS (ZARYA)</li>
<li class="tle-data-main">...</li>
<li class="tle-data-main">...</li>

你想在 .tle-data-main 元素中获取文本，所以你只需要做一些 jQuery（我看到你正在使用 jQuery）。

而不是你的 $.get，写：

var lines = [];
$('.tle-data-main').each(function() {  // for each element of your class
    lines.push(this.innerText);  // we push a new line containing the text
});
var data = lines.join("\n");  // we join lines to produce text data
stations = orbits.util.parseTLE(data);  // and give it to orbit-js

【讨论】：