AngularJS遍历序列化JSON数据返回undefined，如何正确循环？

你遇到的问题根源很明确：你把$http返回的响应对象转换成了JSON字符串，然后去遍历这个字符串——字符串遍历会逐个返回单个字符，自然拿不到item.email、item.username这类对象属性，所以才会输出undefined。

正确的处理逻辑 #

首先得理清$http成功回调里res对象的结构：

• res.status：HTTP状态码（比如你这里的200）
• res.data：后端返回的实际业务数据（对应你控制台输出里的外层{"data":[{"id":1,...}]}对象）
• 完全不需要用JSON.stringify(res)把响应转成字符串，直接操作原生JavaScript对象即可。

修正后的完整代码 #

getData: function (email) { 
  $http({ 
    method: 'GET', 
    url: '/up', 
    requestHeaders: {Accept: 'application/json'}, 
    params: {email: email} 
  }).then(function successCallback(res) { 
    if (res.status == 204) { 
      // 处理无内容的场景
    } else if (res.status == 200) { 
      // 直接取后端返回的用户数组：res.data.data
      const userList = res.data.data;
      let variable = '';
      let name = '';
      
      // 遍历真实的用户数组
      angular.forEach(userList, function(item) { 
        variable += item.email; 
        name += item.username; 
      });
      
      alert(variable); // 现在会正确输出：yuyu@yahoo.com
    } 
  }, function errorCallback(response) { 
    alert(JSON.stringify(response)); 
  }); 
} 

关键修改点说明 #

1. 删掉了var myJSON = JSON.stringify(res);这行代码，不要把对象转成字符串
2. 正确定位用户数组：res.data.data——因为你的后端返回结构是外层有一个data字段，里面才是用户列表数组
3. 遍历的是实际的用户数组userList，而非字符串

额外优化建议 #

为了避免数组为空时的潜在报错，可以在遍历前加个判断：

if (userList && userList.length > 0) {
  angular.forEach(userList, function(item) { 
    variable += item.email; 
    name += item.username; 
  });
} else {
  alert("未找到匹配的用户数据");
}

内容的提问来源于stack exchange，提问作者Learner