Make a simple http GET request with --data-raw in angular 2+

Question

I am trying to make the following GET request using angular httpClient but unsuccessful so far. Can anyone please help out. The request is the following.

curl --location --request GET 'MY_URL_TO_SEND' 
--header 'Content-Type: application/json' 
--header 'Authorization: MY_TOKEN' 
--data-raw '{
    "_source": ["title"],
    "query": {
        "multi_match": {
                "query": "covid",
                "type": "best_fields",
                "fields": ["title.e_ngrams^4", "description.e_ngrams", "keywords.e_ngrams^2"],
                "fuzziness": 1
            }
    }
}'

The command works when I paste it inside a terminal and will return me the following results.

{
    "took": 1,
    "timed_out": false,
    "_shards": {
        "total": 1,
        "successful": 1,
        "skipped": 0,
        "failed": 0
    },
    "hits": {
        "total": {
            "value": 6,
            "relation": "eq"
        },
        "max_score": 1.0,
        "hits": [
            {
                "_index": "stats",
                "_type": "_doc",
                "_id": "daily-covid-19-deaths",
                "_score": 1.0,
                "_source": {
                    "title": "Daily Covid-19 Deaths"
                }
            }]
}
},

But when I make a call throught angular, instead of just returning the title as _source it will return me all the other parameters also which indicates the call is not working properly.

Here's what I've tried so far.

const httpParams: HttpParams = new HttpParams();
httpParams.set('_source', JSON.stringify(['title', 'slug']));
httpParams.set(
  'query',
  JSON.stringify({
    multi_match: {
      query: query,
      type: 'best_fields',
      fields: [
        'title.e_ngrams^4',
        'description.e_ngrams',
        'keywords.e_ngrams^2',
      ],
      fuzziness: 1,
    },
  })
);

this.http
  .get(environment.ES.searchAPI, {
    headers: this.httpHeaders,
    params: httpParams,
  })
  .subscribe((data: any) => {
    this.searchResults.next(this.parseResults(data));
  });

}

This returns me the results but the params passed(for e.g _source) don't work. It just returns all the results.

Here is what my angular app httpClient returns from the above code.

Assael Azran · Accepted Answer · 2020-08-23T18:19:11.177

2

You could use POST request instead.

An Example:

const body = JSON.stringify({
  _source: ['title', 'slug'],
  query:{
    multi_match: {
      query: query,
      type: 'best_fields',
      fields: [
        'title.e_ngrams^4',
        'description.e_ngrams',
        'keywords.e_ngrams^2',
      ],
      fuzziness: 1,
    }
  }
});

const httpHeaders = new HttpHeaders({
    'Content-Type' : 'application/json'
 });

this.httpClient.post(environment.ES.searchAPI, body, {
    headers:httpHeaders
  })    
  .subscribe((data: any) => {
    console.log(data);
  });

So why in your example you got all result params?

Your GET request ignored params: httpParams since httpParams was null.

Try to change httpParams.set to httpParams = httpParams.set

edited Aug 23 '20 at 18:19

answered Aug 23 '20 at 08:28

Assael Azran

2,863
1
9
13

Postman does work with `POST request` but when I try your code, it gives a `403 Forbidden` error. If I understood you correctly, Instead of using `httpParams.set`, i used `append`. But I still get the `GET request` results successfully with all params. – Mj1992 Aug 23 '20 at 17:42
Did you installed xpack security? And if you are using append then it should be httpParams=httpParams.append(key,value) – Assael Azran Aug 23 '20 at 17:47
no I did not install it, I am new to elasticsearch can that be causing this problem ? – Mj1992 Aug 23 '20 at 17:50
Yes. 403 error code refers to security. Either you pass an authentication token or uninstall xpack. Did you install it as docker? – Assael Azran Aug 23 '20 at 17:52
I am passing an `Authorization Basic` header in every call, does that not work ? – Mj1992 Aug 23 '20 at 17:54
OK the issue was the httpParams as you said, reassigning the httpParam solved the problem. Thanks alot. – Mj1992 Aug 23 '20 at 17:55

Make a simple http GET request with --data-raw in angular 2+

1 Answers1