Just stepping into the world of Angular, I want to share a brief overview of my goal since the code is lengthy. Here's the relevant part:
Within my project, I have a list display component.
And I have two components, namely animals and zone.
For instance:
zone comprises of 2 columns - zone name and zone code,
While animals consists of 3 columns - animal code, animal name, and animal zone
and so forth (imagine 10 other components as well)
Every component generates JSON data and sends it to the display list component.
The display list component then parses the JSON and renders it using ngFor.
In essence:
- Each component creates JSON and sends it to a service with a behavior subject
- The service, with a behavior subject, receives the JSON
- The display component fetches the latest JSON from the service's behavior subject
- Finally, the display component parses the JSON and displays it using ngFor
I have managed to generate and send JSON to the display list component effectively.
For instance, I can showcase the JSON data from the zone component which is then sent to the display component.
https://i.sstatic.net/4oO1L.png
I seek your guidance in processing the JSON data so that I can seamlessly display it on the display component's HTML using ngFor.
Code:
data.service.ts:
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
private messageSource = new BehaviorSubject(null);
currentMessage = this.messageSource.asObservable();
constructor() { }
changeMessage(message: any) {
console.log('changed');
console.log(message);
this.messageSource.next(message);
}
}
for zone (zone.component.ts) : [car.component.ts is identical to zone.component.ts, don't be confused]
import { Component, OnInit } from '@angular/core';
import { DataService } from "../../services/data.service";
import { Router } from '@angular/router';
@Component({
selector: 'app-cars',
templateUrl: './cars.component.html',
styleUrls: ['./cars.component.css']
})
export class CarsComponent implements OnInit {
jsonData: any;
data: any;
constructor(private router: Router, private dataService: DataService) {
}
dd() {
this.setData(this.jsonData);
}
ngOnInit(): void {
this.setJsonData();
}
async getJsonData() {
const myurl: string = "http://localhost:3000/zone/get/all";
const response = await fetch(myurl, { headers: { 'Content-Type': 'application/json' } });
return await response.json();
}
async setJsonData() {
this.jsonData = await this.getJsonData();
}
setData(newJsonData: any) {
this.data = Object.entries(newJsonData);
}
navigateToDisplayList(){
this.router.navigateByUrl('display-list');
}
newMessage() {
this.dataService.changeMessage(this.jsonData);
// console.log(this.jsonData);
// console.log(this.data);
this.navigateToDisplayList();
}
}
for display : display-list.component.ts :
import { Component, OnInit } from '@angular/core';
import { DataService } from "../../services/data.service";
@Component({
selector: 'app-display-list',
templateUrl: './display-list.component.html',
styleUrls: ['./display-list.component.css']
})
export class DisplayListComponent implements OnInit {
data: any;
constructor(private dataService: DataService) { }
ngOnInit(): void {
this.dataService.currentMessage.subscribe(message => this.data = message);
}
dd(){
console.log(this.data);
document.body.innerText = this.data.toString();
}
}
A special note:
Please refrain from suggesting to capture the JSON in a variable and then loop through console.log(object.zonename). Due to the varying JSON content across 30 components, direct HTML display from JSON is essential.
Thank you for your understanding.