Dynamically incorporate new items into an array containing multiple objects

Question

Dynamically incorporate new items into an array containing multiple objects

Is there a way to dynamically add objects to an array of objects based on a value? Let's say we have the following array of objects:

[
    {category:A, num:5}, 
    {category:B, num:2}
]

I would like to create another array where objects are repeated based on the 'num' value (5 times for category A and 2 times for category B), like this:

[
    {category:A, num:5, repeated:1},
    {category:A, num:5, repeated:2},
    {category:A, num:5, repeated:3},
    {category:A, num:5, repeated:4},
    {category:A, num:5, repeated:5},
    {category:B, num:2, repeated:1}, 
    {category:B, num:2, repeated:2}
]

I've attempted using map, forEach, and for loops but haven't had success. I'm new to JavaScript and would appreciate any help or guidance!

javascript arrays

Answer 1

Answer №1

To achieve this, you can utilize a clever mix of flatMap and map:

let data = [
    {type: "X", quantity: 8}, 
    {type: "Y", quantity: 3}
] ;

let output = data.flatMap(item => [...new Array(item.quantity)].map( (val,index) => ({
    type:item.type,
    quantity: item.quantity,
    indexValue: index+1
})));
console.log(output);

Answer 2

To achieve this, you can utilize a clever mix of flatMap and map:

let data = [
    {type: "X", quantity: 8}, 
    {type: "Y", quantity: 3}
] ;

let output = data.flatMap(item => [...new Array(item.quantity)].map( (val,index) => ({
    type:item.type,
    quantity: item.quantity,
    indexValue: index+1
})));
console.log(output);

Answer 3

Answer №2

To achieve this, you can utilize the flatMap method in JavaScript -

const repeatItems = ({ times = 0, ...rest }) =>
  times === 0
    ? []
    : [ ...repeatItems({ ...rest, times: times - 1 }), { ...rest, times, repeatedTimes: times } ]

const data = 
  [ { type: "X", times: 4}, { type: "Y", times: 3 } ]
  
const result =
  data.flatMap(repeatItems)
  
console.log(result)

Result -

[
  { type: "X", times: 1, repeatedTimes: 1 },
  { type: "X", times: 2, repeatedTimes: 2 },
  { type: "X", times: 3, repeatedTimes: 3 },
  { type: "X", times: 4, repeatedTimes: 4 },
  { type: "Y", times: 1, repeatedTimes: 1 },
  { type: "Y", times: 2, repeatedTimes: 2 },
  { type: "Y", times: 3, repeatedTimes: 3 }
]

Answer 4

To achieve this, you can utilize the flatMap method in JavaScript -

const repeatItems = ({ times = 0, ...rest }) =>
  times === 0
    ? []
    : [ ...repeatItems({ ...rest, times: times - 1 }), { ...rest, times, repeatedTimes: times } ]

const data = 
  [ { type: "X", times: 4}, { type: "Y", times: 3 } ]
  
const result =
  data.flatMap(repeatItems)
  
console.log(result)

Result -

[
  { type: "X", times: 1, repeatedTimes: 1 },
  { type: "X", times: 2, repeatedTimes: 2 },
  { type: "X", times: 3, repeatedTimes: 3 },
  { type: "X", times: 4, repeatedTimes: 4 },
  { type: "Y", times: 1, repeatedTimes: 1 },
  { type: "Y", times: 2, repeatedTimes: 2 },
  { type: "Y", times: 3, repeatedTimes: 3 }
]

Dynamically incorporate new items into an array containing multiple objects

Answer №1

Answer №2

Similar questions

Issue Installing Npm Package (detected 23 security vulnerabilities)

Using a jQuery function to pass a value through $_GET parameters

Leveraging the power of JavaScript to retrieve data from PHP/MySQL

Changing a JSON string array into an NSArray in Swift

Error: The requested collection# cannot be found in the Node.js Express routing system

What is the best way to visualize the PerspectiveCamera in three.js?

When working with Visual Studio and a shared TypeScript library, you may encounter the error message TS6059 stating that the file is not under the 'rootDir'. The 'rootDir' is expected to contain all source files

The `$scope variable fails to update in another controller`

Variable remains unchanged by method

Upon redirecting to a new page following the loading of a previous page

Step by step guide on uploading files using Vue.js and Express.js

Exploring the integration of Formik with Material-UI's select field - A step-by

Understanding Aspect Ratios in CSS for Div Containers and their Components

What are the steps to synchronously retrieve data from an API in Node.js?

Validating Custom Checkout Fields in Woocommerce Version 3

jquery causing issues with browser functionality

Conceal the Submit button upon completing the form submission using the load method

Repairing the Left-sided Popup Leaflet

Discovering Consecutive Matching Positions in an Array

Utilizing the powerful combination of Vue.js and Laravel for seamless invoice editing in the backend