Transform a JSON into the necessary structure using TypeScript

I just started learning Angular 6 and TypeScript. The backend API call returns data in the following format.

> res = [{
>     "metadata": {
>         "lastGpSyncTime": "2000-11-21T16:07:53",
>         "dataFromDB": true
>     },
>     "noGoalSelectionReport": {
>         "userCount": 0
>     },
>     "oneGoalSelectionReport": {
>         "userCount": 237
>     },
>     "twoGoalSelectionReport": {
>         "userCount": 176
>     },
>     "threeGoalSelectionReport": {
>         "userCount": 17
>     },
>     "registeredCount": 547 }];

To display this data in a bar chart, it needs to be converted into the required format as shown below.

[{
  "goalName": "No Goal",
  "userCount": 0
}, {
  "goalName": "One Goal",
  "userCount": 237
}, {
  "goalName": "Two Goals",
  "userCount": 176
}, {
  "goalName": "Three Goals",
  "userCount": 17
}];

Can anyone guide me on how to achieve this conversion using TypeScript?

angulartypescriptangular6angular5

Answer №1

What do you think about this formatting function?

    formatData(res): { goalName: string, userCount: number }[] {

        const data = res[0];
        const groupNames = Object.keys(data);

        const formattedData = [];

        groupNames.forEach(groupName => {
            if (groupName !== 'metadata') {

                // Adjust the goal name by adding spaces before capital letters and removing 'SelectionReport'
                let goalName = groupName.replace('SelectionReport', '').replace(/([A-Z])/g, ' $1').trim();

                // Capitalize the first letter
                goalName = goalName.charAt(0).toUpperCase() + goalName.slice(1);

                const dataGroupFormatted = {
                    goalName,
                    userCount: data[groupName].userCount
                };

                formattedData.push(dataGroupFormatted);
            }
        });

        return formattedData;

    }

Typescript enhances code quality by defining specific types, such as an array of objects with properties like goalName and userCount. To further improve this function, consider adding more type definitions, like the input type for the 'res' parameter.

Answer №2

A simple illustration

    const keys = Object.keys(this.res[0]);
    let data = [];
    for (let index = 0; index < keys.length; index++) {
      if (keys[index] !== "metadata" && keys[index] !== "registeredCount") {
        
        data.push({
          userCount: this.res[0][keys[index]].userCount,
          goalName:
            keys[index]
              .toUpperCase()
              .charAt(0) +
            keys[index]
              .replace("SelectionReport", "")
              .replace(/([A-Z])/g, " $1")
              .trim()
              .slice(1)
        });
      }
    }
    console.log(data);

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

Is Angular 12's ::ng-deep deprecated, or is it still the sole option that's effective?

I've been experimenting with updating the text in ngx-charts and found a solution that works: ::ng-deep .ngx-charts { text{ fill: #ff0000; } } The only drawback is that ::ng-deep is considered deprecated? :host isn't effective ...

angularangular12

Error encountered during Angular CLI's production build: TypeError - Attempting to access property 'kind' of an undefined value

To view the error message, click here { "@angular-devkit/build-angular": "~0.803.19", "@angular/cli": "~8.3.19", "@angular/compiler-cli": "~8.2.14", "@angular/language-service": "~8.2.14", "@types/jasmine": "~3 ...

angulartypescriptangular-cli

Displaying updated information in Angular

I recently developed a chat application using Angular that utilizes the stomp socket from @stomp/ng2-stompjs. To display all messages, I am leveraging *ngFor. <p *ngFor="let item of messages" style="padding: 5px; font-size: 18px"> <span style ...

angulartypescript

Ionic 2 struggles to manage a menu overlaying a Google Maps component

I have developed an Ionic V2 side menu application and incorporated a GMaps element into it. However, I am facing issues with handling elements that appear in front of the map. The buttons on the side menu become disabled when they are overlapped by the ma ...

javascriptgoogle-mapstypescriptionic-frameworkionic2

Encountering an issue with the message: "Property 'ref' is not available on the type 'IntrinsicAttributes'."

Having trouble implementing a link in React and TypeScript that scrolls to the correct component after clicking? I'm using the useRef Hook, but encountering an error: Type '{ ref: MutableRefObject<HTMLDivElement | null>; }' is not assi ...

javascriptreactjstypescript

Monitoring the loading progress of multiple files using Three JS

Just starting out with Three JS and I'm on a mission to create a loading screen that displays the progress of assets being loaded for a scene. I have a total of 7 different types of assets, including: 4 GLB files 2 Texture files And 1 Obj file Acco ...

javascripttypescriptthree.jsloadinggltf

Executing dispatch Action in store.pipe of Angular 13 from within a component

I am currently working with Angular 13 and ngRxStore. Within my component, I am looking to access my store and trigger a new Action using the data retrieved from the store. Here is a snippet of my code: productState$ :Observable<ProductsState> | null ...

angularrxjsngrx

Divide a list Observable into two parts

In my code, I have an Observable called 'allItems$' which fetches an array of Items. The Items[] array looks something like this: [false, false, true, false] My goal is to split the 'allItems$' Observable into two separate Observables ...

javascriptangularrxjsobservable

Looking to verify the functionality of the router.navigate method when employing relativeTo?

How can we effectively test the router.navigate method to ensure it accepts provided queryParams and navigates to the correct location path? In Component file:-- syncQueryParams() { this.router.navigate([], { relativeTo: this.activatedRoute, ...

angularunit-testingjasmineangular-test

Traverse an array of nested objects in Firebase JSON notation

Currently, I am utilizing firebase4j, a Java library for Firebase. Although I understand that it is more optimal to use Node.js, I wanted to experiment with Java for this project. Within my database, I am required to store the URLs of images along with var ...

javajsonangularfirebasefirebase-realtime-database

What is the reason why modifying a nested array within an object does not cause the child component to re-render?

Within my React app, there is a page that displays a list of item cards, each being a separate component. On each item card, there is a table generated from the nested array objects of the item. However, when I add an element to the nested array within an ...

javascriptreactjsarraystypescriptdom

Angular: Error when TypeScript object returns an array object value

I have encountered a strange issue where the array value returned as [object Set] when I console log it. It's unclear whether this problem is occurring in the component or the service, but the object values are not being displayed. This issue arises ...

javascriptarraysangulartypescriptangular7

File upload not functioning correctly with Angular 7 MEAN stack when using multer middleware

I am currently using the multer middleware for file upload in my Angular mean stack project. However, I am facing an issue where I am unable to retrieve req.file but can successfully access req.body, indicating that the file is not being uploaded. When I c ...

angularexpressmulter

Tips for maintaining consistent column size in an angular material table as the screen size shrinks

I have a material table with 9 columns and I want to keep the column size consistent even when the screen size is reduced. Currently, as I decrease the screen size, the last column shrinks first while the other columns remain the same size, creating an un ...

angularangular-materialmaterial-ui

Employing the keyof operator with the typeof keyword to access an object

What data type should be used for the key variable? I am encountering an error stating that "string" cannot be used to index the type "active1: boolean, active2". const [actives, setActives] = React.useState({ active1: false, active2: false, }); con ...

reactjstypescriptreact-nativetypes

Annotating Vue Computed Properties with TypeScript: A Step-by-Step Guide

My vue code looks like this: const chosenWallet = computed({ get() { return return wallet.value ? wallet.value!.name : null; }, set(newVal: WalletName) {} } An error is being thrown with the following message: TS2769: No overload ...

typescriptvue.jsvuejs3vue-composition-api

What is the best way for me to bring in this function?

Currently, I am in the process of developing a point-of-sale (POS) system that needs to communicate with the kitchen. My challenge lies in importing the reducer into my express server. Despite multiple attempts, I have been unable to import it either as a ...

node.jsreactjstypescriptexpress

What is the best method for extracting ngControl from unit tests?

How can I access the injected ngControl from unit tests and resolve any associated errors? Within the component: constructor( @Self() @Optional() public ngControl: NgControl ) { } ngOnInit(): void { this.ngControl.valueChanges Within the unit t ...

angularunit-testing

Is there a way to create a reusable type annotation for declaring functions in Typescript?

type Func = (param:string) => void // implementing a function expression const myFunctionExpression:Func = function(param) { console.log(param) } Within the TypeScript code snippet above, I have utilized a type alias to define the variable in a func ...

typescript

Leveraging ngx-treeview in Angular 16 for dynamic tree visual

Currently facing an issue with migrating Angular from version 12 to 16, specifically in regards to the ngx-treeview package. Although the last update was targeted for version 10, it previously worked with version 12 but is now non-functional. The error mes ...

angularngx-treeviewangular-migration