在javascript中訪問對象屬性的問題顯示未定義？

Question

我只是調用api返回josn編碼數據並試圖打印對象屬性，但顯示未定義，但是當我打印該對象時，該對象具有該屬性和值。 「sameerdighe14 @ gmail的：

我的代碼基於

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 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); 
?> 

控制檯

對象{電子郵件響應數據。 com「，輸入：」google「}

Answer 1

您需要使用promise來使其工作。一旦HTTP請求成功完成，你的success函數就被稱爲異步。這樣return response;在請求完成之前執行 - >因此它仍然是一個空對象{}。使用AngularJS promises使其工作。這是一個簡單的工作fiddle example。

function sendData(postData, url){ 

    var filteredData = {}; 

    apiCall(postData,url).then(function (response) { 

     for (var attr in response.data) { 
      if (response.data.hasOwnProperty(attr)) { 
       filteredData[attr] = response.data[attr]; 
      } 
     } 

     console.log(filteredData.email); 
     console.log(filteredData.count); 
    }); 
} 


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

Answer 2

該代碼沒有以您期望的順序運行。 $http需要時間才能運行，因此apiCall在修改前會返回響應。

要解決此問題，您需要使用承諾來確保代碼只在您擁有所需的所有數據時才能運行。

此外，從$http返回的數據有一個屬性data，其中包含調用的結果。

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

---

注意，從$ HTTP請求data屬性是保證不會對其原型額外的屬性普通對象，所以你並不真正需要的hasOwnProperty檢查。可以簡化apiCall：

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