A specific parameter is not included in HTTP request on Angular

Question

I have a strange issue in Angular and Ionic 2. I have the following provider:

  getTransportations = function (category, maxResults) {    
    let url = `${this.domain}/wp-json/gf/v2/forms/1/entries?_labels=1&paging[page_size]=${maxResults}`;
    if (category !== 'all') {
      let search = {
        field_filters: [{
          key: '2',
          operator: 'is',
          value: category
        }]
      };
      let url = `${this.domain}/wp-json/gf/v2/forms/1/entries?_labels=1&paging[page_size]=${maxResults}&search=${encodeURI(JSON.stringify(search))}`;
      console.log(url);

    }
    let headers: Headers = new Headers();
    headers.append("Authorization", "Basic " + this.bt);
    headers.append("Content-type", "application/json");
    return this.http.get(url, {
        headers: headers
      })
      .map(response => response.json())

  };

If category is all then the provider works as expected. However, if the category is something else, on the Dev tools on Chrome, in the tab of Network, I can see the called url without the search parameter. Just _labels and paging. But, the console.log I added inside the if works and it prints the right url that if I use it on Postman, I get the filtered results I want.

I tried different ways to concat strings, but I have the same problem all the time.

This is impossible, at least &search= would have to be printed out because it does not depend on any variables in your template literal string. — Lazar Ljubenović
– Lazar Ljubenović, Commented Sep 3, 2017 at 14:13
It doesn't. That's why I find it strange. And the url if I copy paste on network tab is this one: http://...../wp-json/gf/v2/forms/1/entries?_labels=1&paging[page_size]=15 Removed the domain name — Tasos
– Tasos, Commented Sep 3, 2017 at 14:16
The problem involves too much moving parts. It could be easily debugged with two console.log(url) - inside and outside if block. If you have a suspicion that something goes wrong, it's always a good idea to narrow down the problem and debug variables instead of trying to figure it out in indirect way (HTTP request). — Estus Flask
– Estus Flask, Commented Sep 3, 2017 at 14:42

Estus Flask · Accepted Answer · 2017-09-03 14:36:12Z

1

There is scope problem. let is block scoped.

let url = `${this.domain}/wp-json/gf/v2/forms/1/entries?_labels=1&paging[page_size]=${maxResults}&search=${encodeURI(JSON.stringify(search))}`;

has a scope that belongs to if (...) { ... }. These two url are different variables, and the one that is being assigned inside if is never used (except console.log).

It should be

url = `${this.domain}/wp-json/gf/v2/forms/1/entries?_labels=1&paging[page_size]=${maxResults}&search=${encodeURI(JSON.stringify(search))}`;

answered Sep 3, 2017 at 14:36

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

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

3 Comments

Tasos Over a year ago

I cannot believe that I forgot to delete the let when I copied paste the url line of code. Thanks so much.

Estus Flask Over a year ago

@Tasos You're welcome. I usually use if..else consistently with let, let url; if (...) url = ... else url = .... It's a bit more verbose but treats both conditions as equal and prevents a situation like that. I probably started to do that after similar accident.

Tasos Over a year ago

Good point. Thanks for the suggestion. I will probably follow it from now on

Collectives™ on Stack Overflow

A specific parameter is not included in HTTP request on Angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related