js根据json数据中的某一个属性来给数据分组,交易系统

js根据json数据中的某一个属性来给数据分组


文章摘要: !DOCTYPE html html head meta charset = UTF-8 title / title / head body span id = span style = width: 50px;height: 200px; / span / body script var arr = [{ Group : 1 , Groupheader : 质量管理 , Leftimg : , Left : , Min : , Right : , Rightimg


文章TAG:


  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <title></title>
  6.  
    </head>
  7.  
    <body>
  8.  
    <span id ="span" style="width: 50px;height: 200px;"></span>
  9.  
    </body>
  10.  
    <script>
  11.  
    var arr = [{"Group":1,"Groupheader":"质量管理","Leftimg":"","Left":"","Min":"","Right":"","Rightimg":""},
  12.  
    {"Group":1,"Groupheader":"","Leftimg":"","Left":"","Min":"质量巡检","Right":"","Rightimg":""},
  13.  
    {"Group":2,"Groupheader":"设备管理","Leftimg":"","Left":"","Min":"","Right":"","Rightimg":""},
  14.  
    {"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备专业点检","Right":"","Rightimg":""},
  15.  
    {"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备日检","Right":"","Rightimg":""},
  16.  
    {"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备周检","Right":"","Rightimg":""},
  17.  
    {"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备月检","Right":"","Rightimg":""}];
  18.  
     
  19.  
    var map = {},
  20.  
    dest = [];
  21.  
    for(var i = 0; i < arr.length; i++){
  22.  
    var ai = arr[i];
  23.  
    if(!map[ai.Group]){
  24.  
    dest.push({
  25.  
    Group: ai.Group,
  26.  
     
  27.  
    data: [ai]
  28.  
    });
  29.  
    map[ai.Group] = ai;
  30.  
    }else{
  31.  
    for(var j = 0; j < dest.length; j++){
  32.  
    var dj = dest[j];
  33.  
    if(dj.Group == ai.Group){
  34.  
    dj.data.push(ai);
  35.  
    break;
  36.  
    }
  37.  
    }
  38.  
    }
  39.  
    }
  40.  
    console.log(JSON.stringify(dest));
  41.  
    var sapn = document.getElementById("span");
  42.  
    span.innerHTML = JSON.stringify(dest);
  43.  
    </script>
  44.  
    </html>
 

 

原始数据:

 


			
  1.  
    [{"Group":1,"Groupheader":"质量管理","Leftimg":"","Left":"","Min":"","Right":"","Rightimg":""},
  2.  
    {"Group":1,"Groupheader":"","Leftimg":"","Left":"","Min":"质量巡检","Right":"","Rightimg":""},
  3.  
    {"Group":2,"Groupheader":"设备管理","Leftimg":"","Left":"","Min":"","Right":"","Rightimg":""},
  4.  
    {"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备专业点检","Right":"","Rightimg":""},
  5.  
    {"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备日检","Right":"","Rightimg":""},
  6.  
    {"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备周检","Right":"","Rightimg":""},
  7.  
    {"Group":2,"Groupheader":"","Leftimg":"","Left":"","Min":"设备月检","Right":"","Rightimg":""}];
处理后的数据:

 

 


			
  1.  
    [
  2.  
    {
  3.  
    "Group": 1,
  4.  
    "data": [
  5.  
    {
  6.  
    "Group": 1,
  7.  
    "Groupheader": "质量管理",
  8.  
    "Leftimg": "",
  9.  
    "Left": "",
  10.  
    "Min": "",
  11.  
    "Right": "",
  12.  
    "Rightimg": ""
  13.  
    },
  14.  
    {
  15.  
    "Group": 1,
  16.  
    "Groupheader": "",
  17.  
    "Leftimg": "",
  18.  
    "Left": "",
  19.  
    "Min": "质量巡检",
  20.  
    "Right": "",
  21.  
    "Rightimg": ""
  22.  
    }
  23.  
    ]
  24.  
    },
  25.  
    {
  26.  
    "Group": 2,
  27.  
    "data": [
  28.  
    {
  29.  
    "Group": 2,
  30.  
    "Groupheader": "设备管理",
  31.  
    "Leftimg": "",
  32.  
    "Left": "",
  33.  
    "Min": "",
  34.  
    "Right": "",
  35.  
    "Rightimg": ""
  36.  
    },
  37.  
    {
  38.  
    "Group": 2,
  39.  
    "Groupheader": "",
  40.  
    "Leftimg": "",
  41.  
    "Left": "",
  42.  
    "Min": "设备专业点检",
  43.  
    "Right": "",
  44.  
    "Rightimg": ""
  45.  
    },
  46.  
    {
  47.  
    "Group": 2,
  48.  
    "Groupheader": "",
  49.  
    "Leftimg": "",
  50.  
    "Left": "",
  51.  
    "Min": "设备日检",
  52.  
    "Right": "",
  53.  
    "Rightimg": ""
  54.  
    },
  55.  
    {
  56.  
    "Group": 2,
  57.  
    "Groupheader": "",
  58.  
    "Leftimg": "",
  59.  
    "Left": "",
  60.  
    "Min": "设备周检",
  61.  
    "Right": "",
  62.  
    "Rightimg": ""
  63.  
    },
  64.  
    {
  65.  
    "Group": 2,
  66.  
    "Groupheader": "",
  67.  
    "Leftimg": "",
  68.  
    "Left": "",
  69.  
    "Min": "设备月检",
  70.  
    "Right": "",
  71.  
    "Rightimg": ""
  72.  
    }
  73.  
    ]
  74.  
    }
  75.