I am currently working on implementing an Angular template where I need to display data from a CSV file in a structured table format. However, I am facing challenges with the core scripting part related to the retrieved CSV data.
Here is a snippet of my code:
export class AppComponent implements OnInit{
title = 'temp-app';
public headers = [];
public data = {};
public strData = ''
public selectedHeader = null;
constructor(private fileSvc: FileService) {
}
ngOnInit(): void {
this.fileSvc.getHeaders().subscribe(
data => {
if (data != null && data.length > 0) {
let headers = data.split('\n');
headers = headers.filter(x => x.trim() !== '');
for (const item of headers) {
this.headers.push(item.trim());
}
this.headers=[...new Set(this.headers)];
} else {
this.headers = [];
}
}
);
Service.ts
@Injectable({
providedIn: 'root'
})
export class FileService {
constructor(private httpClient: HttpClient) {
}
public getHeaders() {
return this.httpClient.get('assets/data.csv', { responseType: 'text' });
}
}
The code above needs some corrections. Here is the UI design I am aiming for: https://i.sstatic.net/CACLZ.png
data.csv
https://i.sstatic.net/OSbFz.png
Expected behavior:
1. The code should read the first column "AppName" and extract unique values from all the rows in that column. Using these unique values, buttons should be created. For example, if "LDAP" appears multiple times in the column, it should only be considered once for creating a button.
2. Repeat the process to create buttons for all other values in the first column.
For reference:
Thank you in advance. In the future, I plan to enhance the functionality to display only the respective column values when a button is clicked. For example, clicking on OAM will display the OAM column values, and clicking on LDAP will show the LDAP column values.