使用ChartJS处理数据时出现字符遍历及undefined问题求助

云上老周

2026-5-15

问题根源与解决方案

嘿，这个问题我太熟悉啦！咱们直接说核心原因：

你控制台打印出来的看起来是JSON数组，但实际上你的data参数是字符串类型，而不是JavaScript对象数组。当你用for...in去遍历字符串时，JS会把字符串拆成单个字符逐个遍历——你数一下那个JSON字符串的长度，刚好是90个字符，这就是为什么你得到了90个undefined！每个字符本身没有name和score属性，自然取出来就是undefined。

怎么验证？

在success函数第一行加一句：

console.log(typeof data);

你会发现输出的是"string"，而不是我们期望的"object"。

解决办法

有两种简单的方式可以搞定：

1. 手动解析JSON字符串

把字符串转成JS对象数组，用JSON.parse()就行：

success: function(data) {
  // 先把JSON字符串解析成JS对象数组
  const parsedData = JSON.parse(data);
  console.log(parsedData); // 现在这才是真正的对象数组
  
  var n = [];
  var s = [];
  // 遍历解析后的数组
  parsedData.forEach(item => {
    n.push(item.name);
    s.push(item.score);
  });
  
  // 接下来就可以正常给ChartJS传数据啦
}

2. 让AJAX自动解析JSON（推荐）

如果你用的是jQuery的AJAX请求，直接在请求配置里加dataType: 'json'，jQuery会自动帮你把返回的JSON字符串解析成对象：

$.ajax({
  url: '你的数据接口地址',
  method: 'GET', // 或者POST，看你的接口类型
  dataType: 'json', // 关键配置！告诉jQuery返回的是JSON格式
  success: function(data) {
    console.log(data); // 这里的data已经是对象数组了
    var n = [];
    var s = [];
    data.forEach(item => {
      n.push(item.name);
      s.push(item.score);
    });
    // 后续ChartJS代码...
  }
});