how to add elements of and object into another in javascript

Question

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

John · Accepted Answer · 2022-06-18 06:19:28Z

1

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();

answered Jun 18, 2022 at 6:19

John

11.6k5 gold badges60 silver badges75 bronze badges

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

3 Comments

yasir Over a year ago

got this error: Uncaught TypeError: Cannot read properties of undefined (reading '0') this is the zero it talking about .datasets[0]

John Over a year ago

I only referenced dataset[0] in the example, but you have to make sure dataset exists before you can access it. If the length is 0, then you need to add the props using push this._smallLineChart1.datasets.push(...this._props)

yasir Over a year ago

oh thank you for your help, I just wrote ...this._props, after data inside the datasets, thanks

Collectives™ on Stack Overflow

how to add elements of and object into another in javascript

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related