Zugriff auf JSON-Element gibt undefined zurück

Question

Ich versuche, ein JSON-Element mit dem Namen favColor auszudrucken. Ich kann sehen, dass favColor in der response.data enthalten ist, aber ich kann nicht auf response.data.favColor aus irgendeinem Grund zugreifen.

Wenn ich response.data an die Konsole zu drucken, erhalte ich folgendes:

{"favColor":"green"}

jedoch response.data.favColor kehrt undefined.

Meine Form:

<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> 

My Script:

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

Scheint, wie Sie Ihre Daten doppelt codiert. Die Tatsache, dass die Konsolenausgabe für response.data{"favColor":"green"} ist, beweist, dass es sich um eine Zeichenfolge handelt (wenn es ein Objekt wäre, würden Sie stattdessen so etwas wie Object { ... } sehen).

Sie sollten das auf der Serverseite beheben, damit Ihre Daten keine geschachtelte JSON enthalten, und Ihr Code funktioniert einwandfrei.