訪問JSON元素返回undefined

我試圖打印出名爲favColor的JSON元素。我可以看到，favColor包含在response.data中，但由於某些原因，我無法使用response.data.favColor訪問它。訪問JSON元素返回undefined

如果我打印response.data到控制檯，我得到如下：

{"favColor":"green"}

然而，response.data.favColor返回undefined。

我的形式：

<form> 
     <label>Favorite Color: </label> 
     <br> 
     <input id="favColor" name="favColor" type="text"> 
     <input type="submit" value="Submit POST Data" id="submitPost"> 
    </form> 
    <br> 
    <div> 
     <label>Favorite Color:</label> 
     <div id=returnedFavColor></div> 
    </div>

我的腳本：

document.addEventListener('DOMContentLoaded', post); 

function post() { 
    document.getElementById('submitPost').addEventListener('click', function(event) { 
     var req = new XMLHttpRequest(); 
     var payload = {favColor: null}; 
     payload.favColor = document.getElementById('favColor').value; 
     req.open("POST", "https://httpbin.org/post", true); 
     req.setRequestHeader('Content-Type', 'application/json'); 
     req.addEventListener('load',function(){ 
      if(req.status >= 200 && req.status < 400){ 
       var response = JSON.parse(req.responseText); 
       console.log(response.data); 
       document.getElementById('favColor').textContent = response.data.favColor; 
      } else { 
       console.log("Error in network request: " + request.statusText); 
      } 
     }); 
     req.send(JSON.stringify(payload)); 
     event.preventDefault(); 
    }); 
}

來源

2016-05-06 123

或許'response.data'只是一個值爲{{favColor「：」green「}'的字符串。你可以登錄'console.log（typeof response.data）;'來測試這個。 – wero

同意@wero您可能需要反序列化它。 – nurdyguy

*「訪問JSON元素返回未定義」*這裏還有一個術語問題。「JSON」是一種數據交換格式，它基本上就是文本，就像XML，YAML或CSV一樣。在JavaScript中，文本只能存在一部分字符串（這就是'req.responseText'返回的內容）。當你解析包含JSON的字符串時（'JSON.parse（...）'），你會得到一個JavaScript值，通常是一個* object *或一個* array *。那時你不再處理JSON了。訪問數據的任何問題都與JavaScript相關，而不是JSON。 –

好像你雙重編碼，您的數據。事實上，response.data的控制檯輸出是{"favColor":"green"}證明它是一個字符串（如果它是一個對象，你會看到類似Object { ... }的東西）。

您應該在服務器端修復此問題，以便您的數據不包含嵌套的JSON，並且您的代碼將正常工作。

來源

2016-05-06 19:50:31

我該如何解決在服務器端的問題？ – 123

確保您只將JSON的「頂級」值編碼（不管是否包含'data'屬性），而不是任何其他值。什麼*確切*要做取決於你的代碼當然。 –

訪問JSON元素返回undefined

回答

相關問題