How to get the json data from the post request in angular

Question

Trying to get the json date from the post request.But i do not know how to get it in angular14.

curl -X POST http://localhost:8099/magentok/rtf/api/getAllDetails -H "accept: */*" -H "Content-Type: application/json" -d "[{\"labels\":{\"groupName\":\"BrakePad\",\"SelectedFamilyMembers\":{}}}]"

Above the post request returning below the json data. So, How can i get it in angular application.

[ 
  { 
    "gruop_name": BrakePad 
    "group_members": [ 
      "Car1", 
      "Car2", 
      "Car3", 
    ], 
    "seperate_members": [ 
      "Carwheel1", 
      "Carwheel2", 
      "Carwheel3",
    ] 
  } 
]

data.service.ts:

getData(): Observable<string[]> { 
  const response = await fetch("http://localhost:8098/magentok/rtf/api/getAllDetails", {
  method: 'POST',
  body: JSON.stringify({notification: {title: message},to : '/getAllDetails'}),
  headers: {'Content-Type': 'application/json', 'Authorization': 'key='+API_KEY} 
  });

 if (!response.ok) 
 { 
    console.error("Error");
 }
 else if (response.statusCode >= 400) {
    console.error('HTTP Error: '+response.statusCode+' - '+response.statusMessage);
 }
 else{
    return response;
 } 
 }

Demo : https://stackblitz.com/edit/angular-ivy-xzwtrp?file=src%2Fapp%2Fdata.service.ts

score 0 · Answer 1 · answered Jul 13 '22 at 19:42

Angular provides a HTTP client to communicate with a backend. You've already injected it in your DataService, so we can use it in the getData Method.

getData(): Observable<string[]> {
    const url = 'http://localhost:8098/magentok/rtf/api/getAllDetails';
    const headers = new HttpHeaders()
      .set('Content-Type', 'application/json')
      .set('Authorization', `key=${API_KEY}`);
    const body = [{"labels":{"groupName":"BrakePad","SelectedGroupMembers":{}}}];
    
    return this.http.post(url, body, { headers });
}

To execute the request, you must call subscribe() on the observable. Only then the request will be sent.

this.dataService.getData().subscribe({
    next: data => {
        console.log(data);
    },
    error: error => {
        console.error(error);
    }
});

I recommend implementing an interface for the return type. The response is automatically parsed by Angular. Look at the Angular documentation for more information about this.

@EMahanK In your question, in the `data.service.ts` you've set the Authorization-Header with an API Key `'Authorization': 'key='+API_KEY`. I've only included it, since the original request had it. — Lars, Jul 15 '22 at 11:49

score 0 · Answer 2 · answered Sep 28 '22 at 14:23

Following is the basic example of getting json data from post request in Angular in a more organized way using HttpClient:

getData(): Observable<any[]>
{
var httpOptions = {
  headers: new HttpHeaders({
  'Content-Type': 'application/json',
  'Authorization':'key'
  })
}
const body= {notification: {title: message},to : '/getAllDetails'};
return this.http.post<any[]>(url, JSON.stringify(body), httpOptions);
}

In order to get response data/error, we need to subscribe to the observable in following way:

this.dataService.getData().subscribe({
next: data => {
    console.log(data);
    },
    error: error => {
    console.error(error);
    }
});

Note:

We are using subscribe in our app component, but we can use at service level as well.

How to get the json data from the post request in angular

2 Answers2