JSON要素へのアクセスが未定義の場合

Question

favColorというJSON要素を印刷しようとしています。 favColorはresponse.dataに含まれていますが、何らかの理由でresponse.data.favColorを使用してアクセスできません。私はコンソールに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(); 
    }); 
} 

Answer 1

はあなたの符号化データを二重にように思えます。 response.dataのコンソール出力が{"favColor":"green"}であるという事実は、それが文字列であることを証明しています（オブジェクトの場合は、Object { ... }のようになります）。

データにネストされたJSONが含まれておらず、コードが正常に動作するように、サーバー側で修正する必要があります。