Pair two values from the interface

I need to extract and combine two values from an Interface:

export interface CurrenciesList {
  currency: string;
  country: string;
}

The initial mapping looks like this:

this.optionValues["currency"] = value.map(i => ({ id: i.currency, name: i.currency }));

However, I want to merge the values like this:

this.optionValues["currency"] = value.map(i => ({ id: i.currency, name: i.currency - i.country }));

Instead of getting the desired result, I only get 'And'. Ideally, I would like the output to be listed as:

USD - United States

What is the correct way to map the following expression: name: i.currency - i.country

Answer №1

Give this a shot! I'm utilizing ES6's template literals here. If you're not familiar with this feature, it can really simplify string concatenation in certain situations.

this.optionValues["currency"] = value.map(item => ({ id: item.currency, name: `${item.currency} - ${item.country}` }));

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

Encountering an unexpected token error while trying to compile a Typescript file to Javascript, even though it had previously worked

In my Typescript project, I usually run it using "ts-node". $ ts-node .\src\index.ts it works =) However, I wanted to compile it to Javascript, so I tried the following: $ tsc $ node .\src\index.js Unfortunately, I encountered the f ...

Guide to incorporating a pluck feature into TypeScript code

One task I face frequently is extracting specific properties from an object const obj = {a:1, b: 2, c: 3}; const plucked = pluck(obj, 'a', 'b'); // {a: 1, b:2} Unfortunately, achieving this task with type safety in TypeScript can be c ...

How can I use JavaScript to update the content inside HTML tags with a specific string?

I have a situation where I need to replace a string in two different ways Input: Parameters-->string, AnnotationName, input Case 1: And I should input <i>Annotaion</i> as <b>input</b> Output : { displayData: `And I should inp ...

I'm having trouble viewing anything on my localhost with Angular app using Docker

I recently attempted to dockerize an Angular application and encountered some issues. I experimented with two different Dockerfiles in an attempt to resolve the problem but was unsuccessful. The first Dockerfile I tried is as follows: FROM node:latest as n ...

Pass the previousItem to the click event handler within the *ngFor loop

Could I possibly retrieve the previous value of an item in an *ngFor loop when a specific event like click() is triggered? For instance: <myItem *ngFor="let data of dataList"> <div (click)="onClick(data, prevData)"> </myItem ...

Ensure NestJS waits for HTTP request to complete

I am currently utilizing a combination of Angular and NestJS, attempting to retrieve data from a public API. The issue I am facing is that while I can view the returned data in the NestJS console, the Angular side returns an empty JSON object. It seems tha ...

Tips for utilizing an elective conversion by typing

In my opinion, utilizing code is the most effective approach to articulate my intentions: interface Input { in: string } interface Output { out: string } function doStuff(input: Input): Output { return { out: input.in }; } function f<Out>(input ...

Converting a String into a Type or Component in Angular: A Step-by-Step Guide

Is it feasible in Angular to convert a string into a specific type or component? For instance, if I have the string "ListComponent", could I dynamically add a ListComponent to the application without using mapping techniques? stringComponent = "ListComp ...

The change event is not being accounted for in Jest testing methodology

HTML <cxui-multi-select [multiSelectOptions]="filteredCommonTemplatesDropdown" formControlName="commonTemplates" [isSearchable]="true" (searchTextChange)="searchCommonTemplates($event)" class="cxui-select--se ...

Dismiss the necessity of imports in Angular

I am facing an issue with using a library in Angular, specifically the cubing npm package. This library is designed to run in both the browser and node environments, with specific code for each. I want it to run in the browser, but when compiling with Angu ...

An issue occurred during the construction of an angular project: The Tuple type '[]' with a length of '0' does not contain any elements at index '0'

When I run the command ng build --prod, I encounter the following error: ERROR in src/app/inventory/inv-parts-main-table/dialog-component/dialog-component.component.html(5,16): Tuple type '[]' of length '0' has no element at index &apo ...

issues arise with tests following the transition from Angular 9 to Angular 10

Recently, I encountered an issue with my jest-tests after updating Angular from version 9 to 10. These tests were working perfectly fine before the update. Can someone guide me on how to resolve this issue? Below is one of the tests that is causing troubl ...

Tips for duplicating chosen documents utilizing AngularCLI in conjunction with WebPack for the production build

I am facing an issue with my Angular2 app when building it for production using Angular CLI and WebPack. In order to deploy the app to our production server (IIS), I need to copy certain files to the dist folder. Specifically, I require the web.config and ...

What is the best way to include bootstrap using webpack?

I am currently building a webapp using Typescript and webpack. I have been able to successfully import some modules by including them in my webpack.config.js file as shown below. However, no matter how many times I attempt it, I cannot seem to import the b ...

Live server code does not update with changes made in Angular

https://i.stack.imgur.com/Yo6Y8.png In the screenshot above, you can see my changes. I simply modified the text to read Download PDF, replacing what was there previously. Instead of the folder shown here, I used the code from this compiled file: https:// ...

Enhance your website with unique and custom fonts using

I am utilizing this repository. How can I incorporate custom fonts into my project? I have created a folder named "fonts" within the assets directory and placed my fonts there. fonts.scss @font-face { font-family: 'Lato'; src: url('../ ...

Tips for displaying field options after typing parentheses in TypeScript in Visual Studio Code

Whenever the letter "b" is typed, the suggestion of "bar" appears. However, I would prefer if the suggestions show up immediately after typing the brackets. https://i.stack.imgur.com/OFTO4.png ...

Determine the data type of an index within an array declaration

Imagine we have the following array literal: const list = ['foo', 'bar', 'baz'] as const; We are attempting to create a type that represents potential indices of this array. This is what we tried: const list = ['foo&ap ...

Tips for preventing duplicate entries in an AG Grid component within an Angular application

In an attempt to showcase the child as only 3 columns based on assetCode, I want to display PRN, PRN1, and PRN2. Below is the code for the list component: list.component.ts this.rowData.push( { 'code': 'Machine 1', &apo ...

Tips for developing a personalized form validator for validating JSON data exclusively in Angular

Within my Angular application, there exists a reactive form that has a single control known as configJson, which is visually represented by a <textarea> element in the DOM. The primary goal is to validate this specific form control to ensure that it ...