为何这段代码弹出undefined？JSON数据访问问题排查

你遇到的问题核心原因很明确——你把原本的JavaScript对象转换成了字符串，却试图去访问字符串的对象属性。

具体来说，你代码里的var a = (JSON.stringify(res.items[0]))这一步，JSON.stringify()方法的作用是把JavaScript对象序列化成JSON格式的字符串。此时变量a已经不再是一个包含用户信息的对象了，而是一段纯文本字符串。字符串本身没有display_name这个属性，所以你调用a.display_name自然会返回undefined。

当你直接alert(a)时能看到内容，是因为你把整个字符串打印出来了，它看起来像对象，但本质上只是一串文本。

修正后的代码 #

你只需要去掉多余的JSON.stringify()，直接使用返回的对象即可：

<html> 
<head> 
  <meta charset="utf-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  <meta name="viewport" content="width=device-width"> 
  <title>Fetch json example</title> 
  <link rel="stylesheet" href="style.css"> 
</head> 
<body> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
  <script> 
    $(document).ready(function(){
      $.ajax({
        url: "https://api.stackexchange.com/2.2/users/4944823?order=desc&sort=reputation&site=stackoverflow",
        type: 'GET',
        dataType: 'json',
        success: function(res) {
          // 直接使用对象，不需要转成字符串
          var user = res.items[0];
          alert(user.display_name);
          // 如果需要查看完整对象结构，推荐用console.log
          console.log(user);
        }
      });
    });
  </script> 
</body> 
</html>

额外提示 #

如果你需要调试查看对象的完整结构，更推荐使用console.log(user)，在浏览器的开发者工具控制台里可以展开对象，清晰看到所有属性和值，比alert更直观。

内容的提问来源于stack exchange，提问作者Wathsara Wishwantha Daluwatta