Split an array of data into separate arrays

Question

I am trying to hook data into apexchart chart

<apexchart
    type="area"
    height="350"
    :options="chartOptions"
    :series="series">
</apexchart>

I have an array of data, but for plotting a graph I need to split it into 3 different arrays for plotting a graph, but I don't know how to do it using JS

i get an array like this from api

dataOverview = [
    {
        "id": 1,
        "successfullySyngranized": 1,
        "unsuccessfullySynchronized": 5,
        "timeStamp": "2020-11-01T00:00:00"
    },
    {
        "id": 2,
        "successfullySyngranized": 2,
        "unsuccessfullySynchronized": 4,
        "timeStamp": "2020-11-02T00:00:00"
    },
    {
        "id": 3,
        "successfullySyngranized": 3,
        "unsuccessfullySynchronized": 3,
        "timeStamp": "2020-11-03T00:00:00"
    },
    {
        "id": 4,
        "successfullySyngranized": 4,
        "unsuccessfullySynchronized": 2,
        "timeStamp": "2020-11-04T00:00:00"
    },
    {
        "id": 5,
        "successfullySyngranized": 5,
        "unsuccessfullySynchronized": 1,
        "timeStamp": "2020-11-05T00:00:00"
    }];

as a result, I need to get such arrays

var series = [];
var timeStamp = [];

and insert them into the chart settings

data() {
    return {
        dataOverview: [],
        series: [] // insert series objects,
        chartOptions: {
            //...
            // some options
            //...
            xaxis: {
                type: "datetime",
                categories: [  // insert timeStamp array
                    // "2020-11-01T00:00:00",
                    // "2020-11-02T00:00:00",
                    // "2020-11-03T00:00:00",
                    // "2020-11-04T00:00:00",
                    // "2020-11-05T00:00:00"
                ]  
            },
            //...
            // some options
            //...
        }
    }
}

beforeMount() {   
   this.onGetDataOverview();
},
methods: {
onGetDataOverview() {
  this.$axios
    .$get(
      this.$store.getters["store/getApiPath"] + "/Analyst/GetOverviewData"
    )
    .then(response => {
      this.dataOverview = response;
      const seriesOne = this.dataOverview.map(
        ({ successfullySyngranized }) => successfullySyngranized
      );
      const seriesTwo = this.dataOverview.map(
        ({ unsuccessfullySynchronized }) => unsuccessfullySynchronized
      );

      const series2 = [
        { name: "series1", data: seriesOne },
        { name: "series2", data: seriesTwo }
      ];
      this.series = series2;
          
      //Here I am trying to insert time data, however the graph does not start
      
        let xaxis = {
        ...this.chartOptions.xaxis,
        categories: this.dataOverview.map(({ timeStamp }) => timeStamp)
      };
      this.chartOptions = { ...this.chartOptions, ...{ xaxis: xaxis } };
    })

when inserting time data - the graph is not built, however if I explicitly indicate the time in the declaration of variables - the graph is built

picture

but also I need to do tracking so that the graph moves when new data is received i.e. use computed

Jamiec · Accepted Answer · 2020-11-11 09:31:11Z

2

This is very simple you just use .map

var series1 = dataOverview.map(x => x.series1);
var series2 = dataOverview.map(x => x.series2);
var categories  = dataOverview.map(x => x.timestamp);

answered Nov 11, 2020 at 9:31

Jamiec

136k15 gold badges142 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Boussadjra Brahim · Accepted Answer · 2020-11-11 19:53:43Z

Supposing that dataOverview is defined as data property like :

data(){
  return {
     dataOverview:[...]
   }
}

the series and chartOptions should be defined as computed properties as follows :

computed:{
   series(){
     let _series=[
           {
             name:'series1',
             data: this.dataOverview.map(item=>item.series1)
           },
           {
            name:'series2',
             data: this.dataOverview.map(item=>item.series2)
           }
         ]
     return _series;
   },
  chartOptions(){
       return {
            //...
            // some options
            //...
            xaxis: {
                type: "datetime",
                categories: this.dataOverview.map(item=>item.timestamp)
            },
            //...
            // some options
            //...
        }
   }

}

EDIT

You've a reactivity issue in :

   this.chartOptions.xaxis.categories = this.dataOverview.map(
        ({ timeStamp }) => timeStamp
     );

it should be :


let xaxis = { ...this.chartOptions.xaxis, categories: this.dataOverview.map(
        ({ timeStamp }) => timeStamp
     ) }
this.chartOptions = { ...this.chartOptions, ...{ xaxis: xaxis } }

topdev87 · Accepted Answer · 2020-11-11 09:32:15Z

Use map method of the array.

const dataOverview = [{
    id: 1,
    series1: 31,
    series2: 11,
    timestamp: "2018-09-19T00:00:00.000Z"
  },
  {
    id: 2,
    series1: 40,
    series2: 32,
    timestamp: "2018-09-19T03:30:00.000Z"
  },
  {
    id: 3,
    series1: 28,
    series2: 45,
    timestamp: "2018-09-19T06:30:00.000Z"
  },
  {
    id: 4,
    series1: 51,
    series2: 32,
    timestamp: "2018-09-19T09:30:00.000Z"
  },
  {
    id: 5,
    series1: 42,
    series2: 34,
    timestamp: "2018-09-19T11:30:00.000Z"
  }
];

var series1 = dataOverview.map(({ series1 }) => series1);
var series2 = dataOverview.map(({ series2 }) => series2);
var timeStamp = dataOverview.map(({ timestamp }) => timestamp);

console.log(series1, series2, timeStamp);

Maksym Bezruchko · Accepted Answer · 2020-11-11 09:32:40Z

1

var series = [
   {
      name: "series1",
      data: dataOverview.map(({series1}) => series1)
   },
   {
      name: "series2",
      data: dataOverview.map(({series2}) => series2)
   }
]

var timeStamp = dataOverview.map(({timestamp}) => timestamp);

answered Nov 11, 2020 at 9:32

Maksym Bezruchko

1,2588 silver badges24 bronze badges

Comments

Robert · Accepted Answer · 2020-11-11 09:34:11Z

Iterate once through array and collect data. O(n)

const dataOverview = [{
    id: 1,
    series1: 31,
    series2: 11,
    timestamp: "2018-09-19T00:00:00.000Z"
  },
  {
    id: 2,
    series1: 40,
    series2: 32,
    timestamp: "2018-09-19T03:30:00.000Z"
  },
  {
    id: 3,
    series1: 28,
    series2: 45,
    timestamp: "2018-09-19T06:30:00.000Z"
  },
  {
    id: 4,
    series1: 51,
    series2: 32,
    timestamp: "2018-09-19T09:30:00.000Z"
  },
  {
    id: 5,
    series1: 42,
    series2: 34,
    timestamp: "2018-09-19T11:30:00.000Z"
  }
];


const collect = (data) =>{
  const series1 = []
  const series2 = []
  const timestamp = []
  data.forEach(item => {
    series1.push(item.series1)
    series2.push(item.series2)
    timestamp.push(item.timestamp)
  })
  return {series1, series2, timestamp}
}

console.log(collect(dataOverview));

Armando Guarino · Accepted Answer · 2020-11-11 09:35:21Z

1

Using map:

const seriesOne = dataOverview.map(el => el.series1);
const seriesTwo = dataOverview.map(el => el.series2);

const series = [
  { name: 'series1', data: seriesOne},
  {name: 'series2', data: seriesTwo}
]

console.log(series);

answered Nov 11, 2020 at 9:35

Armando Guarino

1,6711 gold badge8 silver badges18 bronze badges

Collectives™ on Stack Overflow

Split an array of data into separate arrays

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related