Problem beim Zugriff auf Objekteigenschaften in Javascript zeigt undefined?

Question

Ich rufe gerade api, die josn codierte Daten zurückgibt und versucht, Objekteigenschaft zu drucken, zeigt aber nicht definiert, aber wenn ich dieses Objekt drucke, hat das Objekt diese Eigenschaft und diesen Wert.

meinen Code

function sendData(postData, url){ 
     var response = apiCall(postData,url); 
     console.log(response.email) 
     console.log(response.count); 
    } 


    function apiCall(postData, postUrl){ 
     var response = {}; 
     $http({ 
      method : 'POST', 
      url  : postUrl, 
      data : postData, 
      headers : {'Content-Type': 'application/json'} 
     }).success(function(data) { 
       console.log(data) 
       for (var attr in data) { 
        if (data.hasOwnProperty(attr)) response[attr] = data[attr]; 
       } 
      }); 

     return response; 
    } 

PHP-basierte api

<?php 
    $_POST = json_decode(file_get_contents('php://input'), true); 
    $response = array(); 

    $response['email'] = $_POST['oauth']['email']; 
    $response['type'] = $_POST['oauth']['type']; 
    echo json_encode($response); 
?> 

Antwortdaten in der Konsole

Objekt {E-Mail: „sameerdighe14 @ gmail. com ", Typ:" Google "}

Answer 1

Sie müssen Versprechen verwenden, damit es funktioniert. Ihre success Funktion wird async aufgerufen, sobald die HTTP-Anfrage erfolgreich beendet wurde. Auf diese Weise wird return response; ausgeführt, bevor die Anfrage beendet wurde -> so ist es immer noch ein leeres Objekt {}. Verwenden Sie AngularJS promises, damit es funktioniert. Dies ist eine einfache Arbeit fiddle example.

Answer 2

Der Code wird nicht in der Reihenfolge ausgeführt, die Sie erwarten. $http benötigt Zeit zum Ausführen, und daher gibt apiCall Antwort zurück, bevor es geändert wurde.

Um dies zu beheben, müssen Sie ein Versprechen einreichen, um sicherzustellen, dass Ihr Code nur ausgeführt wird, wenn Sie alle benötigten Daten haben.

Zusätzlich haben die von $http zurückgegebenen Daten eine Eigenschaft data, die das Ergebnis des Aufrufs enthält.

function sendData(postData, url) { 
    // subscribe to promise, and add your code in the then block 
    apiCall(postData,url) 
    .then(function(response) { 
     console.log(response.email); 
     console.log(response.count); 
    }); 
} 

function apiCall(postData, postUrl) { 
    // return the promise 
    return $http({ 
    method : 'POST', 
    url  : postUrl, 
    data : postData, 
    headers : {'Content-Type': 'application/json'} 
    }).success(function(response) { 
    var result = {}; 
    for (var attr in response.data) { 
     if (response.data.hasOwnProperty(attr)) { 
     result[attr] = response.data[attr]; 
     } 
    } 
    return result; 
    }); 
} 

---

Beachten Sie, dass die data Eigenschaft von einem $ HTTP-Anfrage ist garantiert ein einfaches Objekt ohne zusätzliche Eigenschaften auf dessen Prototyp sein, so dass Sie nicht wirklich brauchen die hasOwnProperty überprüfen. apiCall kann vereinfacht werden:

function apiCall(postData, postUrl) { 
    // return the promise 
    return $http({ 
    method : 'POST', 
    url  : postUrl, 
    data : postData, 
    headers : {'Content-Type': 'application/json'} 
    }).success(function(response) { 
    return response.data; 
    }); 
}