Returning an API response as JSON from C# to angular

Question

I am returning data from API but when I try to parse it as a JSON in Angular ts it says "Argument of type 'Subscription' is not assignable to parameter of type 'string'", what I want to do is to get the json response from API as [{name:"name1"},{name:"name2"}] rather than [{"name":"name1"},{"name":"name2"}] which doesnt write the name on csv file

        [HttpGet("getEmployees")]
        [ProducesResponseType(200, Type = typeof(IEnumerable<EmployeesView>))]
        public async Task<IActionResult> GetEmployeesByCreateDate(DateTime period)
        {
        
            try
            {
                // read model returns users by a logic as enumerable  
                return Ok(await _readModel.GetEmployees(period));
            }
            catch (Exception e)
            {
                // throw exception
            }

myService.ts

getAllPosts() {
      return this.http.get<IEmployee[]>(this.URL).subscribe((data: any) => {return data;});
    }
      
download(data, filename='data') { 
    let csvData=this.ConvertToCSV(data, ['name1','name2']); 
    let blob = new Blob(['\ufeff' + csvData],{type:'text/csv;charset=utf8;'}); 
    let dwldLink = document.createElement("a");
    let url = URL.createObjectURL(blob);
    dwldLink.setAttribute("href", url);
    dwldLink.setAttribute("download", filename + ".csv");
    dwldLink.style.visibility = "hidden";
    document.body.appendChild(dwldLink); 
    dwldLink.click();
}

  ConvertToCSV(objArray, headerList) {
    let array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
    let str = '';
    let row = 'S.No,';
    for (let index in headerList) {
      row += headerList[index] + ',';
    }
    row = row.slice(0, -1);
    str += row + '\r\n';
    for (let i = 0; i < array.length; i++) {
      let line = i + 1 + '';
      for (let index in headerList) {
        let head = headerList[index];
        line += ',' + array[i][head];
      }
      str += line + '\r\n';
    }
    return str;
  }

myComponent.ts

JsonData = JSON.parse( this.URL.getAllPosts());
        
download2(){ this.URL.download(this.JsonData, 'jsontocsv'); } //here is the problem

I want to return my data as :

        [
         {
          name:"name1",
          surname:"surname1"
         },
         {
          name:"name2",
          surname:"surname2"
         }
        ]

But instead I get it like this (I need it in format as above becuase I am downloading the data I get as CSV)

        [
         {
          "name":"name1",
          "surname":"surname1"
         },
         {
          "name":"name2",
          "surname":"surname2"
         }
        ]

thank you The code works but when I type a JSON manually i can see those in dowloaded csv file, the problem is when get json from API and save it to a variable and pass it to the function that creates csv it still doesnt work — AVA
– AVA, Commented Jul 4, 2022 at 22:20

Chris Hamilton · Accepted Answer · 2022-07-04 23:32:35Z

1

The return value from subscribe() is a Subscription, which is used to unsubscribe later. subscribe() does not return your data, it saves your callback function for executing later, once it receives a response. Unsubscribing from a simple http request is not necessary since it will complete after the first response.

You can either do whatever you want to do inside your callback function, or you can use async, await, and firstValueFrom() to get more synchronous looking code.

Also, you don't need to parse it, this is done automatically through the HttpClient service.

async getAllPosts(): Promise<IEmployee[]> {
    return await firstValueFrom(this.http.get<IEmployee[]>(this.URL));
}

JsonData = await this.URL.getAllPosts();

OR

getAllPosts(): Observable<IEmployee[]> {
    return this.http.get<IEmployee[]>(this.URL);
}

this.URL.getAllPosts().subscribe((data) => JsonData = data);

Following your edits, this solution should work for you:

In your service

async getAllPosts(): Promise<IEmployee[]> {
    return await firstValueFrom(this.http.get<IEmployee[]>(this.URL));
}

In your component

async download2() { 
  this.URL.download(await this.URL.getAllPosts(), 'jsontocsv'); 
}

I see another issue with your download function, you have:

let csvData = this.ConvertToCSV(data, ['name1','name2'])

When it should be:

let csvData = this.ConvertToCSV(data, ['name', 'surname']);

To implement using callbacks instead of promises:

In your service

getAllPosts(): Observable<IEmployee[]> {
    return this.http.get<IEmployee[]>(this.URL);
}

In your component

download2() { 
  this.URL.getAllPosts().subscribe((data) => this.URL.download(data, 'jsontocsv')); 
}

edited Jul 4, 2022 at 23:32

answered Jul 4, 2022 at 21:38

Chris Hamilton

11.1k1 gold badge18 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

AVA Over a year ago

Thanks for the explanation but still my problem is when I get data from API it wont create a csv, and when I do it manually typing a json array it somehow works

Chris Hamilton Over a year ago

Could you please log the response from your API call and show it? In your question you've shown two identical outputs so I don't see the issue. Also, if the error comes from creating a csv file, you should show that code.

AVA Over a year ago

You are right I will try to ask another way, sorry for that

AVA Over a year ago

basically response from the api is like this : [ { "name":"name1", "surname":"surname1" }, { "name":"name2", "surname":"surname2" } ] but when i type [ { name:"name1", surname:"surname1" }, { name:"name2", surname:"surname2" } ] which is without quotes on left side it creates my csv file

AVA Over a year ago

download2(){ this.URL.download(this.JsonData, 'jsontocsv'); } and in my service it is download(data, filename='data') { let csvData = this.ConvertToCSV(data, ['name1','name2']); let blob = new Blob(['\ufeff' + csvData], { type: 'text/csv;charset=utf-8;' }); let dwldLink = document.createElement("a"); let url = URL.createObjectURL(blob); dwldLink.setAttribute("href", url); dwldLink.setAttribute("download", filename + ".csv"); dwldLink.style.visibility = "hidden"; document.body.appendChild(dwldLink); dwldLink.click(); document.body.removeChild(dwldLink); }

|

Collectives™ on Stack Overflow

Returning an API response as JSON from C# to angular

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related