how to add elements of and object into another in javascript-CodePudding

I'm using Chart.js, I multiple line-charts have same styling different data. So I want to make a source for the stylings called _props and include it in the charts

this._props = {
  icons: ['chevron-bottom', 'chevron-top', 'chevron-top', 'chevron-top', 'chevron-bottom'],
  borderColor: Globals.primary,
  pointBackgroundColor: Globals.primary,
  pointBorderColor: Globals.primary,
  pointHoverBackgroundColor: Globals.foreground,
  pointHoverBorderColor: Globals.primary,
  borderWidth: 2,
  pointRadius: 2,
  pointBorderWidth: 2,
  pointHoverBorderWidth: 2,
  pointHoverRadius: 5,
  fill: false,
};
this._smallLineChart1 = ChartsExtend.SmallLineChart('lineChart1', {
  labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
  datasets: [
    {
      label: 'BTC / USD',
      data: [9415.1, 9430.3, 9436.8, 9471.5, 9467.2],
      this._props, // the elements should be in here not inside another array or object.
    },
  ],
});

I want it to be like this:

this._smallLineChart1 = ChartsExtend.SmallLineChart('lineChart1', {
  labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
  datasets: [
    {
    label: 'BTC / USD',
    data: [9415.1, 9430.3, 9436.8, 9471.5, 9467.2],
    icons: ['chevron-bottom', 'chevron-top', 'chevron-top', 'chevron-top', 'chevron-bottom'],
    borderColor: Globals.primary,
    pointBackgroundColor: Globals.primary,
    pointBorderColor: Globals.primary,
    pointHoverBackgroundColor: Globals.foreground,
    pointHoverBorderColor: Globals.primary,
    borderWidth: 2,
    pointRadius: 2,
    pointBorderWidth: 2,
    pointHoverBorderWidth: 2,
    pointHoverRadius: 5,
    fill: false,
    },
  ],
});

note: the functions are in a class

CodePudding user response：

You could use the spread operator (...) to add your props inside the dataset. Then you can combine what you already have stored with the extra props.

this._smallLineChart1.datasets[0] = {...this._smallLineChart1.datasets[0],...this._props};

Here's an example using a Test class

class Test {
_props;
_smallLineChart1;
constructor(){
  this._props = {
   someProp:'',
   borderWidth: 2,
   pointRadius: 2,
   pointBorderWidth: 2,
   pointHoverBorderWidth: 2,
   pointHoverRadius: 5,
   fill: false,
  };
  this._smallLineChart1 = {
    labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
    datasets: [
      {
        label: 'BTC / USD',
        data: [9415.1, 9430.3, 9436.8, 9471.5, 9467.2],
      },
    ],
  };
  this._smallLineChart1.datasets[0] = {...this._smallLineChart1.datasets[0],...this._props};
  console.log(this)
 }
}
new Test();