解析 JSON 以在 JQuery 中创建二维数组

Posted 2023-05-08

技术标签:

【中文标题】解析 JSON 以在 JQuery 中创建二维数组【英文标题】：Parse JSON to create 2D array in JQuery 【发布时间】：2020-01-26 07:16:20 【问题描述】：

下面是一个 JSON 数组，我想使用 jquery 将其更改为二维数组。在给定的 JSON 格式中，我需要根据它们的 jobNumber 和 activityName 对项目进行分组。而且内部数组必须基于item创建。

[

"vehicleHistoryList": [
  
    "jobNumber": "X9001027",
    "activityName": "5K SERVICE",
    "item": "Labour",
    "description": "Vincent Esmas",
  ,
  
    "jobNumber": "X9001027",
    "activityName": "5K SERVICE",
    "item": "Material",
    "description": "OIL FILTER COROLLA",
  ,
  
    "jobNumber": "X9001027",
    "activityName": "5K SERVICE",
    "material": "Material",
    "description": "10W40 HELIX HX7 ENGINE OIL - SHELL (AUTO EXPRESS)",
  ,
  
    "jobNumber": "X9001124",
    "activityName": "PERIODIC CHECK UP",
    "item": "Material",
    "description": "TERMINAL ASSY INNOVA",
  ,
  
    "jobNumber": "X9001124",
    "activityName": "BATTERY TERMINALS",
    "item": "Labour",
    "description": "Muslim Shah Abdullah Shah",
  ,
  
    "jobNumber": "X9002578",
    "activityName": "5K SERVICE",
    "item": "Material",
    "description": "RIM (ALLOY )FOR YARIS 2016",
  ,
  
    "jobNumber": "X9002578",
    "activityName": "5K SERVICE",
    "item": "Material",
    "description": "TYRE 185/60 R15-MAXXIS",
  ,
  
    "jobNumber": "X9002578",
    "activityName": "5K SERVICE",
    "item": "Labour",
    "description": "Muhammad Akbar Hussain Shah",
  ,
  
    "jobNumber": "X9002578",
    "activityName": "PERIODIC CHECK UP",
    "item": "Material",
    "description": "RIM (ALLOY )FOR YARIS 2016",
  ,
  
    "jobNumber": "X9002578",
    "activityName": "PERIODIC CHECK UP",
    "item": "Labour",
    "description": "Muhammad Akbar Hussain Shah",
  ,
  
    "jobNumber": "X9002578",
    "activityName": "PERIODIC CHECK UP",
    "item": "Labour",
    "description": "Junaid Ali",
  
]

]

如果item 值为Material，则需要将description 值添加到材质数组节点。如果item 值为Labour，则需要将description 值添加到Labor 数组节点。

以下是所需格式。

[
 
    "vehicleHistoryList": [
      
        "jobNumber": "X9001027",
        "activities": [
            
                "activityName": "5K SERVICE",
                "material":[
                    "OIL FILTER COROLLA","10W40 HELIX HX7 ENGINE OIL - SHELL (AUTO EXPRESS)"
                ],
                "labours":[
                    "Vincent"
                ]
            
        ]
      ,
      
        "jobNumber": "X9001124",
        "activities": [
            
                "activityName": "PERIODIC CHECK UP",
                "material":[
                    "TERMINAL ASSY INNOVA"
                ],
                "labours":[
                    "Muslim Shah"
                ]
            
        ]
      ,
      
        "jobNumber": "X9002578",
        "activities": [
            
                "activityName": "5K SERVICE",
                "material":[
                    "RIM (ALLOY )FOR YARIS 2016","TYRE 185/60 R15-MAXXIS"
                ],
                "labours":[
                    "Muhammad Akbar","Hussain Shah"
                ]
            ,
            
                "activityName": "PERIODIC CHECK UP",
                "material":[
                    "RIM (ALLOY )"
                ],
                "labours":[
                    "Muhammad Hussain","Junaid Ali"
                ]
            
        ]
      
    ]
  
]

注意：不同的作业编号可以有相同的活动名称。

下面是我用过的代码：

var jobNum = []
var jobList = []
var activityName = []
var activityList = []

for(var i=0; i<vehicleHistoryList.length;i++) 
    if(jobNum.indexOf(vehicleHistoryList[i].jobNumber)==-1) 
        jobNum.push(vehicleHistoryList[i].jobNumber)
        jobList.push(jobNum:vehicleHistoryList[i].jobNumber,activities:[])

        if(activityName.indexOf(vehicleHistoryList[i].activityName)==-1) 
            activityName.push(vehicleHistoryList[i].activityName)
            activityList.push(jobNum:vehicleHistoryList[i].jobNumber,activityName:vehicleHistoryList[i].activityName,material:[],labour:[])

            var index = activityList.map(function (img)  return img.activityName; ).indexOf(vehicleHistoryList[i].activityName);
            if(vehicleHistoryList[i].material =="Material") 
                activityList[index].material.push(vehicleHistoryList[i].description);
             else 
                activityList[index].labour.push(vehicleHistoryList[i].description);
            
         else 
            var index = activityList.map(function (img)  return img.activityName; ).indexOf(vehicleHistoryList[i].activityName);

            if(vehicleHistoryList[i].material =="Material") 
                activityList[index].material.push(vehicleHistoryList[i].description);
             else 
                activityList[index].labour.push(vehicleHistoryList[i].description);
            
        
     else 
        var index = jobList.map(function (img)  return img.jobNum; ).indexOf(vehicleHistoryList[i].jobNumber);
        console.log(index)

        if(activityName.indexOf(vehicleHistoryList[i].activityName)==-1) 
            activityName.push(vehicleHistoryList[i].activityName)
            activityList.push(jobNum:vehicleHistoryList[i].jobNumber,activityName:vehicleHistoryList[i].activityName,material:[],labour:[])

            var index = activityList.map(function (img)  return img.activityName; ).indexOf(vehicleHistoryList[i].activityName);
            if(vehicleHistoryList[i].material =="Material") 
                activityList[index].material.push(vehicleHistoryList[i].description);
             else 
                activityList[index].labour.push(vehicleHistoryList[i].description);
            
         else 
            var index = activityList.map(function (img)  return img.activityName; ).indexOf(vehicleHistoryList[i].activityName);

            if(vehicleHistoryList[i].material =="Material") 
                activityList[index].material.push(vehicleHistoryList[i].description);
             else 
                activityList[index].labour.push(vehicleHistoryList[i].description);

我在这里面临的问题是，如果相同的 activityName 进入不同的 jobNumber，则所有相应的劳动力和材料都添加到同一个节点。

请帮我解决这个问题，我们将不胜感激。谢谢

【问题讨论】：

我认为否决票是因为您没有给出明确的问题陈述。您没有指出您当前拥有的代码哪里出错了。 @RobbyCornelissen 用我的代码问题编辑了问题。 @RobbyCornelissen 谢谢 :) 【参考方案1】：

它基本上是一个两级索引操作。如果您在结果中找到该作业，请添加它，否则创建它。活动也一样。

仅使用标准数组方法：

const [vehicleHistoryList] = data;

const result = vehicleHistoryList.reduce((jobs, v) => 
  let job = jobs.find((jobNumber) => jobNumber === v.jobNumber);

  if (!job) 
    job = jobNumber: v.jobNumber, activities: [];
    jobs.push(job);
  

  let activity = job.activities.find((activityName) => activityName === v.activityName);

  if (!activity) 
    activity = 
      activityName: v.activityName,
      materials: [],
      labours: []
    ;
    job.activities.push(activity);
    

  if (v.item === 'Material') activity.materials.push(v.description);
  if (v.item === 'Labour') activity.labours.push(v.description);

  return jobs;
, []);

完成sn-p：

const data = [
  "vehicleHistoryList": [
      "jobNumber": "X9001027",
      "activityName": "5K SERVICE",
      "item": "Labour",
      "description": "Vincent Esmas",
    ,
    
      "jobNumber": "X9001027",
      "activityName": "5K SERVICE",
      "item": "Material",
      "description": "OIL FILTER COROLLA",
    ,
    
      "jobNumber": "X9001027",
      "activityName": "5K SERVICE",
      "item": "Material",
      "description": "10W40 HELIX HX7 ENGINE OIL - SHELL (AUTO EXPRESS)",
    ,
    
      "jobNumber": "X9001124",
      "activityName": "PERIODIC CHECK UP",
      "item": "Material",
      "description": "TERMINAL ASSY INNOVA",
    ,
    
      "jobNumber": "X9001124",
      "activityName": "BATTERY TERMINALS",
      "item": "Labour",
      "description": "Muslim Shah Abdullah Shah",
    ,
    
      "jobNumber": "X9002578",
      "activityName": "5K SERVICE",
      "item": "Material",
      "description": "RIM (ALLOY )FOR YARIS 2016",
    ,
    
      "jobNumber": "X9002578",
      "activityName": "5K SERVICE",
      "item": "Material",
      "description": "TYRE 185/60 R15-MAXXIS",
    ,
    
      "jobNumber": "X9002578",
      "activityName": "5K SERVICE",
      "item": "Labour",
      "description": "Muhammad Akbar Hussain Shah",
    ,
    
      "jobNumber": "X9002578",
      "activityName": "PERIODIC CHECK UP",
      "item": "Material",
      "description": "RIM (ALLOY )FOR YARIS 2016",
    ,
    
      "jobNumber": "X9002578",
      "activityName": "PERIODIC CHECK UP",
      "item": "Labour",
      "description": "Muhammad Akbar Hussain Shah",
    ,
    
      "jobNumber": "X9002578",
      "activityName": "PERIODIC CHECK UP",
      "item": "Labour",
      "description": "Junaid Ali",
    
  ]
];

const [vehicleHistoryList] = data;

const result = vehicleHistoryList.reduce((jobs, v) => 
  let job = jobs.find((jobNumber) => jobNumber === v.jobNumber);
  
  if (!job) 
    job = jobNumber: v.jobNumber, activities: [];
    jobs.push(job);
  
  
  let activity = job.activities.find((activityName) => activityName === v.activityName);
  
  if (!activity) 
    activity = 
      activityName: v.activityName,
      materials: [],
      labours: []
    ;
    job.activities.push(activity);
    
  
  if (v.item === 'Material') activity.materials.push(v.description);
  if (v.item === 'Labour') activity.labours.push(v.description);
  
  return jobs;
, []);

console.log([vehicleHistoryList: result]);

【讨论】：

多谢大哥。我很感激你的回答。它真的按照我的要求工作。再次感谢。

以上是关于解析 JSON 以在 JQuery 中创建二维数组的主要内容，如果未能解决你的问题，请参考以下文章

如何在 jquery 中创建二维关联数组？

在 JQuery 中创建 JSON 对象的 JSON 数组

如何在 jquery 中创建关联数组并通过 ajax 发送以使用 php 解析？

jquery解析php通过ajax传过来的json二维数组对象

将 json_encoded 数据解析为用于 UIPickerView 的数组 - Xcode

无法取消嵌套 json 文件以在 r 中创建地图？