Tips for including an element at the start while creating a map()

enum StatusEnum {
  accepted = "AC",
  rejected = "RJ",
}
const select = (Object.keys(StatusEnum) as Array<keyof typeof StatusEnum>).map((x) => ({
  value: x,
  name: x + "_random",
}))
/**
 * Console.log(select)
 * [
 * 0: { value: "accepted" , name: "accepted_random" }
 * 1: { value: "rejected" , name: "rejected_random" }
 * ]
 */

Is there a way to elegantly insert an object at the beginning of an array like this: { value: "all" , name: "all_random" } ?

/**
 * Console.log(select)
 * [
 * 0: { value: "all" , name: "all_random" }
 * 1: { value: "accepted" , name: "accepted_random" }
 * 2: { value: "rejected" , name: "rejected_random" }
 * ]
 */

Answer №1

Wrap it within an array and include the item at the start using the spread operator for the map function.

const selection = [{ value: "all" , name: "all_random" }, ...(Object.keys(StatusEnum) as Array<keyof typeof StatusEnum>).map((x) => ({
  value: x,
  name: x + "_random",
}))]

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

Click to load additional data until the list has reached its full length

<ng-container *ngFor="let item of itemList | slice:0:3"> <mat-checkbox>{{item}}</mat-checkbox> </ng-container> <div> <button id="loadMore">Load More</button> </div> I wo ...

`Generating dynamic content based on ajax response``

Hey there! I've got a little challenge on my hands. I've set up 3 input boxes that act as table cells (the header). When the input in one of these boxes changes, a script runs. This script triggers a function that pulls data from my database thro ...

There was an error with CreateListFromArrayLike as it was called on a non-object

I am receiving a list of over 1000 numbers from an API and storing it in a variable called "number". My goal is to find the highest number from this list. However, I encountered an error while attempting to do so: TypeError: CreateListFromArrayLike called ...

When Electron's WebView.loadURL is called, it initiates a reloaded page

According to the documentation provided by Electron, it is necessary to wait until the webview element is available in order to utilize its respective methods. While most methods function properly, I am facing challenges in understanding how to programmati ...

What is the best way to retrieve a response from a modal dialog using jQuery?

Is there a way to utilize an add-in such as simple-modal or the dialog add-in in the UI kit to achieve AJAX interaction with the server? I am looking for a solution that allows the modal to communicate with the server and return the result back to the ca ...

How to leverage async/await within loops in Node.js for optimized performance and efficiency

Hey there, I'm working on my nodejs api where I need to fetch data inside a loop and then perform another loop to save data in a different table. Can anyone guide me on how to achieve this? Below is a snippet of what I have attempted so far without su ...

The Material UI React radio buttons have the ability to modify the value of previous buttons

I'm facing an issue with my Material UI React Stepper Component that contains a group of radio buttons. The problem is that changing the radio button in one step affects the selected value in previous and future steps. I've experimented with diff ...

How to Incorporate an Error Function into XPages Partial Refresh Events (dojo.xhrPost)?

I have a page that relies on multiple partial refreshes for user interaction. Rather than implementing a session keep alive mechanism, I am interested in detecting error responses from these partial refreshes to alert the user of their expired session or t ...

Having trouble inserting a Button element into a li parent element

I'm attempting to insert a button inside an li element using the .appendChild method, but for some reason, it's not working. I also tried changing the parent's inner HTML. let inputElement = document.querySelector('#input'); let ...

Updating JSON when the color changes in Go.js can be achieved by implementing event listeners and

I've been using Go.js for creating Flow charts and saving the json data into a SQL database. However, I'm facing difficulties in updating the json data. Here is the code snippet: myDiagram.addDiagramListener("ChangedSelection", function (e1) { ...

Struggling to get the findAndModify or Update functions to work properly in MongoDB. Despite fetching the desired data from my ajax call, I am unable to make any changes in the database

Here is the ajax code snippet: $(function () { $("#upvoteClick").click(function () { $.ajax({ type:"POST", data: {upvote: 2}, dataType: 'json', url:"http://localhost:9000/api/upvote" }).success(functi ...

Display title upon hovering over image linked to mysql with php

Is there a way to display the image title when hovering over images connected to MySQL using PHP? Below is the code I have been using: <div class="galleryko"> <?php $data = mysql_query("SELECT * FROM tbl_gallery_featured")?> <div clas ...

Error importing React Icons with the specific icon FiMoreHorizontal

Currently following a guide to create a Twitter-like application and I need to add the following imports: import { FiMoreHorizontal } from 'react-icons/fi' 2.3K (gzipped: 1K) import { VscTwitter } from 'react-icons/vsc' 3.1K (gzipped: ...

Issue with Tailwind causing content to extend beyond screen with horizontal scrolling

I have a React-based NextJS application using Tailwind CSS. There is a page component that displays a list of individuals sorted from A to Ö (Swedish alphabet). In the mobile view, the user experience requires the list of alphabetical letters to be visibl ...

How can I confirm that all elements have been properly reset to their original positions prior to making any further adjustments to them?

In need of some creative brainstorming, I'm working on a website design featuring ten overlapping cards. When the mouse hovers over a card, it expands while others move away. My goal is for each card to return to its original position once the cursor ...

State not visible in Redux Devtool extension on Chrome browser

I am still getting acquainted with Redux, especially the Redux DevTools. Recently, I developed a simple application where users can be clicked on to display their information. Essentially, the state contains the currently selected user. However, for som ...

Looking to combine cells within a table using the Exceljs library

Encountered an issue while generating a worksheet in the EXCELJS library. function save_export(){ var workbook = new ExcelJS.Workbook(); var worksheet = workbook.addWorksheet('sheet', { pageSetup:{paperSize: 9, orientation:' ...

I'm having trouble getting EJS files to run JavaScript module scripts

I am facing an issue with my ejs file running on localhost. I am trying to execute functions from other files that are imported with js. In the ejs file, there is a module script tag which successfully executes the code of the file specified in the src att ...

What is the process for type checking a Date in TypeScript?

The control flow based type analysis in TypeScript 3.4.5 does not seem to be satisfied by instanceof Date === true. Even after confirming that the value is a Date, TypeScript complains that the returned value is not a Date. async function testFunction(): ...

Adding a specified number to a value in React: x + y

I am facing an issue with adjusting the value of deliveryFee based on the changing value of a variable weight. Initially, I have set specific values for deliveryFee based on different weight ranges: Up to 2 kg => $3.40 Up to 5 kg => $3.80 Up to 10 k ...