如何通过Ajax GET请求遍历JSON API字典字段并动态获取rank数据？

原代码的核心问题 #

1. 循环发送5次完全相同的API请求，纯粹浪费服务器资源和页面加载时间
2. 异步回调里固定写死rank_1，而且因为Ajax的异步特性，循环变量i也没法按预期和图表容器对应

优化方案：一次请求+遍历处理 #

只发一次Ajax请求拿到所有top_5数据，再遍历匹配对应的图表容器，既高效又精准：

<script>
$.ajax({
    method: "GET",
    url: '/refunds/api',
    success: function(data){
        // 遍历rank_1到rank_5，匹配对应图表容器
        for (let i = 1; i < 6; i++) {
            // 用方括号语法动态获取对应rank的数据
            const metric = data.top_5[`rank_${i}`];
            const myDiv = `myChart${i}`;
            // 确保数据存在再调用图表方法
            if (metric) {
                barChart(metric, myDiv); // 建议把数据和容器ID作为参数传入barChart
            }
        }
    },
    error: function(error_data){
        console.log("请求出错");
        console.log(error_data);
    }
});
</script>

关键细节说明 #

• 用方括号语法data.top_5[rank_${i}]替代固定的点语法，实现动态匹配不同rank的数据
• 把metric和myDiv作为参数传入barChart（需要你调整barChart的实现），保证每个图表拿到对应的数据和容器
• 如果top_5的键顺序不确定，也可以用Object.entries遍历所有键值对：

  Object.entries(data.top_5).forEach(([rankKey, metric]) => {
      // 从rankKey里提取数字，比如从rank_1中拿到1
      const rankNum = rankKey.split('_')[1];
      const myDiv = `myChart${rankNum}`;
      barChart(metric, myDiv);
  });
  

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