Transform each item in an array into its own separate array using JavaScript (ES6)

Transform each item in an array into a separate sub-array and then combine them into one array.

inputArray = ['One', 'Two', 'Three']

Desired Result

outputArray = [['One'],['Two'],['Three']]

How can we achieve this using ES6?

Answer №1

If you want to achieve that, you can utilize array.map:

const inputArray = ['One', 'Two', 'Three'];
const result = inputArray.map(x => [x]);
console.log(result);

Answer №2

Are you referring to a basic visualization of all the elements? This task can be completed efficiently using the following method:

const updatedArray = originalArray.map(item => [item]);

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

Perform a task upon clicking the JavaScript menu

Implementing dropdown menu items using a text link with JavaScript and CSS. You can view a demo here. I am looking to trigger an action when each menu item is clicked. Currently, they are not behaving as expected. HTML: <span class="inline-dropdown- ...

How to handle a POST request with an empty body in Node.js express routing, utilizing body-parser

I'm facing an issue where my submission form's post requests are returning an empty body, regardless of the body parser settings I apply. All my dependencies in package.json are up to date, and a previous application I created (using the deprecat ...

What is the best way to use form input to filter an Observable?

Within my component, I have declared the variable "countries$": countries$!: Observable<Country[]>; To populate this variable with data from this API, I use the following code in the "ngOnInit" lifecycle hook: ngOnInit(){ this.countries$ ...

Information is inaccessible beyond onBeforeMount in the Composition API of Vue 3

In my code snippet block, I have the following code: <script setup lang="ts"> import ApiService from '../service/api' import { reactive, onBeforeMount } from 'vue' let pokemons = reactive([]) onBeforeMount(async ()=> ...

Integrate yaml-loader into the i18n settings of a Vue-CLI 3 project

After diving into the Vue-i18n library and exploring this tutorial, I successfully incorporated tags in json format within my project created with vue-cli. While browsing through the documentation, I noticed an example using yaml instead of json. However ...

Creating an HTML Menu in PHP by Parsing JSON

Managing a website involves constant updates and improvements. Recently, I started using DataTables, but faced timeout issues with large HTML tables. To resolve this, I decided to switch to server-side processing using JSON. Despite being new to JSON, I&ap ...

Errors with pointer events occurring within nested iframes on Chromium 78

At first glance, it seems like a bug specific to Chromium. I have already reported this issue in a bug report. Since progress is slow on that front, I am posting a question here primarily to see if anyone else has encountered similar or related issues and ...

The function Router.use is looking for a middleware function, but instead received an object in node.js /

I encountered an issue while trying to setup routing in my application. Whenever I attempt to initialize a route using app.use() from my routes directory, I receive an error stating that Router.use() requires a middleware function but received an Object in ...

Exploring the Possibilities of WebAudio API through Asynchronous Events

Is there a way to trigger events after an oscillator finishes playing using the webaudio API? I am attempting to update my Vue component reactively to display data in the DOM while a note is being played. Here's a snippet of my code: <template> ...

What is the best way to incorporate the 'autoskip' functionality into chartjs?

Click here for an example I've been attempting to utilize the autoSkip functionality outlined in the documentation for chart.js: Visit this link for more information on autoSkip The current issue I'm facing is that my x-axis labels are o ...

The Vue mixin properties are devoid of content and lack reactivity

Could you please guide me in the right direction if this question has already been asked before? I really hope it's not a duplicate. I have a Vue application that is compiled using Webpack@NPM. In order to pass a property (roles) across all component ...

The attempt to establish a WebSocket connection to 'wss://******/socket.io/?EIO=4&transport=websocket&sid=T2Sf_4oNIisxKLwsAAAK' was unsuccessful

I'm experiencing an issue while setting up a WebSocket connection using socket.io. When I attempt to log in, the following error message is displayed: WebSocket connection to 'wss://******/socket.io/?EIO=4&transport=websocket&sid=T2Sf_4oN ...

I am facing an issue with Firebase AngularFireAuth where I am unable to update a user's email even though the

I am facing an issue with my Angular Application where I cannot change the email of a logged-in authenticated user in Firebase. Fetching the email as an observable works fine: getUserEmail():Observable<string | null>{ return this.afAuth. ...

Synchronizing code paths that involve both ajax and non-ajax functions can be achieved by

My website features a basket functionality where users can enter an author's name and see the available books. After selecting desired books, they have the option to click on another author for more selection. The displayed list includes books by Step ...

I have the capability to develop a library within Angular, but this is contingent upon the availability and integration of another native library from

Scenario: Dependencies: I am looking to develop a custom library for Angular 6. This library will include a service with functionalities to analyze strings, such as SQL syntax. Queries: Is it feasible to integrate [chevrotain] (https://github.com/SAP/c ...

Incorporate a click function onto the image within the canvas

After creating a canvas and placing an image on it, I realized that I need to include a click event for that image. Below is the code snippet I have written in attempt to achieve this. <canvas id="myCanvas" width="578" height="1000"></canvas> ...

Tips for transferring the id from a delete button to a delete button in a popup dialog box

In my frontend application, there is a table where each row corresponds to an item. For every row, there is a "Remove" button that triggers a warning popup upon being clicked. The intention is to pass the item's ID in this popup so that if the user co ...

Issue with displaying PDF files on Google Chrome due to a software glitch

Recently, I encountered a puzzling issue on Google Chrome. I am not sure if the error lies with Google or within my code. When I set the div as display: none; and then show it again, the PDF view only shows a grey background. However, if I zoom in or out, ...

Why is my Navbar defaulting to be located inside the "./components/Index" folder?

https://i.sstatic.net/5v8IZ.pngI recently created a 'Navbar' component inside the 'components' directory and used a separate index file.js to export it to App.js. However, when I try to import it, it ends up inside the 'components/ ...

Internet sockets, socket.io or any other similar option

As a newcomer to the world of sockets, I apologize if my questions seem simple. I have a hybrid app and a website, and I am interested in having an alert/notification appear on the website when a button is clicked within the app. While Socket io seems pr ...