javascript - 访问JSON元素返回未定义

我正在尝试打印出名为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();
    });
}

最佳答案

好像您对数据进行了双重编码。 response.data的控制台输出是{"favColor":"green"}的事实证明它是一个字符串（如果它是一个对象，则会看到类似Object { ... }的东西）。

您应该在服务器端修复该问题，以便您的数据不包含嵌套的JSON，并且您的代码可以正常工作。

关于javascript - 访问JSON元素返回未定义，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37079422/