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 eg _source ) don't work. It just returns all the results.

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

Answer 1

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