Leverage the power of Maps in TypeScript by incorporating additional fields

There is a slight issue I am facing. The data I have looks like this: ["1112234", "S1044N", "A1041DS"]

I am interested in using Map to generate a new array, but I wish to include additional properties for each field.

Here is what I tried:

 let newArray: SomeDataType= [];
     newArray=data.map((articleNumber) => {});

My challenge is figuring out how to populate the new array with both the data from the old array and the properties from SomeDataType. I prefer not to use loops and stick to using map.

The new array should include the articleNumber field from the old array, along with articleName and articlePrice from newArray. However, I am uncertain about how to achieve this.

Does anyone have any suggestions?

typescript

Answer №1

interface DataType {
    itemNumber: string;
    itemName: string;
    itemPrice: number;
}

const dataList: Array<string> = ["7891212", "S1022R", "B1043MT"];
const newItemList: Array<DataType> = dataList.map(itemNumber => {
    return {
        itemNumber: itemNumber,
        itemName: "Item",
        itemPrice: 50
    }; 
})

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

Saving a local JSON file in Angular 5 using Typescript

I am currently working on developing a local app for personal use, and I want to store all data locally in JSON format. I have created a Posts Interface and an array with the following data structure: this.p = [{ posts:{ id: 'hey man&ap ...

jsonfiletypescriptsaveangular5

Using a modulus operator in Angular 6 to conditionally show elements

Trying to achieve a specific layout for an object in an array using ng-For and ng-If. Here is the desired recovery code, and here's what I've attempted so far in my code snippet enter image description here: <div class="recovery-code" *ngFor= ...

angulartypescriptangular-materialangular6

Library for Typescript on npm

My project involves a collection of base classes in TypeScript. Within a web application built with React and written in TypeScript, I am looking to integrate a library called 'Plain Old TypeScript objects', which defines all the data types. Let& ...

typescriptnpm

Eliminate repeat entries in MongoDB database

Within our MongoDB collection, we have identified duplicate revisions pertaining to the same transaction. Our goal is to clean up this collection by retaining only the most recent revision for each transaction. I have devised a script that successfully re ...

javascripttypescriptmongodb

Issue in Typescript: The method `clear` or `send` is not recognized in type `unknown` within Protractor framework

Having trouble using clear and sendKeys in Protractor with TypeScript. Could it be that I am missing certain dependencies, as even the click function is giving errors? I have attempted various solutions from Protractor clear() not working, but unfortunate ...

node.jstypescriptjasmineprotractor

Conditional type/interface attribute typing

Below are the interfaces I am working with: interface Movie { id: number; title: string; } interface Show { title: string; ids: { trakt: number; imdb: string; tmdb?: number; }; } interface Props { data: Movie | Show; inCountdown ...

typescript

React application experiencing freezing when setInterval function is utilized

I've been working on incorporating Conway's Game of Life into a React project, but I'm encountering freezing issues whenever a new generation is triggered. My assumption is that the problem lies in the excessive overhead from constant DOM re ...

reactjstypescriptreact-hooks

What is the process for utilizing ts-node ESM in conjunction with node modules?

Disclaimer: I understand that the question below pertains to an experimental feature. I have initiated a thread on the ts-node discussion forum. Nonetheless, I believe that posting on StackOverflow will garner more visibility and potentially result in a qu ...

node.jstypescriptts-node

Creating, editing, and deleting data in Ng2 smart table is a seamless process that can greatly enhance

While working on my Angular 2 project, I utilized [ng2 smart table]. My goal was to send an API request using the http.post() method. However, upon clicking the button to confirm the data, I encountered the following error in the console: ERROR TypeErro ...

javascriptangulartypescriptng2-smart-table

Create a specific definition for a packaged item with limited access

As I worked with a package that lacked types, I took the initiative to create a type definition for it. The specific package in question is react-date-range. In order to accommodate this new type definition, I established a directory where it could be loca ...

reactjstypescripttype-definition

When attempting to deploy my app, I encountered a CORS error with Nest.js

Currently, I am in the process of building a Nest.js - React.js application. However, I am encountering a cors error despite having cors enabled in my main.ts file of Nest.js. While my application functions smoothly on localhost and an IP address in produ ...

javascriptnode.jstypescriptcorsnestjs

Encountering a type error with gatsby-plugin-dark-mode in a Typescript Gatsby setup

Issue with Layout warning in index.tsx when hovering: (alias) const Layout: ({ children }: Props) => JSX.Element import Layout Type '{ children: Element[]; }' is missing the following properties from type 'Props': theme, >toggle ...

reactjstypescriptgatsby

The test function is not recognized by Cordova when the device is ready

Within my app.component.ts file, I have the following code snippet: export class AppComponent implements OnInit { constructor(private auth: AuthService, private fireBaseService: FirebaseService, ) {} ngOnInit() { this.auth.run(); document.addE ...

angulartypescriptcordova

"Encountered a problem while attempting to download the .xlsx file through http.get in an angular application interfacing

Attempting to download a .xlsx file using Angular 7 and web API in C#, encountering the following error: https://i.sstatic.net/7pwDl.png The code snippet from my service.ts is provided below: public exportExcelFile(matchedRows: string, reportInfoId: num ...

c#angulartypescriptasp.net-web-api

I'm curious if someone can provide an explanation for `<->` in TypeScript

Just getting started with TypeScript. Can someone explain the meaning of this symbol <->? And, is ProductList actually a function in the code below? export const ProductList: React.FC<-> = ({ displayLoader, hasNextPage, notFound, on ...

javascripttypescript

Do ES6 features get transpiled into ES5 when utilized in TypeScript?

After implementing ES6 features such as template strings, arrow functions, and destructuring in a TypeScript file, I compile the code to regular JavaScript... Does the TypeScript compiler also compile the ES6 syntax, or do I need to utilize another compil ...

javascripttypescriptecmascript-6

Mastering the Art of Concise Writing: Tips to

Is there a way to write more concisely, maybe even in a single line? this.xxx = smt.filter(item => item.Id === this.smtStatus.ONE); this.yyy = smt.filter(item => item.Id === this.smtStatus.TWO); this.zzz = smt.filter(item => item.Id == ...

javascriptarraystypescriptfilter

Extract a string value from a TypeScript enum

Here is a basic enum definition: export enum Type { TEST_ONE = "testing.one", TEST_TWO = "testing.two", BETA = "beta.one" } I am looking to run a function for each string value in the enum. For example: executeType(type: string) { console.lo ...

typescriptenums

PrismaClient is currently incompatible with this browser environment and has been optimized for use in an unknown browser when performing updates

While attempting to update a single field in my database using server-actions and tanstackQuery, I encountered the following error message: Error: PrismaClient is unable to run in this browser environment, or has been bundled for the browser (running in ...

typescriptdatabasenext.jsprisma

Struggled to incorporate Typescript function overload's implementation

After reviewing the previous question: Typescript: exclude undefined/null properties from type In my TypeScript project, I attempted to create an overload for a function called request, which can optionally accept a payload. The function is defined by the ...

typescriptoverloadingtypescript-typingstypescript-genericstypescript2.0