Mapping strings to enums in Angular is an essential task that allows for seamless communication

Currently, I am facing an issue regarding mapping a list of JSON data to my model. One of the properties in my model is defined as an enum type, but in the JSON data, that property is provided as a string. How can I correctly map this string to an enum value?

This is my enum definition:

export enum Status {
  HIGH = "High",
  MEDIUM = "Medium",
  LOW = "Low"
}

Here is my model structure:

import { Status } from "../enums/status.enum";

export class OrderModel {
  id: number;
  notification: string;
  action: string;
  status: Status;
}

This is a sample of the JSON data I have:

[
 {
   "id": 1,
   "notification": "Order has been packed",
   "action": "Assign to delivery",
   "status": "High"
 }
]

When attempting to map the JSON data to my model, I encounter the following error (Type 'string' is not assignable to type 'Status'):

import { OrderModel } from '../../models/order.model';
import orderData from '../json/order.json';

@Injectable({
  providedIn: 'root'
})
export class OrderService{

//Code for mapping JSON data to my model goes here
orderModel: OrderModel[] = orderData;

constructor() {}

getOrderStatus() {
 console.log(orderModel)
 }
}

Answer №1

To obtain the enum key, you must modify your incoming model. One fascinating aspect of TypeScript enums is their ability to be reverse-mapped. This means that by mapping your incoming data to your actual class, you can utilize the value to retrieve the enum key.

orderModel: OrderModel[] = orderData.map(e => ({
  ...e,
  status: Status[e.status],
}));

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

Issues with zDepth functionality in Material-UI (React.js) not being functional

Can anyone explain the concept of zDepth to me? I have a component with the following render method: render() { return ( <div> <AppBar zDepth={2} title="Some title" iconElementLeft={<IconButton onClick={this ...

Troubleshooting: Unable to modify value with function in AngularJS

Why can't I change a value using a function in AngularJS? html: <div ng-controler='TestCtrl' id='TestCtrl'> <h1>Test: {{test.name}}</h1> <div ng-hide='showTest'> <div class=&a ...

Create JSX code for rendering components outside of the main component

As someone who is diving into the world of React, I am currently on lecture 23 out of 247 on Udemy where I am learning about states and events. However, one particular question has been lingering in my mind without a definitive answer. Our company has mad ...

Activate function on Ctrl + K in a React TypeScript project

I am currently developing a React TypeScript application using version v18.2.0. My goal is to trigger a function when the user simultaneously presses Ctrl + K. Here is the code snippet within my component: const keyDownHandler = (event: KeyboardEvent) =& ...

Prevent direct prop mutation in Vuetify's Dialog component to prevent errors

I am facing an issue with my child component, a dialog box where I pass the prop dialog from the parent component. Whenever I try to close it by changing the prop value, I receive a warning. Can someone please guide me on the correct approach to resolve ...

I'm encountering an issue with my API Key being undefined, despite having it saved in both an .env file and as a global variable

While attempting to retrieve information from an API, I encountered an issue where the key I was using was labeled as "undefined". However, after manually replacing {key=undefined} with the correct string in the network console, I was able to successfull ...

Ways to determine if an HTML element contains a child element that is a hyperlink

I need to verify the presence of an object on the page that contains a link. The object is represented as follows: <td > <input class="ng" type="checkbox"/> <a href="http://testsite.com ">67365853</a> </td> Although ...

The accuracy of the fromPointToLatLng function in Google Map's JS API seems to be inconsistent with the actual events

My objective is to enhance user experience with a drawing tool on the map interface. I aim for a functionality where, upon single-clicking somewhere on the map using tools like the rectangle tool, the map automatically centers on that clicked location. Thi ...

The execution of the return statement in the catch block is unsuccessful

Here is a simple example that results in an error because the variable tl was not specified: function allmatches() { SpreadsheetApp.getActive().getSheetByName('data').getRange('A1').setValue(tl) } To track any errors that occur durin ...

Timeout function not being triggered for mousedown or touchstart event handlers

Fiddle - http://jsbin.com/AYeFEHi/1/edit Could someone help troubleshoot why this code is not functioning as expected? (I am using Chromium on a Linux system) The goal is to trigger the alert box only after holding down the button for 2 seconds, and if r ...

Identify the browser dimensions and implement CSS styling for all screen resolutions

I am currently facing an issue with a function that I have created to apply CSS changes to a menu based on browser resizing and different resolutions. The problem lies in the fact that my function does not seem to be correctly interpreted by the browser. W ...

How can I use jQuery to identify the numerical range within class/td/div elements and modify their CSS styles?

1# I need assistance in changing the CSS properties of a TD, Class, and div using a selector that specifies a specific number range. Specifically, I am looking to modify the css of torrent results with a seed count between 250-25000. Any torrents with a se ...

Incorporating a closing screen into a game built with Canvas and jQuery

After following a tutorial on creating a snake game, I decided to work on enhancing it as a side project. Currently, the game has a start screen where players can begin the game by pressing "start." My goal is to implement an end screen that displays the ...

JQuery method for extracting a specific span's content from a div

I am faced with extracting specific text from a span within a div element. Below is the code snippet for my Div: '<div class="dvDynamic_' + pid + '"><p hidden="true">'+pid+'</p><span class="count_' + pid ...

Unable to change the value of selected items in checkbox event within a React context

Today marks the beginning of my journey into developing a React application. I am currently faced with the challenge of retrieving the row ID of a checked checkbox in a React table. Utilizing hooks, I have managed to transfer the states to another compone ...

Cannot access a Typescript method variable within an inline function

I've encountered an issue with my code involving loading values into the array usageCategory within an inline function. Despite successfully adding values to the array inside the function, I am unable to print them outside it. getAllUsageCategoryElem ...

Is there a way to store image URLs in a fashionable manner?

Hey there! I've been working on creating a HTML page that showcases multiple images. Everything is running smoothly on my localhost, but when I try to access it online, the images take forever to load. Any suggestions on how I can cache image URLs in ...

Can someone help me uncover the previous URL for login using just JavaScript? I've tried using document.referrer but it's not giving me the

Currently, I am utilizing express with pug templates and pure JavaScript. In order to enhance the user experience of my log in system, I would like to save the URL that someone came to the login page with, so that I can redirect them back to it once they h ...

wrap <td> data in a link with vue depending on certain conditions

I'm trying to customize the display of a particular table cell td. I want to show the data in a link if a certain condition is met, and if not, just show the data as text. However, I'm encountering some difficulties in implementing this. I have ...

Angular version 4 is used to retrieve deeply nested JSON data

How do I extract data from a nested JSON file? Here is an example of the JSON structure: { "user1": { "name": "john", "surname": "johnsson" }, "user2": { "name": "Jacob", "surname": "Jacobsson" } } I want t ...