Inserting arrays into objects within an array may sound like a complex task, especially when working with ng2-charts or Charts.js

Question

Inserting arrays into objects within an array may sound like a complex task, especially when working with ng2-charts or Charts.js

Imagine having 2 distinct arrays:

var array1 = [1,1,1];
var array2 = [2,2,2];

How can a parent array be created that contains the following 2 objects?

(The goal is to insert the given arrays above into a parent array with 2 objects while also creating the objects to include the specified keys. This is necessary for compliance with the ng2-charts ChartDataSets type.)

// The desired outcome is shown below, however, only the 2 arrays above are available at this point
[
  { data : array1, label: 'some label1' },
  { data : array2, label: 'some label2' },
]

javascript arrays object chart.js ng2-charts

Answer 1

Answer №1

let arr1 = [1, 1, 1];
let arr2 = [2, 2, 2];
let newArray = [arr1, arr2].map((element, index) => {
  return {
    data: element,
    label: `new label${index+1}`
  }
});
console.log(newArray)

Answer 2

let arr1 = [1, 1, 1];
let arr2 = [2, 2, 2];
let newArray = [arr1, arr2].map((element, index) => {
  return {
    data: element,
    label: `new label${index+1}`
  }
});
console.log(newArray)

Answer 3

Answer №2

To achieve the desired array of objects, follow the statements listed below:

var array1 = [1,1,1];
var array2 = [2,2,2];
var arrayOfObjects = [];
var temporaryObject = {};
temporaryObject.data = array1;
temporaryObject.label = "test1";
arrayOfObjects.push(temporaryObject);
temporaryObject.data = array2;
temporaryObject.label = "test1";
arrayOfObjects.push(temporaryObject);

The variable "arrayOfObjects" contains the output you are looking for.

Answer 4

To achieve the desired array of objects, follow the statements listed below:

var array1 = [1,1,1];
var array2 = [2,2,2];
var arrayOfObjects = [];
var temporaryObject = {};
temporaryObject.data = array1;
temporaryObject.label = "test1";
arrayOfObjects.push(temporaryObject);
temporaryObject.data = array2;
temporaryObject.label = "test1";
arrayOfObjects.push(temporaryObject);

The variable "arrayOfObjects" contains the output you are looking for.

Answer 5

Answer №3

utilize map along with the spread operator

const array1 = [1,1,1];
const array2 = [2,2,2];

const parentArr = [
  { label: 'some label1' },
  { label: 'some label2' },
]

function updateParentArray (array) {
  return updatedArr = parentArr.map(item => {
    return {...item, data: array }
  })
}

console.log(updateParentArray(array1))
console.log(updateParentArray(array2))

Answer 6

utilize map along with the spread operator

const array1 = [1,1,1];
const array2 = [2,2,2];

const parentArr = [
  { label: 'some label1' },
  { label: 'some label2' },
]

function updateParentArray (array) {
  return updatedArr = parentArr.map(item => {
    return {...item, data: array }
  })
}

console.log(updateParentArray(array1))
console.log(updateParentArray(array2))

Inserting arrays into objects within an array may sound like a complex task, especially when working with ng2-charts or Charts.js

Answer №1

Answer №2

Answer №3

Similar questions

Finding the index of a column based on a continuous sequence of values can be achieved by following these

Insert a fresh row into the gridview using JavaScript

"Enhance your React project with dynamic filtering capabilities using Ant Design's Table

An alternative method for substituting a character within a string (character array) using multiple characters in the C programming

Save a document to the file system and retrieve it using Express

Unable to locate node module when using Npm.require

Error in Nestjs Swagger: UnhandledPromiseRejectionWarning - The property `prototype` cannot be destructed from an 'undefined' or 'null' object

Turn the image inside the div with the nth-child selector into a clickable link

Can someone advise me on the best placement for a loading icon within this AJAX form?

Arranging elements in ascending order in Java

What is the best way to attach click handlers to a separate class?

Angular.js and D3 - The Perfect Combination for Dynamic Data Visualization!

What's the best way to implement image size and type validation, specifically for .jpg and .png files, using Multer?

Adjust the value of a select box to the chosen option using JQuery

How can I make a div container clickable when it is wrapped around a react-router Link component?

Is it possible for me to remove the style using getAttribute?

Dynamically generating a multidimensional array on a global scale using Java

Update the select tag to display as radio buttons

Assign an id attribute in KineticJS once the ajax call is successful

obtain the position of an element within an array