"Transferring a C# dictionary into a TypeScript Map: A step-by-step

What is the correct way to pass a C# dictionary into a TypeScript Map?

[HttpGet("reportsUsage")]
    public IActionResult GetReportsUsage()
    {
        //var reportsUsage = _statService.GetReportsUsage();

        IDictionary<int, int> test = new Dictionary<int, int>();

        test.Add(1, 20);
        test.Add(2, 30);
        test.Add(3, 40);
        test.Add(4, 50);
        test.Add(5, 70);
        test.Add(6, 60);
        test.Add(7, 90);
        test.Add(8, 30);

        return Ok(test);
        //return Ok(reportsUsage );
    }

In Angular:

getReportsUsage() {
return this.http.get<Map<number, number>>(`${environment.apiUrl}/stats/reportsUsage`, {
  headers: new HttpHeaders({
    'Content-Type': 'text/plain',
    'Accept': 'application/json'
  }),
  withCredentials: true
});
}

reportsUsage = new Map<number, number>();

this.statsService.getReportsUsage().subscribe(data => {
    this.reportsUsage = data;
    
    //1
    console.log(this.reportsUsage);
    //2
    console.log(this.reportsUsage.values());
    //3
    console.log(typeof(this.reportsUsage));
};

Results:

1

{1: 20, 2: 30, 3: 40, 4: 50, 5: 70, 6: 60, 7: 90, 8: 30}

2

ERROR TypeError: this.reportsUsage.values is not a function

3

object

During the conversion from Dictionary to an object data type, I attempted the following which did not work:

console.log(new Map(this.reportsUsage));

TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))

Answer №1

C# may not be as relevant in this context, but the data that is transmitted is in the form of a JSON object structured like this:

const data: Record<number, number> = 
  { 1: 20, 2: 30, 3: 40, 4: 50, 5: 70, 6: 60, 7: 90, 8: 30 };

It's important to note that this is not a JavaScript Map, but rather a standard JSON object. Therefore, the appropriate type to use would likely be Record<number, number>. I'm utilizing the Record utility type to indicate "an object with numeric keys and numeric values".

When making your http.get call, ensure you specify Record<number, number> instead of Map<number, number>:

this.http.get<Record<number, number>>(...)

If you wish to convert this into a Map, you will need to utilize the Map constructor with an iterable argument (such as an array) containing key-value tuples. Additionally, since JSON objects always have keys of type string and not actual numbers, you must handle the conversion yourself if you want the resulting map to be of type Map<number, number> instead of Map<string, number>:

const map = new Map(Object.entries(data).map(([k, v]) => [+k, v]));
// const map: Map<number, number>

This approach leverages Object.entries() to transform the JavaScript object into an array of these entry tuples, and then remaps them so that the keys are numbers.

Let's verify its functionality:

console.log(map.get(3)?.toFixed(2)) // "40.00"

Everything seems to be working correctly. Playground link to code

Answer №2

1- If you're looking to transform reportsUsage data into a map:

const reportMap = new Map(Object.entries(this.reportsUsage));
console.log(reportMap.get("1")); // displays 20

2- For an array solely containing the values:

const valueArray = Object.values(this.reportsUsage)

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

How to pass data between components in Angular using @Input, @Output, and EventEmitter

After selecting a team from an array in one component, I am having trouble passing that selected team to another component. While I can log the selected team in the same component, I'm unable to access it in the other component. My goal is to use the ...

Leveraging the power of JavaScript functions together with the asp:Timer component

<p><b> Progress: <asp:Label ID="progressPercentageLabel" runat="server"></asp:Label>%</b></p> <script> function updateBar() { var bar = document.getElementById("CompletionBar"); ...

What is the best way to distinguish between administrators and regular users in an Angular project?

I am embarking on a project using Angular and I plan to incorporate both an admin and a user section within it. Is there a way to effectively separate the admin area from the user area in Angular? Additionally, how can I differentiate the style files for ...

Experiencing difficulties with a click event function for displaying or hiding content

Struggling with implementing an onClick function for my two dynamically created components. Currently, when I click on any index in the first component, all content is displayed. What I want is to show only the corresponding index in the second component ...

Can someone guide me on how to customize the CSS of a fab element in Onsen UI?

I've been struggling to change the background color or border of the onsen fab element. I'm working with angular 2 and onsen v2. Even after trying the !important rule, my CSS doesn't seem to take effect unless I disable the fabs default styl ...

Expanding the sidebar panel during a redirection

I am facing an issue with the expansion panels in my sidenav. I have successfully been able to track and set their open state as they are opened and closed. However, when a list item within the panel is clicked and redirects to another route, the panel c ...

Unlock the solution housing extensive file directories

Once I build Bootstrap v4-alpha using npm, Visual Studio refuses to open my project due to long file paths, resulting in a hang-up. When using Bower, Bootstrap is installed in the following path: C:\Users\BigFont\Documents\GitHub&bsol ...

Is there a feature similar to Nuxt.js' auto-register in Next.js?

My Journey as a Beginner Being a beginner in the tech world, specifically in full-stack development (although I'm about 8 years behind), I find myself grappling with the decision of what to focus on learning. Vue and Nuxt.js are fantastic technologi ...

The geolocation navigator is not defined

Currently, I am in the process of developing an AngularJS application that I plan to convert into a mobile app using Cordova. My goal is to incorporate Cordova's geolocation plugin into the app, but I have encountered an issue where it returns undefin ...

Choosing an array from the MongoDB database

{ "_id": "4f609932615a935c18r000000", "participants": [ { "user_name": "john1", "role": "user", "created_at": { "sec": 1331730738, "usec": 810000 }, { "user_name": "john2", "role": ...

I'm curious if there is a method in Vue.js that allows for creating a separator while utilizing v-for, much like the way `Array.join()` or FreeMarker's `<#sep>` functions operate

My goal is to create a list of <span> elements separated by commas using vue.js and v-for. Is there an easy way to achieve this in vue.js? In JavaScript, I would typically use users.join(", "). In FreeMarker templates, you can do some very interes ...

Tips for avoiding the automatic transition to the next slide in SwiperJS

How can I prevent the next button click in swiper based on my custom logic? I am using the swiperjs library within a Vue project and I need to stop users from swiping or clicking the next button to move to the next slide depending on certain conditions de ...

Sketch a line extending from one element to the next

Is there a way to create a styled line that starts from the center of one <td> element and ends at the center of another? I attempted to use the jQuery Connections plugin but it only connects the edges of the elements, not their centers. The plugin ...

The type 'EventTarget & HTMLTextAreaElement' does not contain the property 'files'

When trying to call a method in React TypeScript on the onChange Event of a MUI Input field, an error is encountered. The error message received is: Type '(event: { target: { files: any[]; }; }) => void' is not assignable to type 'Chang ...

Interactive KML layer in ArcGIS mapping tool

Currently, I am working on enhancing an ArcGIS map by incorporating KML layers for interactivity. This is a simplified version of the code I am currently using: map = new Map("map", { basemap: "topo", center: [-108.663, 42.68], zoom: 6 }); parser.p ...

Attempting to flip the flow of marquee loop in javascript

I am currently modifying this code to create a left-to-right marquee instead of the original right-to-left one. However, after successfully changing the direction, the text no longer loops as it did originally. I'm stuck and can't seem to figure ...

How can I activate caching with Prerender.io?

After successfully setting up prerender on my local machine, everything is working smoothly with all pages properly prerendered. However, the process always takes 5-10 seconds. Does anyone have a recommendation for implementing caching on a local Prerend ...

Exploring Angular Factory: Creating the getAll method for accessing RESTful APIs

In my Angular.JS factory, I am retrieving data from a REST Api. The REST Api endpoint is "/api/getSsls/1", where 1 represents the page number. The API response is in JSON format and contains the first ten items along with total pages/items information. I ...

Storing JWT securely in cookie or local storage for a Node.js/Angular 2 web application

I've been researching how to save jwt tokens in either local storage or cookies but I'm having trouble finding clear instructions online. Can someone provide guidance on how to instruct the server to recognize a user for future sessions? //a ...

Prevent duplicate components from interacting with one another in Angular

My Tabs component has its own variables and functions, and it works perfectly. However, I encountered an issue when trying to place multiple tab components on the same page. Whenever I change the value of one tab, it also affects the other tab component. ...