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

回答

相关问题