Iterate through an Object and categorize each set of 4 elements into a nested array

Imagine having the following set of data:

{
  A1: {name: "x", age: y},
  B1: {name: "x", age: y},
  C1: {name: "x", age: y},
  D1: {name: "x", age: y},
  A2: {name: "x", age: y},
  B2: {name: "x", age: y},
  C2: {name: "x", age: y},
  D2: {name: "x", age: y},
  A3: {name: "x", age: y},
  B3: {name: "x", age: y},
  C3: {name: "x", age: y},
  D3: {name: "x", age: y},
}

The goal is to transform it into this structure:

[
  {
    A1: {name: "x", age: y},
    B1: {name: "x", age: y},
    C1: {name: "x", age: y},
    D1: {name: "x", age: y},
  },
  {
    A2: {name: "x", age: y},
    B2: {name: "x", age: y},
    C2: {name: "x", age: y},
    D2: {name: "x", age: y},
  },
  {
    A3: {name: "x", age: y},
    B3: {name: "x", age: y},
    C3: {name: "x", age: y},
    D3: {name: "x", age: y},
  }
]

Various attempts utilizing for loops and maps have been made, but achieving the desired outcome has proven challenging.

Answer №1

  const mapping = {};

  for(const [k, val] of Object.entries(data)) {
    const [alpha, n] = k;
    if(!mapping[n]) mapping[n] = {};
    mapping[n][k] = val;
  }

  const endResult = Object.values(mapping);

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

What is the best way to navigate around and close this modal?

Hey everyone, I've been experimenting with the JavaScript on this codepen and I'm trying to make it so that when you click the background, the modal closes. However, I've run into two issues: The .modal is contained within .modal-backgroun ...

What steps must be taken to create this captivating animation?

While exploring the Google atmosphere website, I came across a fascinating feature that caught my attention. I am curious about how the circling bubbles' animated effect is created. I am specifically interested in their movement around a circular path ...

angular 4+ dynamically assign @Input for components created using ngComponentOutlet

If you are using Angular 4 and need to dynamically generate a component, you can utilize the ngComponentOutlet directive. Here is a reference link for more information: https://angular.io/docs/ts/latest/api/common/index/NgComponentOutlet-directive.html Fo ...

Using jQuery functionality on rendered results in Angular

Currently, I'm working on truncating a string based on its character count and then adding an ellipsis if the number of characters exceeds 21. I've included a truncate class in the HTML div using jQuery. Everything seems to be functioning correc ...

What causes the disparity in height between a textbox and the encompassing span element?

What causes the discrepancy in element heights when looking at the code below? <span id="spanner" style="margin:0;padding:0;border:0;outline:0;"><input type="text" /></span> If you check the height of the text box, it will be shown as 1 ...

Design personalized social media icons that allow users to easily share the link of the current page

Currently, I am working on creating a widget that includes social sharing buttons. The goal is for these buttons to share the URL of the current page when clicked on various social media platforms. For instance, I attempted to integrate a Twitter share but ...

Auto-fit HTML Webpage Resizer Simplified

Just finished my very first jQuery project, a simple full-width slider. I've been focusing on HTML & CSS and currently working with C#. The problem is that I don't want the page to be scrollable; I want it to autofit to the webpage. Imagine ope ...

preserve unique data through an asynchronous procedure without redundancy

In this MEAN Stack project, my goal is to store documents in the same collection with: various types a unique chronological number per type. For example: {ID: 1, type: 'a', chrono: 1} {ID: 2, type: 'b', chrono: 1} {ID: 3, type: &a ...

Repetitive submissions of a form through Ajax post requests

Currently, I am utilizing this code to handle data sent via Ajax. Within the code, I am using the summernote editor. However, I have encountered an issue where if I submit the form while missing a required field, the form displays a 'required alert&ap ...

Unusual behavior in sorting values with JavaScript

I have spent hours trying to figure this out, and the only conclusion I can come to is that when there are 14 elements to sort, it doesn't function properly, but with thirteen elements, it works perfectly. My goal is to sort DIV elements based on the ...

Is it possible to use iframes in IE7 as the target for uploading forms?

On my webpage, I am utilizing an iframe with the unique identifier of uploadtarget. <iframe id="uploadTarget" name="uploadTarget" src="" ></iframe> Within my JavaScript code, I am setting the target of the forms to point to this particular if ...

Tips for adjusting the width of dynamic list boxes according to user input

When a list box is clicked, it will be removed and replaced by 'n' new list boxes of the same type. The value of 'n' is provided by the user in a prompt. This process can be repeated. The width of the newly generated list boxes should ...

Invoke `setState` function in contexts outside of React framework

Is the following approach guaranteed to work correctly within React v18 semantics? The "rules of hooks" only address calling the hook within the component, with no mention of whether it's acceptable to call the dispatcher returned from the ...

"Enjoy interactive hover effects by using the popover feature on the Meteor

Here is my HTML code: <th scope="col" class="table-success titlerow featurecol" id='headerPop'> Some Text Header <sup> <a href='' class="fas fa-info"></a> </sup> </th> This ...

The initial update of ng-model is not occurring

I am currently working on a checkbox functionality in my project that is bound to an ng-model: <input type="checkbox" ng-change="toggleAll(globalChecked)" ng-model="globalChecked"> The toggleAll function is responsible for accessing the globalCheck ...

The array cannot be accessed outside of the block

I have a method that generates an array called 'venues'. However, every time I attempt to access this array in a different method, it shows as 'null'. Here is the method: - (void)startSearchWithString:(NSString *)string { [self.las ...

Guide on incorporating database-sourced audio playback using buttons in PHP and HTML

Building my website with an audio player inside has been a bit challenging. I encountered an issue when trying to combine songs loaded from the database with a play button. My goal is to have the play button change when clicked and load the song from the d ...

Choose elements that are not contained within a certain designated element

I am looking to choose one or more elements that are NOT children of a specific element. <html> <body> <div> <p> <b> <i> don't pick me </i> </b> ...

The most efficient method for manipulating the DOM in React for superior performance

When it comes to animating a DOM element with a number sequence going from 0 to N using a tween library in React, what is the most efficient and reliable approach? Would using setState be considered ideal, even when combined with the shouldComponentUpdate ...

Split a PHP string based on the newline character ( )

I possess a string $string = "alpha beta gamma delta"; Q: What is the method to split the string by using the "\n" character and convert it into an array like this: array ('alpha', 'beta', 'gamma', 'delta'); ...