Creating customized object mappings in Typescript

Question

Creating customized object mappings in Typescript

In my current Angular project, I am working on mapping the response from the following code snippet:

return this.http.get(this.url)
      .toPromise()
      .then(response => response as IValueSetDictionary[])
      .catch(this.handleError);

The response is being mapped to the interface shown below:

export interface IValueSetDictionary {
  valueSet: {};
}

This process involves handling a JSON response received from a third-party service that looks like this:

{
  "<CONCENTRATE> | 6": "<CONCENTRATE>",
  "<PHYSICAL> | 5": "<PHYSICAL>",
  "NYMEX WARRANT IN MT | 12": "NYMEX WARRANT IN MT",
  "SHFE WARRANT | 13": "SHFE WARRANT"
}

I need some assistance with removing the '<' and '>' symbols from the response.

The desired output should look like this:

{
  "CONCENTRATE | 6": "CONCENTRATE",
  "PHYSICAL | 5": "PHYSICAL",
  "NYMEX WARRANT IN MT | 12": "NYMEX WARRANT IN MT",
  "SHFE WARRANT | 13": "SHFE WARRANT"
}

Essentially, I aim to eliminate the '<>' tags during the mapping process in TypeScript, but I haven't found an elegant solution yet.

angular typescript casting

Answer 1

Answer №1

I am looking for a solution to remove the '<>' tags while mapping the response data. I haven't found a clean way to achieve this in typescript yet.

It's not just a typescript issue, the same applies to javascript as well. The key is to transform the objects you receive into the desired format. You can try something like the following code snippet:

return this.http.get(this.url)
      .toPromise()
      .then(response => response as IValueSetDictionary[])
      .then((value) => value.map((vs) => this.cleanValueSet(vs)))
      .catch(this.handleError);

The cleanValueSet function is responsible for replacing the unwanted characters and reconstructing the object:

private cleanValueSet = (vs: IValueSetDictionary): IValueSetDictionary => {
  const result = Object.keys(vs.valueSet).reduce((acc, rawKey) => {
    const key = rawKey.replace(/[\<\>]/g, '');
    const value = (vs.valueSet[rawKey] as string).replace(/[\<\>]/g, '');
    acc[key] = value;
    return acc;
  }, {} as { [key: string]: string });

  return { valueSet: result };
};

Answer 2

I am looking for a solution to remove the '<>' tags while mapping the response data. I haven't found a clean way to achieve this in typescript yet.

It's not just a typescript issue, the same applies to javascript as well. The key is to transform the objects you receive into the desired format. You can try something like the following code snippet:

return this.http.get(this.url)
      .toPromise()
      .then(response => response as IValueSetDictionary[])
      .then((value) => value.map((vs) => this.cleanValueSet(vs)))
      .catch(this.handleError);

The cleanValueSet function is responsible for replacing the unwanted characters and reconstructing the object:

private cleanValueSet = (vs: IValueSetDictionary): IValueSetDictionary => {
  const result = Object.keys(vs.valueSet).reduce((acc, rawKey) => {
    const key = rawKey.replace(/[\<\>]/g, '');
    const value = (vs.valueSet[rawKey] as string).replace(/[\<\>]/g, '');
    acc[key] = value;
    return acc;
  }, {} as { [key: string]: string });

  return { valueSet: result };
};

Answer 3

Answer №2

To tackle this issue, one possible strategy is to convert the object into a string, utilize Regular Expression to eliminate the brackets, and then reparse the modified version.

It's important to note: This method may pose challenges if the object includes keys or values that contain various bracket characters.

'A scenario where < special characters within brackets > are present'

function removeAngleBrackets(obj) {
    const jsonString = JSON.stringify(obj);
    const result= jsonString.replace(/<(.*?)>/g,'$1');
    return JSON.parse(result);
}

let o = {
  "<CONCENTRATE> | 6": "<CONCENTRATE>",
  "<PHYSICAL> | 5": "<PHYSICAL>",
  "NYMEX WARRANT IN MT | 12": "NYMEX WARRANT IN MT",
  "SHFE WARRANT | 13": "SHFE WARRANT"
}

console.log(removeAngleBrackets(o));

Answer 4

To tackle this issue, one possible strategy is to convert the object into a string, utilize Regular Expression to eliminate the brackets, and then reparse the modified version.

It's important to note: This method may pose challenges if the object includes keys or values that contain various bracket characters.

'A scenario where < special characters within brackets > are present'

function removeAngleBrackets(obj) {
    const jsonString = JSON.stringify(obj);
    const result= jsonString.replace(/<(.*?)>/g,'$1');
    return JSON.parse(result);
}

let o = {
  "<CONCENTRATE> | 6": "<CONCENTRATE>",
  "<PHYSICAL> | 5": "<PHYSICAL>",
  "NYMEX WARRANT IN MT | 12": "NYMEX WARRANT IN MT",
  "SHFE WARRANT | 13": "SHFE WARRANT"
}

console.log(removeAngleBrackets(o));

Creating customized object mappings in Typescript

Answer №1

Answer №2

Similar questions

Issue: ALERT found in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib?

What is the process for incorporating buttons into an Angular mat-table?

Ordering an array using Typescript within React's useEffect()

When testing, the @Input() variable that is inherited and initialized in the child constructor will be null during ngOnInit

What is behind the inconsistency of RxJS versions?

Getting to grips with the intricacies of the Gradle "task" syntax

Creating a Docker image for an Angular application with Node.js

The art of creating an asynchronous function: A comprehensive guide

The stream-chat-js package is causing an Angular compile error due to the absence of an exported member named 'Client'

An issue arises with the Angular 7 application specifically on Mac clients when the production release is deployed

Tips for transforming TypeScript Enum properties into their corresponding values and vice versa

Combining conditions with concatenation in [ngClass]: A step-by-step guide

Modifying the appearance of a Component within a NavLink

Getting a 404 response for incorrect API URLs in ASP.NET Core and single-page applications

Is there a way to adjust this validation logic so that it permits the entry of both regular characters and certain special characters?

Failing Cypress component test: When leveraging an index.ts file for importing and exporting services

A unique Angular decorator is created to seamlessly integrate a new component within an existing component

IE11 is throwing a fit because of a pesky long-running script error caused by the powerful combination of Webpack, React,

Although the cucumber tests indicate success, protractor fails to interact with the elements on the webpage

Can someone help me understand why these checkboxes are not properly binding with the two-way binding, even though the opt.checked property is set to true?