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

Tips for sending information from an AJAX request to a Laravel 5.2 controller using the POST method

Can someone provide a description for a field within typedoc documentation?

Challenges with Angular observables

Searching for multiple filtered items in Vue.js

struggling with beginner-level JavaScript issues

Strategies for managing various errors that can arise when multiple Angular components are subscribed to a single state

Creating a collapsible accordion feature with jQuery using a specific HTML layout: wanna learn how?

Determine changes in data retrieved from a JSON file using React

various positions for ngb properties

Using ReactJS to compare arrays and render only if the name is present in both arrays

Encountering compilation errors with Angular project following installation of a package

Enhancing code completion with IntelliSense for customized styled components' themes

What is the best way to retrieve the dimensions of a custom pop-up window from the user?

Looking for a particular value within a multidimensional $_SESSION array - here's how!

Installing a specific version of yarn on Ubuntu

Issue with starting Angular2 beta 15 using npm command

Exporting JSON data as an Excel file in AngularJS, including the option to customize the fonts used for the

I recently made the switch to Angular 9.0 for my project, but when I ran the build using yarn, I encountered some warnings. Despite the

React useState Error: Exceeded maximum re-renders. React enforces a limit on the number of renders to avoid getting stuck in an endless loop

How to submit a form in Angular2 without reloading the page