Hallo,
Beschreibung desProblem:
Ich versuche durch load() Methode die JSON-Daten an das Klasseneigenschaft this.starsData zu übertragen. Es werden zwar die JSON-Daten geladen, doch die Daten kommen nicht an die Eigenschaft starsData an (erst später).
Anhang der Browser-Console ist mir die Meldung nicht nachvollziehbar. Das Ergebnis vom jQuery-Ajax-Plugin wird irgendwie bei der Verarbeitung ignoriert und aus einem Grund übersprungen. Durch diesen Fehler greift die Methode setStars in ein leeres starsData Feld.
Kurz gesagt ich will das die JSON Daten was aus der data.php datei geladen werden, in das Feld this.starsData für weitere Verarbeitung zur Verfügung steht.
Normalerweise finde ich zu 98% immer selbst eine Lösung, dabei Helfen mit Google, StackOverflow, Github uÄ. Ich brauche bitte eure Hilfe um nachvollziehen was hier passiert. Ich bitte nicht um eine fertige Lösung sondern einen Tipp der mich in die richtige Richtung lenkt. Danke Vorab.
Hier die Scripte:
html als Basis:
data.php gibt JSON-Daten aus
zoom.js
Beschreibung desProblem:
Ich versuche durch load() Methode die JSON-Daten an das Klasseneigenschaft this.starsData zu übertragen. Es werden zwar die JSON-Daten geladen, doch die Daten kommen nicht an die Eigenschaft starsData an (erst später).
Anhang der Browser-Console ist mir die Meldung nicht nachvollziehbar. Das Ergebnis vom jQuery-Ajax-Plugin wird irgendwie bei der Verarbeitung ignoriert und aus einem Grund übersprungen. Durch diesen Fehler greift die Methode setStars in ein leeres starsData Feld.
Kurz gesagt ich will das die JSON Daten was aus der data.php datei geladen werden, in das Feld this.starsData für weitere Verarbeitung zur Verfügung steht.
Normalerweise finde ich zu 98% immer selbst eine Lösung, dabei Helfen mit Google, StackOverflow, Github uÄ. Ich brauche bitte eure Hilfe um nachvollziehen was hier passiert. Ich bitte nicht um eine fertige Lösung sondern einen Tipp der mich in die richtige Richtung lenkt. Danke Vorab.
Code:
Load Start zoom.js:28 Load StarsData Field in load() Method {} zoom.js:36 Methode Stars {} zoom.js:23 Load Data with Ajax (2) [{…}, {…}] zoom.js:25 Set Data to Object Field starsData (2) [{…}, {…} ]
Hier die Scripte:
html als Basis:
HTML-Code:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title> Zoom </title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/zoom.css"> </head> <body> <canvas id="canvas"></canvas> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="js/zoom/zoom.js"></script> </body> </html>
data.php gibt JSON-Daten aus
PHP-Code:
<?php
$starsdata = array(
0 => array(
'x' => 100,
'y' => 100,
'name' => 'Centauri',
),
1 => array(
'x' => 120,
'y' => 80,
'name' => 'Aldebaran',
),
);
echo json_encode($starsdata);
?>
zoom.js
HTML-Code:
class Galaxy { constructor() { this.starsData = {}; //JSON datei mit Sternen this.params = {}; //JSON datei mit Sternen } /** * Sterne laden * @returns {undefined} */ load() { console.log('Load Start'); var self = this; $.ajax({ url: 'data.php', method: 'post', data: this.params, dataType: 'json', success: function (data) { console.log('Load Data with Ajax', data); self.starsData = data; //JSON-Daten kommen nicht an!!! console.log('Set Data to Object Field starsData', self.starsData); } }); console.log('Load StarsData Field in load() Method', this.starsData); } /** * Sterne platzieren */ setStars() { this.load(); console.log('Methode Stars', this.starsData); //mit Daten Weiterarbeiten //................................. } } var G = new Galaxy(); G.setStars();
Kommentar