Arranging an Array in a Specific Format using Typescript/Angular

As a newcomer to stackoverflow and not a native English speaker, I apologize for any errors in advance. I am currently working on an Angular/C# project for a course, and I need an Angular mat-select that functions with an ID (number) but displays a String instead. In my TypeScript class, I already have an Array<number> fruitIDs. My objective is to iterate over each element of the array and apply the function fruitName(fruitID) on it (which returns a string). The challenge I'm facing is figuring out how to structure the elements of the array along with their corresponding function values in a format like:

fruits = 
[{value: idOfFirstFruit, viewValue: fruitName(idOfFirstFruit)},
{value: idOfSecondFruit, viewValue: fruitName(idOfSecondFruit)},....]

If I can have an object in this format, then my mat-select can access and store the `value` while displaying 'fruitName(value)' instead. Any help would be greatly appreciated. Thank you in advance!

arraysangulartypescriptangular-material2

Answer №1

Hey there, just wanted to share the solution I came across:

const fruitNumbers = this.fruits.map(fruit => {return fruit.fruitNr});
const objectArray = [];
for (let number of fruitNumbers){
    objectArray.push({value:number,viewValue:this.fruitname(number)});
}

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

I am having trouble getting my angular library published successfully

I'm facing an issue while trying to publish my angular package. I keep encountering this error. https://i.stack.imgur.com/nhYMY.png Here is a screenshot of my package.json file https://i.stack.imgur.com/mWsin.png. ...

angularnpm-publish

Bringing @angular/code into a directory that is not within an Angular project

Currently, I have an Angular 2 project folder with a separate service folder named "auth.service.ts" located outside of it. Within this service file, I am importing `Injectable` from `@angular/core`. However, due to the service being located outside of t ...

javascriptangulartypescript

Removing an element from the array stored in NGRX

I currently have an object stored in a repository in the following format: export interface Referential { id: string; values: Array<ReferentialData>; } export interface ReferentialData { libelle: string; value: string; borderColor: string; ...

angularngrx

TypeORM: Create case-insensitive search functionality

Creating a basic search feature where the records are as follows: AB CD A BCD ABC D ABD C If the search term is "BCD", the expected output should be: AB CD A BCD ABC D The current query looks like this: await connection.manager .createQueryBuilder(RefTra ...

mysqltypescripttypeorm

Ionic has been experiencing issues with inaccurate boolean results being generated by Angular typescript

I have created a random number generator that requires the user to input a maximum and minimum value to generate a random number within that range. The application will show an error under two conditions: If either of the numbers entered is negative If t ...

angulartypescriptionic-framework

Executing the function in Ionic 4 when the events are absent

In my Ionic 4 multilingual app, I am fetching data from an API based on the selected language. I have set up an event for this purpose, but I face an issue when the event value does not exist - in such cases, I want to run a default function. Below is the ...

angularionic-frameworkionic4

Generating variable names dynamically in JavaScript

To prevent a javascript heap issue, I implement the usage of multiple arrays including 'family1', 'family2','family3' and 'dogs1', 'dogs2', 'dogs3'. For instance, you can use 'family1 and dog ...

javascriptarraysvariablesnaming

Error in TypeScript detected for an undefined value that was previously verified

I have developed a function that can add an item to an array or update an item at a specific index if provided. Utilizing TypeScript, I have encountered a peculiar behavior that is puzzling me. Here is the Playground Link. This simple TypeScript functio ...

javascripttypescript

The Clarity stack-view feature is incompatible with Angular's ngTemplateOutlet functionality

Looking for a way to display key-value pairs using Clarity's stack-view multiple times within the same component without duplicating code? One solution is to leverage ng-template and ngTemplateOutlet. The challenge arises when trying to make the oute ...

angularvmware-clarity

Validate account existence in Angular 2 before account creation

I am currently subscribing to the following event list and attempting to implement additional checks before completion. userService.createUser(this.form).subscribe((user)=>{ this.user = user }) Here is the service method in question: createAccount(us ...

javascriptangular

Is it possible for Visual Studio 2013 to compile TypeScript files even without node.js installed?

My current setup involves using TypeScript in combination with Visual Studio Code and the tsc CLI with node.js installed. I recently made an interesting discovery about tsc - I always assumed it was a javascript program, but then I started to wonder how ...

visual-studiotypescript

Tips for setting the ArrayBuffer as a variable in scala

Exploring Variable-Length Arrays Using Array Buffers import scala.collection.mutable.ArrayBuffer val b = ArrayBuffer[Int]() // Initializing an empty array buffer b += (1, 2, 3, 5) // Appending elements to the buffer: ArrayBuffer(1, 2, 3, 5) Next step is ...

arraysscalaarraybuffer

Loop through JSON results in Ionic using Angular

I am struggling to retrieve data from a JSON file in Object format using Typescript. When I try to fetch the data from the API, it doesn't display as expected. Typescript this.http.get('http://example.com/api') .subscribe((data) => { ...

jsonangulartypescriptionic-frameworkionic4

Angular project running Karma/Jasmine tests encounters failures when run on GitHub Action using Google Chrome on Ubuntu operating system

While working on my Angular project, I encountered an issue when trying to test it using Google Chrome with Karma & Jasmine in a GitHub Action. Google Chrome starts with multiple errors and eventually crashes after running some tests. Despite trying vario ...

angulargoogle-chrometestingkarma-jasminegithub-actions

Is there a way to make sure video files are downloaded instead of automatically playing in the browser window?

I have a link to a video file with various formats like mp4, 3gp, etc. When I click on the link, it opens in the same tab. Changing the target attribute to "_blank" makes the video open in a new tab. However, when I ctrl-click the link, the file s ...

angularcors

Stop Angular 2 from loading on Internet Explorer

I'm looking for a way to stop my Angular 2 application from loading on any version of Internet Explorer. I attempted using a script tag in index.html to detect IE, which was successful. However, when trying to redirect the app to a "not compatible pag ...

angular

Tips for eliminating objects with a sessionID:null value from the nested array within an array of objects using JavaScript

[ { "_id": "5ecda7f5310bee6f4b845add", "firstname": "john", "lastname": "smith", "sessions": [ { "_ ...

javascriptarraysjsonmongodbobject

Filter array of objects in Angular4 without using any built-in pipe functions

I am working with an array of links where each element is an object containing a link, description, and category. I have different components to display these links, and I want each component to only display links from its specific category. So, I need to ...

arraysangulartypescriptobject

When trying to declare i2c_msg, gcc throws an error stating: the array type has an incomplete element

I am currently working on creating wrapper files for i2c communication using C language. Here is a snippet of the header file: #ifndef IMX6QI2C_WRAPPER_H_ #define IMX6QI2C_WRAPPER_H_ #include <linux/i2c-dev.h> //includes definitions for: ...

arraysstructgnu-makei2c

Determining the frequency of a specific array within a larger PHP matrix array

I am attempting to create a counter to track how many times all the arrays appear in the large array. $array = [[121,159,196],[121,159,196],[121,159,196],[121,159,196],[120,158,195],[119,157,194],[118,156,193],[117,155,192],[119,157,194],[118,156,193],[119 ...

phparraysmultidimensional-arraycounter