Using Angular (along with Typescript) to showcase JSON data

Question

Using Angular (along with Typescript) to showcase JSON data

I previously shared this query, but unfortunately, I didn't receive many helpful responses

I have a JSON file that holds the following dataset:

[{
    "ID": 1030980,
    "Component": "Glikoza (Gluk)",
    "Result": "16",
    "Date": "20.10.2018"
  },
  {
    "ID": 1030980,
    "Component": "Kreatinin (Creat)",
    "Result": "5",
    "Date": "19.10.2018"
  },
  {
    "ID": 1030989,
    "Component": "Urea (UN)",
    "Result": "1",
    "Date": "19.10.2018"
  },
  ...and so forth
]

UPDATE: I've integrated this code into my patients.component:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
 selector: 'app-patients',
templateUrl: './patients.component.html',
styleUrls: ['./patients.component.css']
})

export class PatientsComponent implements OnInit {
  title = 'Patient Data';

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.http
    .get('./assets/patients.json')
    .subscribe(res => {
      const patients = res['patients'];
      const patient = patients[0];
      for (let i = 0; i < patients.length; i++) {
        let item = patients[i];
        console.log(item['ID'], item['date'], item['component'], item['result']);
      }
    });
  }
}

Now, I aim to extract the 'component' and 'result' based on Patient ID and Date in a tabular format (displaying the results of each component for various dates and IDs). The table should showcase ALL COMPONENTS AND RESULTS for the specific ID and Date, resembling this layout:

table

If you could provide me with some guidance on how to achieve this task, I would greatly appreciate it! Thank you!

json angular typescript

Answer 1

Answer №1

I have successfully completed it.

For your reference, here is the stackblitz link :

https://i.sstatic.net/gxqhi.png

Summary of my Approach

To achieve this, I designed a dynamic array of arrays based on the specified date and fields.

public patArray: any[] = [];

this.pat[0].patients.forEach(el => {
      if(this.currentDateString == ""){
        this.currentDateString = el['date'];
        if(!this.skipAssign){
          this.patArray[this.idx] = [];
        }
      }

      if(this.currentDateString == el['date']){
        this.patArray[this.idx].push(el);
      } else {
        this.currentDateString = "";
        this.idx++;
        this.patArray[this.idx] = [];
        this.patArray[this.idx].push(el);
        this.skipAssign = true;
      }
    });

Next, by utilizing a nested ngFor with specific flex properties, I was able to structure the layout effectively:

.flex-ctr{
  display: flex;
  width:100%;
  flex-direction: column;
}

.first{
  display: flex;
  flex-direction: row;
  width:100%;
  height:80px;
  border: 1px solid;
  margin-top: 5px;
}

.tbl{
  display: flex;
  flex-direction: row;
  width:75px;
  height:80px;
}

.table-things{
  display: flex;
  flex-direction: column;
  width:100%;
  font-size: 10px;
  border-right: 1px solid;
  text-align: center;
  align-content: center;
}

.bb{
  border-bottom: 1px solid;
  height:30%;
}

.ss{
  padding-top: 30px;
}

<div class="flex-ctr">
  <div class="first" *ngFor="let data of patArray">
    <div class="tbl" *ngFor="let single of data">
      <div class="table-things">
        <div class="bb">{{single.component}}</div>
        <div class="ss">{{single.result}}</div>
      </div>
    </div>
  </div>
</div>

Answer 2

I have successfully completed it.

For your reference, here is the stackblitz link :

https://i.sstatic.net/gxqhi.png

Summary of my Approach

To achieve this, I designed a dynamic array of arrays based on the specified date and fields.

public patArray: any[] = [];

this.pat[0].patients.forEach(el => {
      if(this.currentDateString == ""){
        this.currentDateString = el['date'];
        if(!this.skipAssign){
          this.patArray[this.idx] = [];
        }
      }

      if(this.currentDateString == el['date']){
        this.patArray[this.idx].push(el);
      } else {
        this.currentDateString = "";
        this.idx++;
        this.patArray[this.idx] = [];
        this.patArray[this.idx].push(el);
        this.skipAssign = true;
      }
    });

Next, by utilizing a nested ngFor with specific flex properties, I was able to structure the layout effectively:

.flex-ctr{
  display: flex;
  width:100%;
  flex-direction: column;
}

.first{
  display: flex;
  flex-direction: row;
  width:100%;
  height:80px;
  border: 1px solid;
  margin-top: 5px;
}

.tbl{
  display: flex;
  flex-direction: row;
  width:75px;
  height:80px;
}

.table-things{
  display: flex;
  flex-direction: column;
  width:100%;
  font-size: 10px;
  border-right: 1px solid;
  text-align: center;
  align-content: center;
}

.bb{
  border-bottom: 1px solid;
  height:30%;
}

.ss{
  padding-top: 30px;
}

<div class="flex-ctr">
  <div class="first" *ngFor="let data of patArray">
    <div class="tbl" *ngFor="let single of data">
      <div class="table-things">
        <div class="bb">{{single.component}}</div>
        <div class="ss">{{single.result}}</div>
      </div>
    </div>
  </div>
</div>

Answer 3

Answer №2

Close to reaching your goal based on your current progress.

1. Develop a type for patients (Model)

export class Patient {
    constructor(public ID: string,
        //INCLUDE ALL MODEL PROPERTIES
    ) {}
}

2. Connect the model to your Component

In your patients.component.ts:
```
private patients : Patient[] = [];
```

Prior to subscribing to the get method on the httpclient, assign your component to a variable to set the model:

var self = this; //Now refers to the PatientsComponent variable
this.http
    .get('./assets/patients.json')
    .subscribe(res => {
      let patients = res['patients'];
      let patient = patients[0];
      self.patients = patients; //SETTING THE MODEL ON THE COMPONENT
      for (let i = 0; i < patients.length; i++) {
        let item = patients[i];
        console.log(item['ID'], item['date'], item['component'], item['result']);
      }
    });

3. Construct your html template with *ngFor

In patients.component.html (modify - bind a list of Components to the component class named components):

<table>
  <thead>
    <th>ID</th> 
    <th>Date</th>
    <th *ngFor="let component of components">{{ component }}</th>
  </thead>
  <tbody>
    <tr *ngFor="let patient of patients">
        <td>{{ patient.ID }}</td>
        <td>{{ patient.Date}}</td>
        <td *ngFor="let component of components"> {{ (patient.Component === component) ? patient.Result : "-" }}</td>
    </tr>
  </tbody>
</table>

4. [UPDATE] Refine the Patient Results

public static FilterFunc(patients : Patient[]) {
    let uniques: Patient[] = [];

    patients.forEach(function (value: Patient, index: number) { 
        if (uniques.some(function (patientCompare: Patient) {
            return (patientCompare.Date === value.Date && patientCompare.ID === value.ID && patientCompare.Component === value.Component);
        })) {
            let updatePatient = uniques.find(function (patientCompare: Patient) {
                return (patientCompare.Date === value.Date && patientCompare.ID === value.ID && patientCompare.Component === value.Component);
            });

            updatePatient.Result += value.Result;
        }
        else { 
            uniques.push(value);
        }
    });

}

In the update, ensure to also link a components : string[]; object to the component. This should include ["crea", "gluk", etc....]

Utilize the filter function to refine your data.

Answer 4

Close to reaching your goal based on your current progress.

1. Develop a type for patients (Model)

export class Patient {
    constructor(public ID: string,
        //INCLUDE ALL MODEL PROPERTIES
    ) {}
}

2. Connect the model to your Component

In your patients.component.ts:
```
private patients : Patient[] = [];
```

Prior to subscribing to the get method on the httpclient, assign your component to a variable to set the model:

var self = this; //Now refers to the PatientsComponent variable
this.http
    .get('./assets/patients.json')
    .subscribe(res => {
      let patients = res['patients'];
      let patient = patients[0];
      self.patients = patients; //SETTING THE MODEL ON THE COMPONENT
      for (let i = 0; i < patients.length; i++) {
        let item = patients[i];
        console.log(item['ID'], item['date'], item['component'], item['result']);
      }
    });

3. Construct your html template with *ngFor

In patients.component.html (modify - bind a list of Components to the component class named components):

<table>
  <thead>
    <th>ID</th> 
    <th>Date</th>
    <th *ngFor="let component of components">{{ component }}</th>
  </thead>
  <tbody>
    <tr *ngFor="let patient of patients">
        <td>{{ patient.ID }}</td>
        <td>{{ patient.Date}}</td>
        <td *ngFor="let component of components"> {{ (patient.Component === component) ? patient.Result : "-" }}</td>
    </tr>
  </tbody>
</table>

4. [UPDATE] Refine the Patient Results

public static FilterFunc(patients : Patient[]) {
    let uniques: Patient[] = [];

    patients.forEach(function (value: Patient, index: number) { 
        if (uniques.some(function (patientCompare: Patient) {
            return (patientCompare.Date === value.Date && patientCompare.ID === value.ID && patientCompare.Component === value.Component);
        })) {
            let updatePatient = uniques.find(function (patientCompare: Patient) {
                return (patientCompare.Date === value.Date && patientCompare.ID === value.ID && patientCompare.Component === value.Component);
            });

            updatePatient.Result += value.Result;
        }
        else { 
            uniques.push(value);
        }
    });

}

In the update, ensure to also link a components : string[]; object to the component. This should include ["crea", "gluk", etc....]

Utilize the filter function to refine your data.

Using Angular (along with Typescript) to showcase JSON data

Answer №1

Answer №2

1. Develop a type for patients (Model)

2. Connect the model to your Component

3. Construct your html template with *ngFor

4. [UPDATE] Refine the Patient Results

Similar questions

What is the process of querying both a collection and a subcollection in Firebase using AngularFire?

Error message: `Socket.io-client - Invalid TypeError: Expected a function for socket_io_client_1.default`

Minimum width of Angular Material's mat-menu

Guide on exporting a function from a module as a class property

What are some strategies for customizing the appearance of child components within a parent component?

Utilizing Flask templates to embed JSON data

What specific data is AR collecting from the XXXJSON webpage?

Error encountered: NextJs could not find the specified module, which includes Typescript and SCSS

Error occurs when JSON.parse is used

Understanding and decoding complex JSON structures on Windows Phone 8 involving Dictionary Key/Value pairs

Creating a unique JSON structure with personalized fields

Can calculations be performed on JSON fields in SQLAlchemy with Postgres?

Sorry, but I can't help with that request

Consolidate various arrays of objects while eliminating duplicate items based on an optional property

Typescript is experiencing an error due to the use of attr("disabled", false) causing a disruption

Expanding on Angular's virtual scroll feature: automatically add new items as you reach the bottom of the

Strategies for modifying the bound value in Angular with an observable object

Issue encountered with Angular 12 Material table: The data source provided does not match an array, Observable, or DataSource

Having trouble converting JSON string into map using Jackson in Java

Using Vue.js to process JSON data