通过(复杂分组依据)分组后,JSON使用对象创建字典

时间:2018-10-22 16:34:18

标签: javascript

我有一个带有日期,值,国家/地区和数字的JSON查询。我想做的是为唯一的日期创建两个不同的JSON字典(它们将是两个)。我要创建的内容显示在我的尝试旁边的代码段中。

var json_data = {"headers":["Time","Value","Country","Number"],"rows":[["2018-09-01","#value1","United Kingdom",25],
["2018-10-01","#value1","United Kingdom",15],
["2018-09-01","#value2","United Kingdom",10],
["2018-10-01","#value2","United Kingdom",65],
["2018-09-01","#value3","United Kingdom",60],
["2018-10-01","#value3","United Kingdom",40],
["2018-09-01","#value1","Germany",55],
["2018-10-01","#value1","Germany",85],
["2018-09-01","#value2","Germany",90],
["2018-10-01","#value2","Germany",30],
["2018-09-01","#value3","Germany",20],
["2018-10-01","#value3","Germany",25],
["2018-09-01","#value1","France",55],
["2018-10-01","#value1","France",40],
["2018-09-01","#value2","France",90],
["2018-10-01","#value2","France",75],
["2018-09-01","#value3","France",30],
["2018-10-01","#value3","France",80]]};

var dataRows = json_data.rows;

var dateFields = ["2018-10-01", "2018-09-01"];

var dateMap = {};
dataRows.forEach(function(d) {
    var date = d[0];
    dateMap[date] = [];

    dateFields.forEach(function(field) {
      var object = {"data":[{"yValue": d[1], "xValue": +d[3]}]};
      dateMap[date].push( object );
    });  
});

document.getElementById("yellow").innerHTML =JSON.stringify(dateMap["2018-09-01"]);

///Target data example
var target = [{
    data: [{
      yValue: '#value1',
      xValue: 25
    }, {
      yValue: '#value2',
      xValue: 10
    }, {
      yValue: '#value3',
      xValue: 60
    }],
    name: 'United Kingdom'
    }, {
    data: [{
      yValue: '#value1',
      xValue: 55
    }, {
      yValue: '#value2',
      xValue: 90
    }, {
      yValue: '#value3',
      xValue: 20
    }],
    name: 'France'
  },{
    data: [{
      yValue: '#value1',
      xValue: 55
    }, {
      yValue: '#value2',
      xValue: 90
    }, {
      yValue: '#value3',
      xValue: 20
    }],
    name: 'Germany'
  }   
]; 

document.getElementById("purple").innerHTML =JSON.stringify(target);

///A group by attempt
//Create dictionary function (transformed JSON)
createDict = (data) => {
  let groups = data.reduce((acc, arr) => {
    if (acc.hasOwnProperty(arr[1])) {
      acc[arr[1]].push(arr);
    } else {
      acc[arr[1]] = [arr];
    }
    return acc;
  }, {});

  let results = [];
  let final = [];
  for (let g in groups) {
    let obj = {yValue: g};
    let a = groups[g][0];
    let b = groups[g][1];
    let c = groups[g][2];
      obj.xValue = a[3];
    results.push(obj);
  }
  
  final.push(results,"name");
  return results;
}

var grouped = createDict(dataRows);
document.getElementById("red").innerHTML =JSON.stringify(grouped);
<h4>Data of first branch (First date)</h4>
<div style="background:yellow;" id="yellow"></div>
<h4>Target Data (How I want it to look like)</h4>
<div style="background:green; color:white" id="purple"></div>
<h4>A group by attempt</h4>
<div style="background:red; color:white" id="red"></div>

1 个答案:

答案 0 :(得分:1)

您可以通过过滤日期数据然后按国家/地区分组来映射日期。

var data = { headers: ["Time", "Value", "Country", "Number"], rows: [["2018-09-01", "#value1", "United Kingdom", 25], ["2018-10-01", "#value1", "United Kingdom", 15], ["2018-09-01", "#value2", "United Kingdom", 10], ["2018-10-01", "#value2", "United Kingdom", 65], ["2018-09-01", "#value3", "United Kingdom", 60], ["2018-10-01", "#value3", "United Kingdom", 40], ["2018-09-01", "#value1", "Germany", 55], ["2018-10-01", "#value1", "Germany", 85], ["2018-09-01", "#value2", "Germany", 90], ["2018-10-01", "#value2", "Germany", 30], ["2018-09-01", "#value3", "Germany", 20], ["2018-10-01", "#value3", "Germany", 25], ["2018-09-01", "#value1", "France", 55], ["2018-10-01", "#value1", "France", 40], ["2018-09-01", "#value2", "France", 90], ["2018-10-01", "#value2", "France", 75], ["2018-09-01", "#value3", "France", 30], ["2018-10-01", "#value3", "France", 80]] },
    dateFields = ["2018-10-01", "2018-09-01"],
    result = dateFields.map(
        date => Array
            .from(
                data.rows
                    .filter(([d]) => date === d)
                    .reduce((m, [, yValue, country, xValue]) =>
                        m.set(country, (m.get(country) || []).concat({ yValue, xValue })),
                        new Map
                    ),
                ([name, data]) => ({ data, name })
            )
    );

console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }