What is the best approach to create a customized array using or not using spread syntax in this scenario?

Any suggestions on simplifying and enhancing the code provided below?

The current code works as intended when myarr.length === 2:

[...myarr[0].arrk.map(myfunc), ...myarr[1].arrk.map(myfunc), ...myarr[2].arrk.map(myfunc)]

How can we adjust the above code to accommodate an array length of any size, rather than just 2? It should work for all lengths.

P.S. I feel like the solution

myarr.map(a => a.arrk.map(myfunc))

is almost there, but not quite: it returns [Array(1), Array(2)], instead of the elements.

Thank you!

javascript arrays typescript

Answer №1

To achieve this, you can utilize the Array.prototype.flatMap() method:

myarr.flatMap(({key}) => key.map(myfunction))

If .flatMap() is not supported in your environment, you can achieve the same result using Array.prototype.reduce():

myarr.reduce((accumulator, {key}) => (accumulator.push(...key.map(myfunction)), accumulator), [])

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

The slider class in the div is not showing the image, but it is visible in the elements

Is the sequence of loading .css and .js files in the head section important for displaying images with the .slider class on MaterializeCSS? <!DOCTYPE html> <html> <head>  <link href="htt ...

javascript html css materialize

Preventing access to websites through a web application using JavaScript

I am in the process of creating a web application that enables users to create a list of websites they wish to block, preventing access from their browsers. My goal is to block websites on all browsers, but I have narrowed my focus to Chrome for now. I ha ...

javascript jquery html google-chrome-extension web-applications

Tips for avoiding Google Tag Manager from interfering with document.write() function

We have integrated Angular into our website, however, not all pages have been migrated to Angular yet. To handle this situation, we have implemented a hybrid approach: Each request is initially directed to Angular. Once the page is loaded, it checks if th ...

javascript angular google-tag-manager

Tips for storing the values of multiple checkboxes in a React application

Though it may seem like a silly question, I am new to ReactJS and struggling with creating a logic for checkboxes. I have multiple checkboxes in my program and I want to save the values of the selected checkboxes in a single state or array. Despite my effo ...

javascript arrays reactjs ecmascript-6 ecmascript-2016

Retrieving a targeted data point from a JSON object

I am working with a json data that contains various properties, but I am only interested in extracting the uniqueIDs. Is there a way to retrieve ONLY the uniqueID values and have them returned to me as a comma separated list, for example: 11111, 22222? (I ...

javascript jquery arrays json

Using Selenium and Python to showcase the source of an image within an iframe

My goal is to automatically download an image from shapeNet using Python and selenium. I have made progress, but I am stuck on the final step. from selenium import webdriver from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.s ...

javascript python selenium iframe

Keep a close eye on your Vue app to make sure it's

<template> <v-form :model='agency'> <v-layout row wrap> <v-flex xs12 sm12 lg12 > <v-layout row wrap> <v-flex xs12 md12 class="add-col-padding-right"> <v-radio-group v-mod ...

javascript vue.js

Performing subtraction on two time values with AM/PM formatting using JavaScript

I'm currently using a date.js plugin to convert my times into date objects and then trying to subtract them. However, the result is not showing as valid. The time format I am working with is 11:00 pm. Here is the code snippet: var tim_i = $('#in ...

javascript jquery datejs

Create a regulation that permits access solely to individuals currently logged into the system database

I am a beginner when it comes to working with Firebase and its rules. My goal is to implement a system where each user in the Firestore database has a boolean field called isOnline, as shown in the image I have attached. https://i.stack.imgur.com/7M3dc.pn ...

javascript reactjs google-cloud-firestore firebase-security

Encountering an error while unit testing Angular components with MatDialog: "Error: <spyOn>: open has already been spied upon."

Once I create an HTML file with a button, I trigger a poll to appear after an onClick event. Then, when the "submit" button is clicked on the dialog window, it closes and I intend to execute subsequent methods. In my TypeScript file: openDialogWindow() { ...

angular typescript unit-testing

Creating a constant array of struct within another dynamically allocated struct can be achieved by first defining the struct that

My issue involves initializing constant values from a struct. For simple values, I typically use the following approach: *(int*)&myStruct->myValue = 1; and it works well. However, when it comes to initializing an array, I attempted a similar method ...

arrays c struct dynamic-memory-allocation

The appearance of all input forms in MaterializeCSS when used in an electron environment appears to

After following the instructions here on how to get started with Materialize CSS, I am having issues with my input form appearing strange: https://i.sstatic.net/lveS2.png The contents of my current index.html file are as follows: <!DOCTYPE html> &l ...

javascript html css electron materialize

What is the best way to retrieve a value from a deeply nested callback function?

I am currently using the mssql npm library and it's functioning well. However, I'm facing difficulty retrieving the recordset returned from the sub-level callback function. Could someone guide me on how to obtain the recordset when dealing with ...

javascript node.js sql-server npm next.js

Bash/Shell array separation delimiter

Is there a way to customize how an array separates its elements? For instance, if you run: echo ${array[*]} it shows: element1 element2 element3 but what I actually want is: element1:element2:element3 ...

arrays bash shell

Is there a way to consistently reference the same AJAX route URL for each AJAX function, even if it's located in a different controller within Laravel 5.5?

I've successfully implemented ajax in a route for one controller using: Route::post('ajaxupdate','Scheduling\ScheduleController@SaveBooking'); Now, I want to call an ajax URL for another controller. Do I need to create a sep ...

javascript php jquery ajax laravel-5.5

Incorporate text or an image onto a dynamically rendered 3D cube/model in Canvas using Three.js in real-time

I am looking to implement a feature that allows users to add text and images anywhere on a 3D model rendered on the UI using canvas. Users should be able to move the text object around and adjust its size, making it interactive and customizable. I am curi ...

javascript three.js 3d blender

Storing duplicate code in multiple cache files using ReactJS ServiceWorker

I am currently working on integrating a serviceworker into an existing React application that has the following filesystem layout: Filesystem The initialization code is stored in the public folder, while the main code resides in the src folder. In my serv ...

javascript reactjs progressive-web-apps service-worker offline-caching

Transmit information using the buttonRenderer feature in Ag-Grid for Angular applications

Struggling to transfer data between two unrelated components by clicking on a cell in ag-Grid and passing the data to a form component. I utilized the buttonRenderer function to extract row data from ag-Grid, but I'm unsure how to pass it to the secon ...

javascript angular typescript ag-grid

The issue of Angular finalize not functioning when used within a pipe alongside switchMap

Once the user confirms, I want the process to begin and keep the modal busy until it's complete. However, the current code does not function in this manner. The isModalBusy condition only turns false when an HTTP error is returned from the service. In ...

javascript angular typescript rxjs observable

Create a fresh name for the key of an object within an array of objects

When fetching records from an API and displaying them in a Grid, there seems to be an issue with the date field displaying twice. The JSON data shows est: 10/20/2022 , but I want it to display as Establish: 10/20/2022. How can the code be modified to achie ...

javascript reactjs frontend

TypeScripter Q&A