angular http get data

Question

I am looking through how to use HttpClient's get method and I don't see how I can pass data in my get request. I only see how to GET a url. What I mean by this is I would like to do something like this:

curl -X GET \
  http://127.0.0.1:5000/get_nodes \
  -H 'Content-Type: application/json' \
  -H 'Postman-Token: 604243c2-f9da-4f71-b356-a8e31608b45d' \
  -H 'cache-control: no-cache' \
  -d '{
    "username" : "jack_list",
    "node_name" : "nodeToFind"
}'

I would like to pass in json, as shown above with the curl -d flag, to my request. All examples I see online simply do this:

this.http.get("url_of_api"), But what if I need to pass json into my request?

GET request don't normally have a body. If you need to send data with a GET, use request parameters. If it needs to be in the body, youprobably want t POST or a PUT. — JB Nizet, Mar 11 '19 at 22:42
OK. Thanks. out of curiosity why is this non-standard way of using GET? From what i am getting i should pass parameter using the url of my GET request? What advantage does this give us over passing using parameter in the fashion i am trying to? — matt, Mar 12 '19 at 20:42
The advantage is that it respects the HTTP protocol: GET requests are not supposed to have a body. See https://stackoverflow.com/questions/978061/http-get-with-request-body for a more detailed answer. So the advantage is the same as, let's say, not driving a car that is 8 meters large: the roads are not designed for such cars, and you're supposed to respect the rules. — JB Nizet, Mar 12 '19 at 20:56

joka00 · Answer 1 · 2019-03-11T23:23:55.793

HttpClient setup:

Before you start working with HttpClient in Angular. You need to import HttpClientModule to your AppModule.

import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {HttpClientModule} from "@angular/common/http";
import {BrowserModule} from "@angular/platform-browser";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {
}

Everywhere where you want to use HttpClient you need to Inject it into constructor

constructor(private http: HttpClient) {}

GET:

For get the method can look something like this. In this example the request URL will look like this http://127.0.0.1:5000/get_nodes?username="jack_list"&nodename="nodeToFind"

const data = {
"username" : "jack_list",
"node_name" : "nodeToFind"
};
const httpOptions = {
  params: data,
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Postman-Token': '604243c2-f9da-4f71-b356-a8e31608b45d',
    'Cache-control': 'no-cache'
  });
this.http.get('http://127.0.0.1:5000/get_nodes', httpOptions);

Post:

For post the method will be very similar you just need to add your data there

const data = {
"username" : "jack_list",
"node_name" : "nodeToFind"
};
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Postman-Token': '604243c2-f9da-4f71-b356-a8e31608b45d',
    'Cache-control': 'no-cache'
  });
this.http.post('http://127.0.0.1:5000/get_nodes', data, httpOptions);

`this.http.get('http://127.0.0.1:5000/get_nodes', data, httpOptions);` produces error "Expected 1-2 arguments, but got 3." — Wilhelmina Lohan, Mar 11 '19 at 23:01
but now it is a POST, OP is asking for GET which I don't think is possible. — Wilhelmina Lohan, Mar 11 '19 at 23:16
I have updated it again and added sending data with QueryParams that's the only way if I am alright. Both examples should now do the same. — joka00, Mar 11 '19 at 23:17

amphetamachine · Answer 2 · 2019-03-11T22:45:48.127

-1

GET requests don't typically contain a request body. You have to encode them into the URL.

For example:

JSON representation of request "data":

{
    "baz": "qux",
    "wotsit": [
       1,2,'three',
    ]
}

Equivalent GET request:

GET /foo/bar?baz=qux&wotsit[]=1&wotsit[]=2&wotsit[]=three

I've implemented a helper function in my answer here that will encode your complex object into a series of GET parameters.

edited Mar 11 '19 at 22:45

answered Mar 11 '19 at 22:41

amphetamachine

27,620
12
60
72

If the curl command the OP shows works then the server may be expecting the json data in the request body even though it is highly un-standard – Wilhelmina Lohan Mar 11 '19 at 22:43

Wilhelmina Lohan · Answer 3 · 2019-03-11T23:12:46.730

The high level HttpClient.get() doesn't offer request body parameter because a GET with a body is non standard, you sould be able to use HttpClient.request(). Note you may have to also wrap data in JSON.stringify() havn't tested.

const data = {
  "username": "jack_list",
  "node_name": "nodeToFind"
};
const headers = new HttpHeaders();
headers.set('Content-Type', 'application/json ');
headers.set('Postman-Token', '604243c2-f9da-4f71-b356-a8e31608b45d');
headers.set('cache-control', 'no-cache');
const req = new HttpRequest('GET', 'http://127.0.0.1:5000/get_nodes', data, { headers });
this.http.request(req).subscribe(res => {
  // do with res
});

update:

It seems the browser won't let you do this.
async GET request with body from browser https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET

So my updated answer is this is impossible.

angular http get data

3 Answers3