Creating a number of arrays based on the row of a .CSV file can be accomplished in Angular by utilizing the

Question

Creating a number of arrays based on the row of a .CSV file can be accomplished in Angular by utilizing the

Implementing an Angular template to read .CSV files and generate a table involves creating two separate files: one for the header and another for the table content.

For the header CSV file: header.csv

https://i.stack.imgur.com/ojMo6.png

For the table data CSV file: tableContent.csv

https://i.stack.imgur.com/kl6GF.png

I have successfully converted all the data into arrays. However, it is currently stored in a single array. Below is my code for better understanding. The .csv files are located in the assets folder.

app.component.ts

export class AppComponent {
  title = 'project';
  myData: any;
  myContent: any;
  constructor(private httpClient: HttpClient) { }
  ngOnInit() {
    this.httpClient.get('assets/header.csv', { responseType: 'text' }).subscribe(
      data => {
        this.myData = data.split("\n");
      }
    );
  }
  clicked(event) {
    console.log(event.srcElement.name);
    this.httpClient.get('assets/tableContent.csv', { responseType: 'text' }).subscribe(
      data => {
        this.myContent = data.split(",");
        let ab=this.myContent;
        console.log("------------>",ab);        
      }
    );
  }
}

app.component.html

<table id="customers">
  <tr>
    <th *ngFor="let dataheader of myData"><button (click)="clicked($event)" id={{dataheader}} name={{dataheader}}>{{dataheader}}</button></th>    
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td>Germany</td>
  </tr>
</table>

Browser screen https://i.stack.imgur.com/elUo8.png

The goal is to create multiple object arrays as shown below:

[{
"myAccess":["myAccess","Prod","URL","[email protected]","Enable"]
},
{
"System":["System","Environment","URL","[email protected]","Enable"]
},
{
"OAM":["OAM","DEV","URL","[email protected]","Enable"]
},
{
"Mylogin":["Mylogin","prod","URL","[email protected]","Enable"]
}]

The table heading will come from the specific header.csv file, while the data will be sourced from the tableContent.csv file. When clicking on a particular header, it should search within the JSON object read from tablecontent.csv, displaying the corresponding result. For example, clicking on "myAccess" should display the related myaccess data in the table.

Thank you in advance, would appreciate your insights.

javascript arrays angular typescript csv

Answer 1

Answer №1

If you follow this solution, your issue should be resolved. It's important to handle errors more effectively than I did! 😄 (Styling with Bootstrap)

Component

import { Component, OnInit } from '@angular/core';
import { FileService } from './services/file.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
  title = 'temp-app';

  public headers = [];
  public data = {};

  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());
          }
        } else {
          this.headers = [];
        }
      }
    );

    this.fileSvc.getData().subscribe(
      data =>  {
        if (data != null && data.length > 0) {
          const tempData = data;
          let rows = [];
          rows = tempData.split('\n');
          for (let row of rows) {
            if (row.trim() === '') {
              continue;
            }
            row = row.replace('\r', '')
            const rowSplits = row.split(',');
            this.data[rowSplits[0]] = rowSplits;
          }
        } else {
          this.data = {};
        }
      });
  }

  headerSeleced(header) {
    this.selectedHeader = header;
  }
}

Service

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class FileService {

  constructor(private httpClient: HttpClient) {

  }

  public getHeaders() {
    return this.httpClient.get('assets/header.csv', { responseType: 'text' });
  }

  public getData() {
    return this.httpClient.get('assets/tableContent.csv', { responseType: 'text' });
  }
}

Sample HTML

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <h3>Headers</h3>
    </div>
    <div *ngFor="let item of headers"
      class="col-sm-3 bg-secondary p-2 m-1 text-white btn"
      (click)="headerSeleced(item)">
      {{item}}
    </div>
  </div>
  <hr>
  <div class="row">
    <ng-container *ngFor="let item of data | keyvalue">
      <ng-container *ngIf="selectedHeader == item.key" >
        <div class="col-auto border">
          <b>{{item.key}}</b>
        </div>
        <div *ngFor="let prop of item.value" class="col-auto border">
          {{prop}}
        </div>
      </ng-container>
    </ng-container>
  </div>
</div>

Answer 2

If you follow this solution, your issue should be resolved. It's important to handle errors more effectively than I did! 😄 (Styling with Bootstrap)

Component

import { Component, OnInit } from '@angular/core';
import { FileService } from './services/file.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
  title = 'temp-app';

  public headers = [];
  public data = {};

  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());
          }
        } else {
          this.headers = [];
        }
      }
    );

    this.fileSvc.getData().subscribe(
      data =>  {
        if (data != null && data.length > 0) {
          const tempData = data;
          let rows = [];
          rows = tempData.split('\n');
          for (let row of rows) {
            if (row.trim() === '') {
              continue;
            }
            row = row.replace('\r', '')
            const rowSplits = row.split(',');
            this.data[rowSplits[0]] = rowSplits;
          }
        } else {
          this.data = {};
        }
      });
  }

  headerSeleced(header) {
    this.selectedHeader = header;
  }
}

Service

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class FileService {

  constructor(private httpClient: HttpClient) {

  }

  public getHeaders() {
    return this.httpClient.get('assets/header.csv', { responseType: 'text' });
  }

  public getData() {
    return this.httpClient.get('assets/tableContent.csv', { responseType: 'text' });
  }
}

Sample HTML

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <h3>Headers</h3>
    </div>
    <div *ngFor="let item of headers"
      class="col-sm-3 bg-secondary p-2 m-1 text-white btn"
      (click)="headerSeleced(item)">
      {{item}}
    </div>
  </div>
  <hr>
  <div class="row">
    <ng-container *ngFor="let item of data | keyvalue">
      <ng-container *ngIf="selectedHeader == item.key" >
        <div class="col-auto border">
          <b>{{item.key}}</b>
        </div>
        <div *ngFor="let prop of item.value" class="col-auto border">
          {{prop}}
        </div>
      </ng-container>
    </ng-container>
  </div>
</div>

Answer 3

Answer №2

class NewAppComponent {
  appTitle = 'new project';
  data: any;
  content = [];
  
  constructor(private httpService: HttpClient) { }
  
  initialize() {
    this.httpService.get('assets/info.csv', { responseType: 'text' }).subscribe(
      response => {
        this.data = response.split("\n");
      }
    );
  }

  handleEvent(event) {
    console.log(event.srcElement.name);
    
    this.httpService.get('assets/content.csv', { responseType: 'text' }).subscribe(
      result => {
        this.content.push({event.srcElement.name: result.split(",")});
        let updatedContent=this.content;
        console.log("Updated Content:", updatedContent);        
      }
    );
  }
}

Answer 4

class NewAppComponent {
  appTitle = 'new project';
  data: any;
  content = [];
  
  constructor(private httpService: HttpClient) { }
  
  initialize() {
    this.httpService.get('assets/info.csv', { responseType: 'text' }).subscribe(
      response => {
        this.data = response.split("\n");
      }
    );
  }

  handleEvent(event) {
    console.log(event.srcElement.name);
    
    this.httpService.get('assets/content.csv', { responseType: 'text' }).subscribe(
      result => {
        this.content.push({event.srcElement.name: result.split(",")});
        let updatedContent=this.content;
        console.log("Updated Content:", updatedContent);        
      }
    );
  }
}

Answer 5

Answer №3

To remove the next line icon, follow these steps:
https://i.stack.imgur.com/GBMy4.png

Add the following code in your app.component.ts file:

this.httpClient.get('assets/content.csv', { responseType: 'text' }).subscribe(
      data => {
             // insert this line before splitting
              data = data.replace(/[\r\n]/g,",");
             this.headerData = data.split(",").filter(Boolean);
      }
    );

First, extract the header data from a CSV file:

this.httpClient.get('assets/header.csv', { responseType: 'text' }).subscribe(
      data => {
             // insert this line before splitting
              data = data.replace(/[\r\n]/g,",");
             this.headerData = data.split(",").filter(Boolean);
      }
    );

To achieve the desired result, adjust the array based on the length of this.headerData.
Based on the image in your CSV file, the column length will be dynamic according to this.headerData.length

 for( let index = 0; index < this.myContent.length; index ++) {
           const value = this.myContent.splice(0,this.headerData.length);
          // now you can structure the data as needed
 }

For more information on how to use Array.Splice() to create sub-arrays.

Answer 6

To remove the next line icon, follow these steps:
https://i.stack.imgur.com/GBMy4.png

Add the following code in your app.component.ts file:

this.httpClient.get('assets/content.csv', { responseType: 'text' }).subscribe(
      data => {
             // insert this line before splitting
              data = data.replace(/[\r\n]/g,",");
             this.headerData = data.split(",").filter(Boolean);
      }
    );

First, extract the header data from a CSV file:

this.httpClient.get('assets/header.csv', { responseType: 'text' }).subscribe(
      data => {
             // insert this line before splitting
              data = data.replace(/[\r\n]/g,",");
             this.headerData = data.split(",").filter(Boolean);
      }
    );

To achieve the desired result, adjust the array based on the length of this.headerData.
Based on the image in your CSV file, the column length will be dynamic according to this.headerData.length

 for( let index = 0; index < this.myContent.length; index ++) {
           const value = this.myContent.splice(0,this.headerData.length);
          // now you can structure the data as needed
 }

For more information on how to use Array.Splice() to create sub-arrays.

Creating a number of arrays based on the row of a .CSV file can be accomplished in Angular by utilizing the

Answer №1

Answer №2

Answer №3

Similar questions

Leveraging req.files for uploading multiple files at once

Tips for Showing Certain Slides When the Page Loads

Follow the correct sequence when tapping the pipes and disregard the outcomes

List with pulldown options

Enhancing the performance of your code by optimizing it using jQuery when a checkbox is either checked or

Modify the state of a Babylon JS instance that was set up within an Angular 2 component

Using Three.JS 'OrbitControls' in VueJS application results in a black screen appearing?

Setting field names and values dynamically in MongoDB can be achieved by using variables to dynamically build the update query

Working with a Mix of Properties in Styled Components

"Converting a standard grammar with recursion and alternations into a regular expression: A step-by-step

Why is this method call not throwing an IndexOutOfBoundsException as expected?

Changing a List within a Structure

How can I make a div's height match that of another div?

"Mix up the items from two ngFor loops for a dynamic display

Sending numerous arguments to getStaticPaths() in nextjs

JavaScript is throwing an error stating that the requestData is undefined, even though the

Investigating sibling HTML elements using an Angular directive

Using TypeScript to incorporate JS web assembly into your project

When I click on the button, the output does not appear

Communicating data between Angular components that have no direct binding or relationship