String to array (object) Angular TS 12

Issue

I have a CSV file (local), converted it to a string, part of the string is like:

44,"3845657"
51,"3847489"
1,"3888510"
79,"3840471"
57,"3864492"

After I receive input number (first value), I want to match it to the second value (string).

so if input is 51, I want to be able to return 3847489. No headers in the csv.

CSV to string:

  fetchData() {
    fetch('../../../assets/static/mapping.csv')
      .then(response => response.text())
      .then(data => {
        // Do something with your data
        console.log(data);
        this.mappingCSV = data;
      });
  }

outputs:

44,"3845657" 
51,"3847489"
1,"3888510"
79,"3840471"
57,"3864492"

Other ways to convert a csv to an array of objects is also welcome, not married with my csv to string method.

Solution

I'm using HTTPClient in this example which is a built-in service class available in Angular. Here's how to use HTTPClient of Angular for you to read and know its benefits.

In my .ts file, I split the text-converted csv first for any newline. Then I added a loop in which I split the text by comma and pushed the necessary details to the new csvArray.

export class SampleComponent {
  public csvArr: CsvArray[] = [];
  constructor(private http: HttpClient) {
    this.http.get('assets/csv.csv', {
      responseType: 'text'
    }).subscribe(
      (data) => {
        const csvToRowArray = data.split('\n');
        console.log(csvToRowArray);
        for (let index = 0; index < csvToRowArray.length; index++) {
          const row = csvToRowArray[index].split(',');
          this.csvArr.push(new CsvArray(parseInt(row[0], 10), row[1]));
        }
        console.log(this.csvArr);
      },
      (error) => {
        console.log(error);
      }
    );
  }
}

export class CsvArray {
  id: number;
  text: string;

  constructor(id: number, text: string) {
    this.id = id;
    this.text = text;
  }
}

I created a stackblitz so that you can check my implementation.

Answered By - dom.macs