如何在jQuery中将JSON转换为指定格式数组以生成柱状图

没问题，我帮你搞定这个JSON转数组的需求——看起来你是要把业务统计数据转成适合柱状图的嵌套结构对吧？直接上解决方案：

原始JSON数据（整理为标准格式） #

[
  {"Business": "DS", "DocCount": 18, "NextReviewCount": 14, "UptoDateCount": 1, "OverDueCount": 3, "url":"link1.html"},
  {"Business": "MRCSB", "DocCount": 15, "NextReviewCount": 14, "UptoDateCount": 1, "OverDueCount": 0, "url":"link1.html"},
  {"Business": "PCGB", "DocCount": 18, "NextReviewCount": 12, "UptoDateCount": 2, "OverDueCount": 4, "url":"link1.html"},
  {"Business": "PGB", "DocCount": 10, "NextReviewCount": 8, "UptoDateCount": 1, "OverDueCount": 1, "url":"link1.html"}
]

实现代码 #

我们可以用JavaScript数组方法快速完成转换，逻辑清晰还容易维护：

// 假设你的原始JSON数据已经解析为这个数组
const rawData = [
  {"Business": "DS", "DocCount": 18, "NextReviewCount": 14, "UptoDateCount": 1, "OverDueCount": 3, "url":"link1.html"},
  {"Business": "MRCSB", "DocCount": 15, "NextReviewCount": 14, "UptoDateCount": 1, "OverDueCount": 0, "url":"link1.html"},
  {"Business": "PCGB", "DocCount": 18, "NextReviewCount": 12, "UptoDateCount": 2, "OverDueCount": 4, "url":"link1.html"},
  {"Business": "PGB", "DocCount": 10, "NextReviewCount": 8, "UptoDateCount": 1, "OverDueCount": 1, "url":"link1.html"}
];

// 1. 定义需要提取的统计字段顺序（对应你要的4个子数组）
const targetFields = ['DocCount', 'NextReviewCount', 'UptoDateCount', 'OverDueCount'];
// 2. 定义每个子数组里的业务名称排序
const businessSortOrder = ['PGB', 'DS', 'MRCSB', 'PCGB'];

// 3. 生成目标数组
const cXample = targetFields.map(field => {
  return businessSortOrder.map(businessName => {
    // 找到对应业务的数据项
    const matchedItem = rawData.find(item => item.Business === businessName);
    // 组装成要求的[数值, 业务名, 链接]格式
    return [matchedItem[field], businessName, matchedItem.url];
  });
});

// 输出结果验证，和你要的格式完全一致
console.log(cXample);

代码说明 #

• targetFields：明确我们要按哪四个统计字段生成子数组，顺序和你需要的结果完全对应；
• businessSortOrder：指定每个子数组里元素的排列顺序，确保最终数组的顺序和你给出的示例一致；
• 两层map嵌套：外层遍历每个统计字段，内层遍历业务名称，通过find匹配对应的数据，快速组装成目标格式；
• 生成的cXample可以直接用于柱状图的数据源，不需要额外调整。

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