Ankündigung

Einklappen
Keine Ankündigung bisher.

Aufgerufene JSON Daten werden nicht an das Klassenfeld übergeben

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Aufgerufene JSON Daten werden nicht an das Klassenfeld übergeben

    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.



    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(
              
    => array(
                        
    'x' => 100,
                        
    'y' => 100,
                        
    'name' => 'Centauri',
              ),
              
    => 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();


  • #2
    $.ajax() ist eine asynchrone Funktion, das heißt das Ergebnis wird zeitverzögert verarbeitet. Du musst hier mit Callbacks arbeiten.

    Lesestoff:

    https://developer.mozilla.org/de/doc...bjects/Promise
    https://developer.mozilla.org/en-US/...async_function

    Und hier noch ein informatives Videos:

    https://youtu.be/vn3tm0quoqE

    Kommentar


    • #3
      So eine ähnliche Vermutung hatte ich schon...danke für die Tipps!!

      Kommentar


      • #4
        Es würde sich auch die Fetch-Api anbieten:

        HTML-Code:
        <!doctype html>
        <html lang="de">
        <head>
          <meta charset="UTF-8">
          <title>Fetch some Data</title>
          <p id=fetchResult>
          <script>
              fetch( 'https://ajsonplaceholder.typicode.com/todos/1' )
              .then ( response => response.json() )
              .then( data => fetchResult.innerHTML=data['title'] )
              .catch( error => console.log("fehler") )  
          </script>
        IE11 mag das nicht so wie oben geschrieben.
        Babel.js wird es übersetzen und isomorphic-fetch hilft....

        Kommentar


        • #5
          Zitat von kaminbausatz Beitrag anzeigen
          Es würde sich auch die Fetch-Api anbieten:

          HTML-Code:
          <!doctype html>
          <html lang="de">
          <head>
          <meta charset="UTF-8">
          <title>Fetch some Data</title>
          <p id=fetchResult>
          <script>
          fetch( 'https://ajsonplaceholder.typicode.com/todos/1' )
          .then ( response => response.json() )
          .then( data => fetchResult.innerHTML=data['title'] )
          .catch( error => console.log("fehler") )
          </script>
          IE11 mag das nicht so wie oben geschrieben.
          Babel.js wird es übersetzen und isomorphic-fetch hilft....
          Dank dir für den Tipp, gut zu wissen das es eine Alternative für jQury.Ajax gibt. Soweit ich verstanden habe unterstüzt fetch keine Sessions also eine Serverseitige Autentifizierung, wens so ist dann Schade

          Kommentar


          • #6
            Zitat von hellbringer Beitrag anzeigen
            $.ajax() ist eine asynchrone Funktion.................
            Dan machen wir die doch mit einer Option Synchron


            HTML-Code:
             $.ajax({          
            url: 'data.php',        
            method: 'post',          
            data: this.params,        
            async: false,  //<---gugst du hier          
            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);          
            }      
            });

            Kommentar


            • #7
              Zitat von ROvk Beitrag anzeigen

              Dank dir für den Tipp, gut zu wissen das es eine Alternative für jQury.Ajax gibt. Soweit ich verstanden habe unterstüzt fetch keine Sessions also eine Serverseitige Autentifizierung, wens so ist dann Schade
              HTML-Code:
               fetch(url, {credentials: "same-origin"})
                .then....
              mit dem Synchron machen würde ich mir nochmal durch die Birne schieben und die Auswirkungen überlegen.

              Kommentar


              • #8
                stimmt, ist nicht perfekte Lösung, werde mich in diese Callbacks einlesen.........danke allen

                Kommentar

                Lädt...
                X