How to merge an array into another array's object value

Question

I'm having two set of data as below:

let loadedData = [
    [
      {
        y: 12,
        x: 'Tue Sep 14 2021 05:15:38 GMT-0700 (Pacific Daylight Time)'
      },
      {
        x: 10,
        y: 'Tue Sep 14 2021 05:15:38 GMT-0700 (Pacific Daylight Time)'
      }
    ],
    [
      {
        x: 32,
        y: 'Tue Sep 14 2021 05:15:38 GMT-0700 (Pacific Daylight Time)'
      }
    ]
];

and

let seriesData = [
  {
    name: 'Graph',
    type: 'Column',
    data: []
  },
  {
    name: 'Graph',
    type: 'line',
    data: []
  }
];

I want to add loadedData's values inserted into seriesData's data property. The expected result should be like this.

result = [
  {
    name: 'Graph',
    type: 'Column',
    data: [
          {
            y: 12,
            x: 'Tue Sep 14 2021 05:15:38 GMT-0700 (Pacific Daylight Time)'
          },
          {
            x: 10,
            y: 'Tue Sep 14 2021 05:15:38 GMT-0700 (Pacific Daylight Time)'
          }
        ],
  },
  {
    name: 'Graph',
    type: 'line',
    data: [
          {
            x: 32,
            y: 'Tue Sep 14 2021 05:15:38 GMT-0700 (Pacific Daylight Time)'
          }
        ]
  }
];

I looked around for solutions but I couldn't find one that suits my criteria. Here's what I tried.

let loadedData = [
  [{
      y: 12,
      x: 'Tue Sep 14 2021 05:15:38 GMT-0700 (Pacific Daylight Time)'
    },
    {
      x: 10,
      y: 'Tue Sep 14 2021 05:15:38 GMT-0700 (Pacific Daylight Time)'
    }
  ],
  [{
    x: 32,
    y: 'Tue Sep 14 2021 05:15:38 GMT-0700 (Pacific Daylight Time)'
  }]
];

let seriesData = [{
    name: 'Graph',
    type: 'Column',
    data: [],
  },
  {
    name: 'Graph',
    type: 'line',
    data: []
  }
];


for (let i = 0; i < loadedData.length; i++) {
  const series = this.widget.config["options"].map((type) => {
    console.log(type.graphType);
    let el = [];
    this.loadedData.forEach(element => {
      el.push(element);
    });
    return {
      name: type.sensor.sensorType,
      type: type.graphType,
      data: el[i]
    };
  });
  seriesData = series;
}

Why is there a .map() in the loop? What is that re-invention of .map() (.forEach() + .push()) in that loop? — Andreas
– Andreas, Commented Jan 25, 2022 at 16:18
have you tried Array.prototype.concat() loadedData.concat(seriesData) developer.mozilla.org/es/docs/Web/JavaScript/Reference/… — Toni Michel Caubet
– Toni Michel Caubet, Commented Jan 25, 2022 at 16:20
I'm just a beginner to javascript and I tried it with things I know — Viira
– Viira, Commented Jan 25, 2022 at 16:20
In the snippet, it appear that seriesData already has the expected result... — Heretic Monkey
– Heretic Monkey, Commented Jan 25, 2022 at 16:21

Andreas · Accepted Answer · 2022-01-25 16:33:26Z

2

If you don't need a copy of seriesData and loadedData then .forEach() is all you need

seriesData.forEach((serie, index) => {
  serie.data = loadedData[i] || serie.data;
});

let loadedData = [
    [ { x: 12, y: 'a' }, { x: 10, y: 'b' } ],
    [ { x: 32, y: 'c' } ]
];

let seriesData = [
  { name: 'Graph', type: 'Column', data: [] },
  { name: 'Graph', type: 'line', data: [] }
];

seriesData.forEach((serie, index) => {
  serie.data = loadedData[index] || serie.data;
});

console.log(seriesData);

If you need an copy:

const result = seriesData.map((serie, index) => {
  return {
    ...serie,
    data: (loadedData[index] || serie.data).map(d => Object.assign({}, d))
  };
});

edited Jan 25, 2022 at 16:33

answered Jan 25, 2022 at 16:27

Andreas

21.9k7 gold badges52 silver badges58 bronze badges

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

1 Comment

Viira Over a year ago

Thank you, it worked :)

Stanislav · Accepted Answer · 2022-01-25 16:49:18Z

1

Immutable ES6 solution using Array map:

seriesData.map((obj, index) => ({ ...obj, data: loadedData[index] }));

const loadedData = [
  [{
      y: 12,
      x: 'Tue Sep 14 2021 05:15:38 GMT-0700 (Pacific Daylight Time)'
    },
    {
      x: 10,
      y: 'Tue Sep 14 2021 05:15:38 GMT-0700 (Pacific Daylight Time)'
    }
  ],
  [{
    x: 32,
    y: 'Tue Sep 14 2021 05:15:38 GMT-0700 (Pacific Daylight Time)'
  }]
];

const seriesData = [{
    name: 'Graph',
    type: 'Column',
    data: [],
  },
  {
    name: 'Graph',
    type: 'line',
    data: []
  }
];

const seriesFilledData = seriesData.map((obj, index) => ({ ...obj, data: loadedData[index] }));
console.log(seriesFilledData);

answered Jan 25, 2022 at 16:49

Stanislav

211 silver badge3 bronze badges

Collectives™ on Stack Overflow

How to merge an array into another array's object value

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related