What is the process for transforming data objects into arrays of objects?

Currently, I am faced with a situation where I have one array containing 6 category names and 6 arrays of objects, each containing 5 objects related to those categories. I am seeking the most efficient way to restructure these data sets so that I end up with just 6 arrays of objects that combine data from both the category array and the object arrays.

let categoryArray = ["a", "b", "c","d","e","f"];
let outcomeArrays = [
    [ {p:1,q:2,r:null},{p:3,q:4,r:null},{p:5,q:6,r:null},{p:7,q:8,r:null},{p:9,q:10,r:null} ],
    [ {p:1,q:2,r:null},{p:3,q:4,r:null},{p:5,q:6,r:null},{p:7,q:8,r:null},{p:9,q:10,r:null} ],
    [ {p:1,q:2,r:null},{p:3,q:4,r:null},{p:5,q:6,r:null},{p:7,q:8,r:null},{p:9,q:10,r:null} ],
    [ {p:1,q:2,r:null},{p:3,q:4,r:null},{p:5,q:6,r:null},{p:7,q:8,r:null},{p:9,q:10,r:null} ],
    [ {p:1,q:2,r:null},{p:3,q:4,r:null},{p:5,q:6,r:null},{p:7,q:8,r:null},{p:9,q:10,r:null} ],
    [ {p:1,q:2,r:null},{p:3,q:4,r:null},{p:5,q:6,r:null},{p:7,q:8,r:null},{p:9,q:10,r:null} ]
];

My goal is to create an array structured as follows:

[{category: "a", 
details: [{p:1,q:2,r:null},{p:3,q:4,r:null},{p:5,q:6,r:null},{p:7,q:8,r:null},{p:9,q:10,r:null}]},
{category: "b",
details: [{p:11,q:22,r:null},{p:33,q:44,r:null},{p:55,q:66,r:null},{p:77,q:88,r:null},{p:9,q:10,r:null}]},
...
]

I attempted using push and map methods, but did not achieve the desired result. I also explored lodash library but could not find a method suitable for handling this scenario.

Answer №1

@thoughtsunificator's version seems to be correct.

Here is a different approach using Array.map:

let groupArray = ["apple", "banana", "cherry","date","elderberry"];
let resultArray = [[{x:1,y:2,z:null},{x:3,y:4,z:null},{x:5,y:6,z:null},{x:7,y:8,z:null},{x:9,y:10,z:null}],
[{x:1,y:2,z:null},{x:3,y:4,z:null},{x:5,y:6,z:null},{x:7,y:8,z:null},{x:9,y:10,z:null}],
[{x:1,y:2,z:null},{x:3,y:4,z:null},{x:5,y:6,z:null},{x:7,y:8,z:null},{x:9,y:10,z:null}],
[{x:1,y:2,z:null},{x:3,y:4,z:null},{x:5,y:6,z:null},{x:7,y:8,z:null},{x:9,y:10,z:null}],
[{x:1,y:2,z:null},{x:3,y:4,z:null},{x:5,y:6,z:null},{x:7,y:8,z:null},{x:9,y:10,z:null}],
[{x:1,y:2,z:null},{x:3,y:4,z:null},{x:5,y:6,z:null},{x:7,y:8,z:null},{x:9,y:10,z:null}],];

const groups = groupArray.map((grp, index) => ({
  category: grp,
  items: resultArray[index]
}));
console.log(groups);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to apply multiple filters in JavaScript?

I have a set of objects that require filtering. If the object has an active status of true, it should always be included in the filtered result regardless of other conditions. If there is text entered for search, then the remaining items should be filter ...

Ways to eliminate the relationship between parent and child

I am attempting to create a design featuring a large circle surrounded by smaller circles. The parent element is the large circle, and the small circles are its children. My goal is for any circle to change color to red when hovered over, but if I hover ov ...

Incorporating jQuery ajax requests into divs seamlessly to avoid any page disruptions

When loading numerous ajax calls on a page, the timing of each call varies, resulting in some content loading before the user reaches the top of the page. This may cause the user to miss viewing certain data unless they scroll back up to the top. Below is ...

Analyzing vast datasets from contrasting perspectives

Looking for a way to compare two different data storages that contain the same data. The data in question is: const object1 = { "name": "John", "age": "30", "height": "180 cm", "stand ...

Efficiently run multiple Node-written apps on a single server

I currently have a single VPS and would like to host multiple node.js apps on it, similar to how Apache or Nginx works. I am using Nginx as a proxy, but I have concerns. As you know, one of the key features of Node.js is its non-blocking I/O and sing ...

Adding my 'no' or 'id' in a URL using a JavaScript function can be accomplished by creating an onClick event

Here is the function I'm working on: function swipe2() { window.open('edit.php?no=','newwindow') } This is part of my PHP code (I skipped some lines): for ($i = $start; $i < $end; $i++) { if ($i == $total_results) { ...

Updating filenames within a WordPress directory using jQuery or JavaScript

I'm working on a task to automate the renaming of the newest CSV file in a Wordpress folder hosted on a shared server. The script needs to run every 5 minutes. /wp-content/csv/sample.csv My initial attempt involved placing a JavaScript file within t ...

Utilize the Google Maps API to align an SVG symbol with the direction of an aircraft's

I have been struggling to update the rotation of the Google Maps API SVG aircraft symbol to display the correct heading as it moves. Although it initially loads with the correct heading, I can't seem to figure out how to dynamically update it. I' ...

Guide to using jQuery to load an image

I am using this code to load an image and display it within a dialog box. <div id="image_preview" title="Client Photo Preview"> <p><img src="" alt="client image" id="client_image_preview" /></p> </div> $("#client_image_p ...

Enhancing User Experience with Real-Time Control Updates using ASP.Net and Bootstrap

I am struggling to figure out how to update bootstrap controls with ASP.Net. Here is the code I am working with: @{ Layout = null; } <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width ...

What is the optimal level of safety logic to incorporate into my proprietary components?

Having developed numerous React components, setting propTypes, writing tests, and occasionally defining default props, I find myself pondering the balance between safety and efficiency. Experimenting with Flow types has led me to consider implementing addi ...

What is the best way to ensure that ID and Name are always associated by sorting ID only?

Currently, I'm encountering an issue with sorting. I can use insertion sort to sort my data (in a csv file) by the ID, but the results are not as expected: 14000027,Sofia Bonfiglio 14000053,Ashlee Capellan 14000310,Dona Mcinnes 14000436,Maricela Land ...

Incorporate additional query parameters into a dynamic route with React Router to enhance functionality

I am currently working on incorporating an optional query parameter to the end of a path in order to create URLs like this: "/user/1/cars?makeYear=2020" or "/user/1/cars". The relevant Route is defined as shown below. I have been having ...

Although the xpath simulates a click on the button, it does not actually perform any action

I've been diligently working on an automation test suite for a web application that can be quite temperamental. Following a recent UI update, I decided to run some tests to ensure the GUI, buttons, and xpaths were functioning as expected. The night b ...

Weird Javascript behavior when classes are manipulated during mouse scrolling

Searching for a Javascript expert to assist in solving a particular issue. I have a simple function that I need help with. The goal is to add a bounceDown class when scrolling down by 1px, have it run for 5 seconds, and then remove the class for future use ...

The Sizzle.js error, "Uncaught TypeError: undefined (reading 'expr')," is causing some trouble

$.expr[':'].containsCaseInsensitive = function (n, i, m) { return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; }; .expr is not recognized. To ensure it's defined, I included a CDN link below: <script src=&qu ...

Postman grants me the cookie, yet Chrome doesn't seem to deliver it

As I attempt to set a cookie named auth, containing the user's ID signed with JWT, I am puzzled by not seeing the auth cookie in Chrome when visiting http://localhost:5000/. Instead, I only observe these two cookies; https://i.sstatic.net/p0Foo.p ...

php receiving no value in ajax response

In an attempt to create search suggestions similar to Google, I have set up a table with tags and a single column called 'tag' to store the tags. However, I am encountering an issue where if I input nothing or a tag that is already in the databas ...

Tips for accessing basic information from these websites without encountering CORS issues

Having issues retrieving data from the following two sites: and Eurolottery. The CORS issue is causing the problem, and I was able to retrieve data using a Chrome CORS extension and the provided code below: var HttpClient = function() { this.get = fu ...

Utilizing Bootstrap Tooltips in an Electron App

I am currently using Bootstrap alongside Electron, and I have encountered an issue with the tooltip functionality. Interestingly, when I view the page in a regular web browser like Chrome, the tooltips function as expected. However, when I open the page in ...