Javascript - 受信と書式HTML

Question

私はこれを今かなりの間把握しようとしています。私は指定された衛星の軌道を表示するためにマップを構築しています（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 

、これは軌道をcalcuateするために使用されるデータです。各行は識別子-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); 
 
});

軌道-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; 
 
};

私が望むのは、txtファイルの代わりにHTMLからデータを取り出すことです。私の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>

基本的に私は私のWebページ/ HTMLはなくtxtファイルからデータを取るためにJSを変更することで必要なもの。

Answer 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データ-メイン要素内のテキストを取得したいので、あなただけの（私はあなたが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