Javascript - Empfangen und formatieren HTML

Question

Ich habe versucht, dies aus einer ganzen Weile jetzt herauszufinden. Ich baue eine Karte (mit Google Maps JS API), um einen Orbit eines bestimmten Satelliten anzuzeigen. Ich konnte einige Ergebnisse erzielen, von denen keines die Daten von der HTML-Seite übernimmt, die ich machen könnte. Die Daten werden dynamisch für jede Seite mit Laravel Blade mit Ergebnissen aus meiner SQL-Datenbank generiert.

Um eine Umlaufbahn eines Satelliten zu zeichnen, musste ich die Bibliothek orbits-js verwenden.

ich es geschafft, diese so weit zu tun:
Nehmen Sie die Daten aus einer Textdatei, mit dem Format:

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 

Wie Sie sehen können, ist dies die eine Bahn verwendet, um Daten calcuate. Jede Zeile beginnt mit einer Kennung - 0,1 oder 2. Dies wird von orbit-js zur Berechnung der Orbitalparameter verwendet.

Ich benutze diesen Code JS um die Daten zu erhalten:

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

Die Bahnen-js Bibliothek formatiert die Daten wie folgt aus:

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

Was ich möchte, ist die Daten aus meinem HTML anstelle der TXT-Datei zu nehmen. Mein HTML-Format ist wie folgt:

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

Im Grunde, was ich brauche, ist die JS zu ändern, um die Daten aus meiner Webseite/HTML zu nehmen und nicht die txt-Datei.

Answer 1

Zuerst sollten Sie nicht die gleiche ID mehrmals in Ihrem HTML haben. Per Definition soll eine ID einzigartig sein. Verwenden Sie Klassen statt:

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

Sie möchten den Text in Ihrem .tle-data-main Elemente zu bekommen, so dass Sie nur einige jQuery tun müssen, um (ich sah Sie mit jQuery).

Statt Ihre $ .get, schreiben:

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