jQuery遍历ajax返回JSON数组分组计算得到NaN如何处理

安全阿岳

2026-9-27

问题根因

接口返回的每条数据按类型拆分存储：类型为verkocht的条目仅包含sum_verkocht字段，类型为bezoeken的条目仅包含sum_bezoeken字段，直接遍历单条数据计算时，两个求和字段必然有一个不存在，parseInt后得到NaN，最终运算结果为NaN
同时还存在sum_verkocht为0的场景，未做兼容处理会导致运算结果为无穷大，不符合展示要求

修复后的代码

$.ajax({
  type: 'POST',
  url: 'assets/ajax/get-results.php',
  dataType: 'json',
  cache: false,
  data: {}, 
  success: function (data) {
    // 定义分组存储对象，键为 月份_年份_邮编，值为对应的两个求和值
    const groupMap = {}
    data.forEach(item => {
      const key = `${item.month}_${item.year}_${item.postal}`
      // 初始化分组
      if(!groupMap[key]) {
        groupMap[key] = {
          sum_bezoeken: 0,
          sum_verkocht: 0
        }
      }
      // 按类型赋值
      if(item.type === 'bezoeken') {
        groupMap[key].sum_bezoeken = parseInt(item.sum_bezoeken) || 0
      } else if(item.type === 'verkocht') {
        groupMap[key].sum_verkocht = parseInt(item.sum_verkocht) || 0
      }
    })

    // 遍历分组计算结果并填充DOM
    Object.keys(groupMap).forEach(key => {
      const {sum_bezoeken, sum_verkocht} = groupMap[key]
      let result = 0
      // 除数不为0时才计算
      if(sum_verkocht !== 0) {
        // 可按需调整小数保留位数，示例为保留2位
        result = (sum_bezoeken / sum_verkocht).toFixed(2)
      } else {
        // 销量为0时可自定义展示内容，示例为显示横杠
        result = '-'
      }
      $(`.gem_${key}`).html(result)
    })
  }
});