Transforming a three-dimensional array into a two-dimensional array using JavaScript

I need help transforming a 3D array into a 2D array with specific dimensions. The current structure of my data is as follows:

[ [[0,0,345], [1,0,555], ... [9,0,333]], ... [[0,9,1000], [1,9,987], ... [9,9,129]] ]

The goal is to convert it into this format:

[[0,0,345], [1,0,355], ... [9,0,333], [0,1,1000], [1,1,987], ... [9,9,129]]

In the new format, the first element will represent the width value and the second element the height value. The third element will be a random number between 0 and 1023.

Both the width and height will have a value of 10. My aim is to eliminate the outermost array in the process.

I've attempted to iterate through each row and create a new array using push, but I'm getting unexpected results. Any assistance would be greatly appreciated!

Answer №1

To simplify the process, you can utilize the Array#flat method.

const arr = [ [[3,2,345], [8,7,555], [6,5,333]],  [[1,2,1000], [9,8,987], [5,4,129]] ];
const res = arr.flat();
console.log(JSON.stringify(res));

Answer №2

Give this flatmap a shot. Check out the example below.

let information = [[["service charge (example)"], [2000]], [["Product A...", "Product B..."], [800, 1200]], [["Product C...", "Product D..."], [500, 700]]],
    output = data.flatMap(([left, right]) => left.map((value, index) => [value, right[index]]));

console.log(output);

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

Eliminate redundant items from the array

"name": [ { "name": "test1" }, { "name": "test2" }, { "name": "test3" }, { "name": "test1" }, ] Generated by a Node.js script, the structure ab ...

If you invoke revokeObjectURL, Chrome will fail to display Blob images

-----update------ After some investigation, I found that commenting out window.URL.revokeObjectURL( imgSrc ); fixed the issue in all browsers. It seems like Chrome was revoking the URL too early. I am curious to understand why this behavior occurs, and if ...

What is the best way to add an array of objects to MongoDB using Golang and the official MongoDB Driver?

I'm currently facing an issue with inserting an array of objects and adding new objects to the existing array. The problem arises when I insert the array, resulting in an object nested inside an array within the parent array. Below is a snippet of my ...

Populate an array with user entries using a for loop

Despite having a basic understanding of C++, I'm struggling with how to fill an array with user input in Python 3. I've attempted to find answers, but the explanations have left me confused. int size = 0; cout << "Enter size: " << e ...

Changing the default value of std::array with pybind11

My objective is to alter arrays that are defined within a C++ struct and initialized with default values. I have reviewed this resource, as well as this one, but unfortunately I am struggling to relate it to my issue. Example Code C++ class Math{ struct ...

Code that changes every occurrence of a particular filtered selection of HREF values to a different value

When faced with the limitation in Firefox where links cannot be opened in a new tab if they have a HREF tag diverting to a function, it might be necessary to utilize a script to convert them to an actual HREF. Understanding the functionality of foo: func ...

Transforming a Bitmap Image into a 2D Array in Delphi

I need assistance with creating a 2D array based on a gif image that is 80x40 pixels in size. The color palette of the image contains several similar colors, each assigned a different number. How can I construct the array so that each cell at position x, ...

Unable to utilize material tabs in this situation

Discovering the material tabs feature at https://material.angular.io/components/tabs/api#MatTab got me excited to implement it in my project. After adding the suggested import, I encountered an issue where I couldn't find the module "@angular/materia ...

Guide to utilizing axios.request(config) in Vue.js

I have been attempting to use Axios in my vue.js project to make HTTP requests. Despite reviewing the Axios documentation on GitHub and exploring various examples online, I have yet to find a solution. My goal is to create a configuration file where I can ...

How to Conceal the <th> Tag with JavaScript

I attempted to conceal certain table elements using JavaScript. For <td> elements, it works fine: function hide(){ var x=document.getElementsByTagName('td'); for(var i in x){ x[i].style.visibility='hidden'; ...

What is the method for sending an AJAX request with a dynamically looping ID number parameter in the URL

I am looking to make multiple AJAX calls with a loop parameter named [id] in the URL, starting from request.php?id=1 and ending at id=9. I want to send each call after a 3-second delay. As a JavaScript beginner, I'm unsure of where to begin implementi ...

Vue JS - Troubleshooting Checkbox Validation Error During Form Submission

When a user fills out my registration form, there is a checkbox to confirm acceptance of the terms and conditions. Currently, the validation error for this checkbox appears immediately upon hitting submit, even though the checkbox starts as unchecked. The ...

How can I focus on a single dimension of a 2D array in C++?

I've been working on creating a battleship game in the console, and I'm currently tackling the task of designing a function that will draw a grid based on a 2-dimensional array. My approach involves: --> Drawing one row with a character repea ...

Ways to position a button at the bottom of a Bootstrap card

In the card layout, I am struggling to position the red button at the bottom of the column despite using margin auto. Can anyone provide a solution for this issue? Thank you in advance! <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a ...

Identifying a failed Ajax Request in JavaScript

How can I check if an Ajax request failed to load a file? Here is the code I'm currently using: var pro = undefined; var xmlhttp; if (window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); } else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTT ...

Transferring the data entered into an input field to a PHP script, in order to retrieve and display the value with JavaScript, unfortunately results in a

My situation involves a form that consists of only one input text field (search_term) and a submit button. The goal is to enter a keyword into the input field, click Submit, have the keyword sent to a php script for json encoding, and then returned back t ...

Experience the innovative feature of React Splide Carousel where a peek of the next image is shown until you reach

My current challenge arises when I reach the last slide in the slider. I am trying to prevent it from looping and instead stop with no extra space or any other images peeking out. To address this, I have utilized the padding: '5%' option, which ...

Accepting user input in a PHP for loop

Almost there, but I'm having trouble with a loop in my PHP code. The issue is that the code doesn't wait for user input and continues on. I've included my code below. The Excel spreadsheet starts at row 4 with multiple choices. Once a choice ...

Having trouble retrieving the value of a custom directive attribute

My custom directive, named "mycomponent", has the following configuration: restrict: 'AE', templateUrl: 'template.html', scope:{ sTransactionType: '=transactionType', sStorageVariable: '=storageVariable&apos ...

The drop-down list unexpectedly closes at the most inconvenient moment

I am looking to create a search input with a drop-down list. The requirement is for the list to close when the focus or click is anywhere except the search input. I have added a function listClose() to the "blur" listener, but now I am unable to capture t ...