Angular: rendering JSON data as a dynamic grid

Question

Angular: rendering JSON data as a dynamic grid

I'm looking to organize and display user scores by date in a matrix format where each user has only one score per date.

My desired matrix layout is as follows:

Date         User1   User2   User3
2020-01-05   40      20      20
2020-01-03   40      30      -
2019-12-02    -      23      -

I have fetched the data from an API in the form of a JSON array consisting of objects with date, user, and score details. Is it possible to present this data in the format of the matrix mentioned above?

I attempted using *ngFor with various nesting options but couldn't achieve the desired outcome. Should I restructure the data before attempting to display it?

Here's an example of the JSON data:

{ 
   "results":[ 
      { 
         "date":"2020-01-05",
         "user":"user1",
         "score":40
      },
      { 
         "date":"2020-01-05",
         "user":"user2",
         "score":20
      },
      { 
         "date":"2020-01-05",
         "user":"user3",
         "score":20
      },
      { 
         "date":"2020-01-03",
         "user":"user1",
         "score":40
      },
      { 
         "date":"2020-01-03",
         "user":"user2",
         "score":30
      },
      { 
         "date":"2019-12-02",
         "user":"user2",
         "score":23
      }
   ]
}

angular typescript

Answer 1

Answer №1

The script provided below generates a matrix as per your requirement:

const data = {
    "results": [
        {
            "date": "2021-05-10",
            "user": "john_doe",
            "score": 70
        }
        ...
    ]
};

const users = Array.from(new Set(data.results.map(i => i.user)));
const dates = Array.from(new Set(data.results.map(i => i.date)));

const resultMatrix = [
    ['Date', ...users],    // Header row
    ...dates.map(date => { // Additional rows
        return [
            date,          // Date column
            ...users.map(user => { // Values columns
                const userScore = data.results.find(i => i.user === user && i.date === date);
                return userScore ? userScore.score : '-';
            })
        ];
    })
];

Answer 2

The script provided below generates a matrix as per your requirement:

const data = {
    "results": [
        {
            "date": "2021-05-10",
            "user": "john_doe",
            "score": 70
        }
        ...
    ]
};

const users = Array.from(new Set(data.results.map(i => i.user)));
const dates = Array.from(new Set(data.results.map(i => i.date)));

const resultMatrix = [
    ['Date', ...users],    // Header row
    ...dates.map(date => { // Additional rows
        return [
            date,          // Date column
            ...users.map(user => { // Values columns
                const userScore = data.results.find(i => i.user === user && i.date === date);
                return userScore ? userScore.score : '-';
            })
        ];
    })
];

Angular: rendering JSON data as a dynamic grid

Answer №1

Similar questions

Having trouble uploading a file in PDF format (*.pdf)

Rearrange list items by dragging and dropping

Utilize Optional Chaining for verifying null or undefined values

This element is not suitable for use as a JSX component since its return type 'void' is not a valid JSX element. Please check the return type to ensure it is compatible with

Exploring the capabilities of @angular/cli and integrating it with non-angular scripts can significantly

Error encountered on Firefox browser when saving content in TinyMCE editor: NS_ERROR_UNEXPECTED

Using Angular's FormControl with a Pipe

In AngularJS, the use of the '+' operator is causing concatenation instead of addition

Differences between Angular services and exportsIn Angular,

A guide on integrating mat-select into Angular input fields

Angular failing to render data in user interface

Translate Firestore value updates into a TypeScript object

The typescript error "Cannot read properties of undefined" is encountered while trying to access the 'map' function

Utilizing getter and setter functions within a setter with a type guard

Angular modules are designed to repeat chunks of code in a

Navigating with Angular: Displaying child components on separate pages

Unexpected expression after upgrading to TypeScript 3.7.2 was encountered, file expected.ts(1109)

Loading Angular 4 Material Tabs when a tab is selected

Is it possible for an Interface's property to be a type that contains an array?

Tips for configuring the _document.tsx file in Next.js for optimal performance