Angular 5使用JSON数据和总和值创建一个数组

时间:2018-04-15 13:46:43

标签: arrays json angular

我正在尝试创建要在图表中显示的数据(2行),但我遇到了问题。

我在这里尝试了几种简化方法,但我无法做到这一点。

我的Json是:

{
  createdDate: "2017-11-17",
  doneDate: "2017-11-17",
},
{
  createdDate: "2017-11-17",
  doneDate: "2017-11-17",
},
{
  createdDate: "2017-11-17",
  doneDate: "2017-11-18",
},
{
  createdDate: "2017-11-18",
  doneDate: "2017-11-18",
},
{
  createdDate: "2017-11-19",
  doneDate: "2017-11-19",
},
{
  createdDate: "2017-11-19",
  doneDate: "2017-11-19",
},
{
  createdDate: "2017-11-20",
  doneDate: "2017-11-20",
},
{
  createdDate: "2017-11-20",
  doneDate: "2017-11-21",
},

我创建了一个界面:

export interface myObject 
{   
  createdDate: Date;   
  doneDate: Date; 
}

我要做的是有一张表格:

Date; created; done
2017-11-17;3;2
2017-11-18;1;2
2017-11-19;2;2
2017-11-20;2;1
2017-11-21;0;1

我会感激任何帮助,即使它向我展示我可以记录自己的地方。

3 个答案:

答案 0 :(得分:1)

假设您的示例数据保存在arr变量中。

export interface Timestamp {
 createdDate: string;
 doneDate: string;
}

const createdCount = arr.reduce((acc: any, { createdDate }): Timestamp => {
  acc[createdDate] = acc[createdDate] === undefined ? 1 : acc[createdDate] + 1;
  return acc;
}, {});

const doneCount = arr.reduce((acc: any, { doneDate }): Timestamp => {
  acc[doneDate] = acc[doneDate] === undefined ? 1 : acc[doneDate] + 1;
  return acc;
}, {});

const dates = arr.reduce((acc: any, { createdDate, doneDate }) => {
  return Array.from(new Set([...acc, createdDate, doneDate]));
}, []);

const result = dates.reduce((acc: any, date) => {
  acc[date] = {
    created: createdCount[date] || 0,
    done: doneCount[date] || 0,
  }
  return acc;
}, {});

enter image description here

Live demo

答案 1 :(得分:0)

这对我没有意义。

你可以在json文件中有一个键,它是一个对象数组:

{
  "arrayOdOobjects": [
    {
      "createdDate": "2017-11-17",
      "doneDate": "2017-11-17"
    },
    {
      "createdDate": "2017-11-17",
      "doneDate": "2017-11-17"
    },
    {
      "createdDate": "2017-11-17",
      "doneDate": "2017-11-18"
    },
    {
       "createdDate": "2017-11-18",
       "doneDate": "2017-11-18"
    },
    {
       "createdDate": "2017-11-19",
       "doneDate": "2017-11-19"
    },

  ]
}

然后你可以通过导入.ts组件文件来获取json:

var json = require('./arrayofobjects.json');

然后迭代它(还有其他方法,但我认为这在视觉上更简单):

export class FooComponent implements OnInit {
  jsonArray = json.arrayOfObjects;
  array = [];
  constructor() { }

  ngOnInit() {
    this.jsonArray.forEach(obj => {
      this.array.push([new Date(), obj.createdDate, obj.doneDate]);
    });

    console.log(this.array)
  }
}

或者我完全错过解释这个问题? ^^ 希望它有所帮助

答案 2 :(得分:0)

我想你正在寻找这样的东西 并且您的JSON数据将满足Amcharts的数据格式,而无需更改

样本数据 -

{ "date1": "2014-12-02", "y1": "2014-12-02 06:24" }, { "date1": "2014-12-04", "y1": "2014-12-02 06:39" }, { "date1": "2014-12-06", "y1": "2014-12-02 07:05" }, { "date1": "2014-12-08", "y1": "2014-12-02 08:15" }, { "date1": "2014-12-09", "y1": "2014-12-02 08:56" }

Please check Amcharts example here