Display JSON data in a table format using Angular

I have received a JSON result that looks like this:

{
    "discipline":"ACLS",
    "course": [
                    {
            "value":"ACLS Initial",
            "classes":"0",
            "students":"0"
        },
        {
            "BLS":"CPR Instructor Class",
            "classes":"0",
            "students":"0"
        }       
       ]    
}

Now, I need to display this data in a table format similar to the one shown https://i.sstatic.net/SZu4q.jpg. Although I am familiar with displaying data in tables using Angular, the specific structure of this JSON and its required layout is proving to be challenging. In my previous tables, I have presented data like below:

<table class="table table-hover table-striped">
          <thead>
              <tr>
                      <th>Date/Time</th>
                      <th>Course</th>
                      <th>Location</th>
                      <th>Instructor</th>
                      <th>Enrolled</th>
                      <th>Actions</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td class="trim">25/6/2019</td>
                  <td class="trim">Chemistry</td>
                  <td class="trim">Islamabad</td>
                  <td class="trim">Shaharyar</td>
                  <td class="trim">Yes</td>     
                  <td class="trim">
                    <nb-select>
                      <nb-option value="2">Edit</nb-option>
                      <nb-option value="3">Delete</nb-option>
                      <nb-option value="4">View</nb-option>
                    </nb-select>
                  </td>
              </tr>
          </tbody>
      </table>

If anyone could guide me on how to appropriately present the aforementioned JSON data in my table as depicted in the picture, it would be greatly appreciated. P.S: Please note that the JSON structure mentioned above is hypothetical, and I have not yet developed the API code.

jsonangulartypescript

Answer №1

To organize your data effectively, consider restructuring it in a different way compared to what you originally posted.

An alternative approach is to create an array of objects for disciplines, where each object represents a specific discipline. Inside each discipline, you can have multiple courses. Therefore, include a key called courses with a value that is an array of objects, where each object represents a course.

The revised structure for disciplines would resemble this:

[{
    "name": "ACLS",
    "courses": [{
        "name": "ACLS Initial",
        "classes": "0",
        "students": "0"
    }, {
        "name": "ACLS Renewal course",
        "classes": "0",
        "students": "0"
    }]
}, {
    "name": "BLS",
    "courses": [{
        "name": "CPR Instructor Class",
        "classes": "0",
        "students": "0"
    }]
}]

Subsequently, you only need to present the data on the UI by utilizing nested ngFor loops.

<tbody>
    <ng-container *ngFor="let discipline of disciplines">
        <tr>
            <td>{{discipline.name}}</td>
        </tr>
        <tr *ngFor="let course of discipline.courses">
            <td></td>
            <td>{{course.name}}</td>
            <td>{{course.classes}}</td>
            <td>{{course.students}}</td>
        </tr>
    </ng-container>
</tbody>

Feel free to take a look at a live demo example on StackBlitz.

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

Troubleshooting JSON Module Error in Python Running on Windows 10

I recently completed the installation of the newest Python 3.8, boto3, and the latest aws-cli package on my Windows 10 PC. The configuration for aws cli and boto3 are correct as AWS commands function correctly. However, I encountered an error when attempt ...

pythonjsonamazon-web-servicesboto3aws-cli

Troubles encountered with fetching pre-filled values in Angular form automation

In my project, there is a template driven angular form for the Edit profile section in the app. Data is populated from the API for the form, with fields being empty if no data is available. When a user types new data into the fields, it is successfully pos ...

angularangular-forms

What is the best way to showcase nested array information from a JSON file on an HTML webpage?

students.json { "students": [ { "studentname": "Rohit Kumar", "grade": "A", "student": [ { "SNo": "1", "Subject": "Maths", "Concept": "Numbers" }, { "SNo": "2", ...

javascripthtmljson

Creating two number-like types in TypeScript that are incompatible with each other can be achieved by defining two

I've been grappling with the challenge of establishing two number-like/integer types in TypeScript that are mutually incompatible. For instance, consider the following code snippet where height and weight are both represented as number-like types. Ho ...

typescripttyping

Encountering a syntax error when attempting to utilize the colon symbol for specifying data types

Currently, I am a novice who is delving into the world of TypeScript. Here is a snippet of code that I have written: let num: number = 123; console.log(123); However, when attempting to run this file using Node.js and saving it as test.ts, I encounter the ...

typescript

Inject an asynchronous callback into the constructor of a class by leveraging TypeScript and Node with Passport integration

Currently, I am utilizing the passport-http authentication library. The issue at hand is that its documentation makes use of callbacks while my implementation involves TypeScript classes with async/await functionalities, thus causing uncertainty regarding ...

node.jstypescriptasynchronousasync-awaitpassport.js

Utilize JSON parsing to extract and store data into an object

I'm currently working on extracting specific objects from a parsed JSON stored within an object named data.json. var data = { json: '', text: '', welcome: '', q1: '', } let foo = await fetch(spr ...

javascriptjsonparsingfetch

Move your cursor over a div element while utilizing NgClass

I'm currently working on implementing a hover effect on a div using an Angular ngClass directive. Within the template file, I have a div element with the class "list-item-container" that includes another div with the class "list-item." This "list-item ...

htmlcssangularng-class

Issue encountered while integrating the angular-fontawesome library in StackBlitz

After trying to add a library, an error keeps popping up on stackblitz. The error message in ~/src/main.ts states that ngcc failed to run on @fortawesome/[email protected]. Link to the Stackblitz project Is anyone else experiencing this issue? ...

angularstackblitz

A Vue component library devoid of bundled dependencies or the need for compiling SCSS files

My current challenge involves the task of finding a way to publish our team's component library. These components are intended to be used by various internal applications within our organization. I have specific requirements: The library must be acc ...

javascripttypescriptvue.jsnpmvue-component

Converting a JSON multidimensional array into a Java multidimensional array

Struggling to convert a JSONArray with a complex multi-dimensional String format into a Java multi-dimensional array. Despite numerous attempted solutions, I keep hitting roadblocks. Hoping for some guidance and clarity from the community. Converting it to ...

javaarraysjsonmultidimensional-array

Exploring the process of extracting data from a JSON response using AngularJS

Greetings to everyone, I am currently facing an issue in my controller. I am sending an HTTP POST request to the server and running a PHP file on the server side to check if the user is registered in my database. Below is the code snippet: $scope.sendPos ...

phpjsonangularjs

Capturing user audio on the client side with Angular

Is there a built-in feature in Angular to record client-side audio input? I have attempted using the p5 library, but it is encountering integration problems. ...

angulartypescript

Can you explain the concept of json.Unmarshal Maximum Depth in Go?

Trying to decode JSON response similar to the following: { "item": "section", "block": [ { "id": 185985174761277, "time": 1462333588680, "data": [ { "sender": { ...

jsongo

The MatTableDataSource provides a promise that includes approximately 7000 rows of data

When attempting to load a large amount of data into a MatTableDataSource, I am facing an issue. I would like to display a loader until the data is fully set, but I am unsure of when that happens. I attempted to use a promise like this: return new Promise(r ...

javascriptangularpromiseangular-materialangular7

Trouble with parseJSON when handling form POST in Python

I'm struggling with a javascript HTML page that has an action POST to a python file, expecting a JSON response back. Despite my efforts, I can't figure out how to catch and parse the JSON data. The HTML and python code excerpts below should show ...

javascriptjquerypythonhtmljson

Exploring the Differences between Angular's Http Module and the Fetch API

While I grasp the process Angular uses for HTTP requests, I find myself leaning towards utilizing the Fetch API instead. It eliminates the need to subscribe and unsubscribe just for a single request, making it more straightforward. When I integrated it int ...

javascriptangulartypescripthttp

The interface is unable to populate the Array of Elements

When using Angular, I send a request and save the response in a variable: conversations: Conversation[]; // ChatService getConversations() { return this.http.get<Conversation[]>('/chat/conversations'); } this.chatService.getConversat ...

arraysjsonangulartypescript

Making Angular2 Templates More Efficient with Array.prototype.filter()

I have a variable named networkInterface that includes an array called services. My objective is to create a checkbox input that indicates whether a specific service_id exists within the services array of the networkInterface. An illustration of JSON `int ...

javascriptarraysangulardata-bindingangular2-template

Informing Typescript that a variable has already been null-checked

An unusual yet structurally sound code snippet is presented below: function doFoo(food: string | null = null) { food = food ?? getFood(); // getFood: () => string | null if (!food) { throw Error("There's still no food :("); } plate[fo ...

typescript