Creating an array of objects in Javascript by setting two different values as a range

Question

Creating an array of objects in Javascript by setting two different values as a range

Given an array of objects structured as follows:

[{value: "a", start: 1950, end: 1954, description: "aaa"},
{value: "b", start: 1953, end: 1956, description: "bbb"},
{value: "c", start: 1960, end: 1962, description: "ccc"}]

How can I expand the array to achieve the desired output using javascript? I aim to expand each object by including a new key year for every year between the given start and end.

[{value: "a", year: 1950, start: 1950, end: 1954, description: "aaa"},
{value: "a", year: 1951, start: 1950, end: 1954, description: "aaa"},
{value: "a", year: 1952, start: 1950, end: 1954, description: "aaa"},
{value: "a", year: 1953, start: 1950, end: 1954, description: "aaa"},
{value: "a", year: 1954, start: 1950, end: 1954, description: "aaa"},
{value: "b", year: 1953 ,start: 1953, end: 1956, description: "bbb"},
{value: "b", year: 1954, start: 1953, end: 1956, description: "bbb"},
{value: "b", year: 1955, start: 1953, end: 1956, description: "bbb"},
{value: "b", year: 1956, start: 1953, end: 1956, description: "bbb"},
{value: "c", year: 1960, start: 1960, end: 1962, description: "ccc"},
{value: "c", year: 1961, start: 1960, end: 1962, description: "ccc"},
{value: "c", year: 1962, start: 1960, end: 1962, description: "ccc"}]

I assume I need to use a for loop to iterate over the elements but I'm struggling with incorporating the start and end values from each original value object.

javascript arrays json data-wrangling

Answer 1

Answer №1

To achieve your desired outcome, consider using the combination of flatMap() along with Array.from().

const data = [
  {value: "x", start: 1990, end: 1994, description: "xxx"},
  {value: "y", start: 1993, end: 1996, description: "yyy"},
  {value: "z", start: 2000, end: 2002, description: "zzz"}
];

const result = data.flatMap(({value, start, end, description}) => {
  return Array.from({length: end - start + 1}, (_, i) => start + i)
              .map(year => ({value, year, start, end, description}));
});

console.log(result);

Answer 2

To achieve your desired outcome, consider using the combination of flatMap() along with Array.from().

const data = [
  {value: "x", start: 1990, end: 1994, description: "xxx"},
  {value: "y", start: 1993, end: 1996, description: "yyy"},
  {value: "z", start: 2000, end: 2002, description: "zzz"}
];

const result = data.flatMap(({value, start, end, description}) => {
  return Array.from({length: end - start + 1}, (_, i) => start + i)
              .map(year => ({value, year, start, end, description}));
});

console.log(result);

Creating an array of objects in Javascript by setting two different values as a range

Answer №1

Similar questions

I am looking to update the background color of the material UI helper text

Using react-big-calendar exclusively for the month view

Tips for adjusting the color of boxes within a grid

The jquery and operator fails to function

The background image shifts dynamically with a parallax effect as the page is scrolled

Error encountered when attempting to reinitialize DataTable while iterating through multiple tables and searching within tabs

Converting data into a multidimensional array in AngularJS: A comprehensive guide

Change your favicon dynamically based on the user's online or offline status using Vue

The CSS transition duration is not being applied properly on the initial transition effect

Transferring hyperlink text to a different page using Express JS

Setting up gulp-typescript for Angular 2: A comprehensive guide

Is there a way to directly display all the content in pagination format without a print preview option?

Display all event date markers, even if some dates are missing

Transforming ASP.NET MVC IEnumerable view model into a JSON array of elements

Is there a way to launch only a single popup window?

How come the mongoose ref feature is not functioning properly for me when I attempt to reference objects from a different schema?

Difficulty in transmitting two boolean values using ajax and setTimeout()

How can a controller configure an AngularJS provider by passing options?

Having trouble with the tooltip feature in Bootstrap?

The Belongs_to association found in ActiveModel::Serializer eradicates the need for a root element in