Employing the map() function or a similar method to transform the array data into the specified format

Question

Employing the map() function or a similar method to transform the array data into the specified format

Today, I decided to have some fun with the map() function in JavaScript. I am working with an array and trying to return the data from the pages property. However, I want the page id to serve as the key, and the index of that page within the pages array to be the value. Can someone help me find out what mistake I'm making?

let result = [
  {
      "id": 10000089,
      "units": [
          {
              "id": 10000200,
              "pages": [
                  {
                      "id": 100000882
                  }
              ]
          },
          {
              "id": 10000340,
              "pages": [
                  {
                      "id": 100000912
                  },
                  {
                      "id": 100000915
                  },
                  {
                      "id": 100000919
                  }
              ]
          }
      ],
  }
];

// Here is my attempt, but it doesn't give the desired output format below
result.flatMap(el => el.units.map((e, i) => (e.pages)));

Desired Output:

pages = [
  100000882 => 0,
  100000912 => 0,
  100000915 => 1,
  100000919 => 2,
]

If you'd like to check out the code on Stackblitz, click this link: https://stackblitz.com/edit/js-mc9rqe

javascript arrays foreach array.prototype.map

Answer 1

Answer №1

To get the desired output, you should return an object instead of an array. Utilize methods like Array.prototype.flatMap or Object.fromEntries to achieve this transformation.

let result=[{id:10000089,units:[{id:10000200,pages:[{id:100000882}]},{id:10000340,pages:[{id:100000912},{id:100000915},{id:100000919}]}];

const pages = Object.fromEntries(
  result.flatMap(item => item.units.flatMap(unit => unit.pages.map((page,i) => ([page.id, i]))))
);
console.log(pages);

Keep in mind, that Object.fromEntries() expects an array containing arrays with a [key, value] pair structure, which will then be transformed into an object. In your scenario, the page.id serves as the key, while the index from the last map operation acts as the value.

Answer 2

To get the desired output, you should return an object instead of an array. Utilize methods like Array.prototype.flatMap or Object.fromEntries to achieve this transformation.

let result=[{id:10000089,units:[{id:10000200,pages:[{id:100000882}]},{id:10000340,pages:[{id:100000912},{id:100000915},{id:100000919}]}];

const pages = Object.fromEntries(
  result.flatMap(item => item.units.flatMap(unit => unit.pages.map((page,i) => ([page.id, i]))))
);
console.log(pages);

Keep in mind, that Object.fromEntries() expects an array containing arrays with a [key, value] pair structure, which will then be transformed into an object. In your scenario, the page.id serves as the key, while the index from the last map operation acts as the value.

Answer 3

Answer №2

Within your dataset, the element pages is structured as an array of objects. Therefore, it is necessary to iterate through each page individually.

Utilizing the Array.flat method

let result=[{id:10000089,units:[{id:10000200,pages:[{id:100000882}]},{id:10000340,pages:[{id:100000912},{id:100000915},{id:100000919}]}]];

const getFormattedData = data => {
  const res = data.map(datum => datum.units.map(unit => unit.pages.map(({ id }, i) => ({
    [id]: i
  }))));
  return res.flat(2);
}
console.log(getFormattedData(result));

Employing the Array.flatMap function

let result=[{id:10000089,units:[{id:10000200,pages:[{id:100000882}]},{id:10000340,pages:[{id:100000912},{id:100000915},{id:100000919}]}]];

const getFormattedData = data => {
  return data.flatMap(datum => datum.units.flatMap(unit => unit.pages.map(({ id }, i) => ({
    [id]: i
  })));
}
console.log(getFormattedData(result));

Please note that both methods mentioned above will yield an Array comprising of objects.

Answer 4

Within your dataset, the element pages is structured as an array of objects. Therefore, it is necessary to iterate through each page individually.

Utilizing the Array.flat method

let result=[{id:10000089,units:[{id:10000200,pages:[{id:100000882}]},{id:10000340,pages:[{id:100000912},{id:100000915},{id:100000919}]}]];

const getFormattedData = data => {
  const res = data.map(datum => datum.units.map(unit => unit.pages.map(({ id }, i) => ({
    [id]: i
  }))));
  return res.flat(2);
}
console.log(getFormattedData(result));

Employing the Array.flatMap function

let result=[{id:10000089,units:[{id:10000200,pages:[{id:100000882}]},{id:10000340,pages:[{id:100000912},{id:100000915},{id:100000919}]}]];

const getFormattedData = data => {
  return data.flatMap(datum => datum.units.flatMap(unit => unit.pages.map(({ id }, i) => ({
    [id]: i
  })));
}
console.log(getFormattedData(result));

Please note that both methods mentioned above will yield an Array comprising of objects.

Employing the map() function or a similar method to transform the array data into the specified format

Answer №1

Answer №2

Similar questions

The webpage runs smoothly in the browser, but unfortunately displays a blank screen on mobile devices

Fulfill the promise to retrieve the value contained within

Transmit information across disparate components in Vue.js

Display HTML content in autocomplete using jQuery UI

Ways to send information to browser javascript from Spring MVC controller

Challenges faced when subscribing to global events in JavaScript

There seems to be an issue with accessing the Angular module, even though it has been clearly

Having trouble navigating the dependency graph: Unable to locate module './crypto_auth' in sodium-universal

How can the Node app utilize an HTML page to reference another JavaScript file? Ran into an unexpected syntax error: `Uncaught SyntaxError: Unexpected token '<

Issue: The component factory for GoogleCardLayout2 cannot be located

Delay the execution in selenium webdriver using Java until the login button is clicked manually

Animate or resize with a focal point

Response from Socket.io: What is the best way for the server to respond to all clients after receiving input from multiple clients?

w3schools example showcasing the power of AJAX

The issue of actions failing to flow from sagas to reducers in React.js

Tips for retaining form inputs without the need for a submit event when the page is reloaded or refreshed

Issue with passing incorrect props to child component occurs specifically on pages 2 and beyond within react-table

Using Mongoose to perform an upsert operation into an array of objects while taking the maximum value for a specific key

Tips for concealing a div in JavaScript when other divs are not present

Best way to create a 3D array in PHP