I'm trying to build a URL to fetch data from a REST service, a valid url should look like this

http://SITENAME/api/get_posts/?count=5&page=1&post_type=gallery

and I have arguments like count, page, post_type and more.. these are optional arguments and one or all could be null I tried the following code

var query = 'http://localhost/wptest/api/get_posts/?';
fetchData(countIn: int, pageIn: int, typeIn: string, query: string) {

    if (this.countIn)   //if count not null, add count parameter.
        query = `${query}&count=${this.countIn}`;
    if (this.pageIn)  
        query = `${query}&page=${this.pageIn}`;
    if (this.typeIn)  
        query = `${query}&post_type=${this.typeIn}`;

    return this.http.get(query).map(res => res.json());
}

this ugly code is returning an invalid URL, when I go to chrome debugger => network tab I find:

however I don't get an exception, because somehow the url get fixed and send a new request with the valid url:

the problem is with the difference between ?count=5&page=1 and ?&count=5&page=1

this causing the tab spinner to be stuck and never ends.

Q: what improvements can be done to the code in order to get a valid URL?

I'm trying to build a URL to fetch data from a REST service, a valid url should look like this

http://SITENAME/api/get_posts/?count=5&page=1&post_type=gallery

and I have arguments like count, page, post_type and more.. these are optional arguments and one or all could be null I tried the following code

var query = 'http://localhost/wptest/api/get_posts/?';
fetchData(countIn: int, pageIn: int, typeIn: string, query: string) {

    if (this.countIn)   //if count not null, add count parameter.
        query = `${query}&count=${this.countIn}`;
    if (this.pageIn)  
        query = `${query}&page=${this.pageIn}`;
    if (this.typeIn)  
        query = `${query}&post_type=${this.typeIn}`;

    return this.http.get(query).map(res => res.json());
}

this ugly code is returning an invalid URL, when I go to chrome debugger => network tab I find:

however I don't get an exception, because somehow the url get fixed and send a new request with the valid url:

the problem is with the difference between ?count=5&page=1 and ?&count=5&page=1

this causing the tab spinner to be stuck and never ends.

Q: what improvements can be done to the code in order to get a valid URL?

• javascript
• url
• typescript
• httprequest

Share Follow edited Feb 10, 2019 at 13:52 Cœur 38.8k2626 gold badges205205 silver badges277277 bronze badges asked Dec 17, 2015 at 15:26 Murhaf SousliMurhaf Sousli 13.3k2222 gold badges124124 silver badges191191 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Keeping the general structure of your current code, you could add a variable that gets set with the '&' after the first instance of it being used.

fetchData(countIn: int, pageIn: int, typeIn: string, query: string) {
    var prepend = '';
    if (this.countIn)  { 
        query = `${query}` + prepend + `count=${this.countIn}`;
        prepend = '&';
    }
    if (this.pageIn)  {
        query = `${query}` + prepend + `page=${this.pageIn}`;
        prepend = '&';
    }
    if (this.typeIn)  {
        query =  `${query}` + prepend + `post_type=${this.typeIn}`;
        prepend = '&';
    }

    return this.http.get(query).map(res => res.json());
}

There are other ways to achieve what you're trying to acplish, but this is one way to do it.

var params = [], // your params here
    self = this;
[["count", "countIn"], ["page", "pageIn"], ["post_type", "postIn"]]
  .forEach(function(param) { 
     if(self[param[1]]) params.push(param[0] + "=" + self[param[1]]); 
  });
var query = `${query}` + params.join("&");

try :

var query = 'http://localhost/wptest/api/get_posts/?';
var counter = 0;
fetchData(countIn: int, pageIn: int, typeIn: string, query: string) {

if (this.countIn && counter = 0){  //if count not null, add count parameter.
    query = `${query}count=${this.countIn}`;
counter++;
}
elseif(this.countIn){  //if count not null, add count parameter.
    query = `${query}&count=${this.countIn}`;
} 

if (this.pageIn && counter = 0){  //if count not null, add count parameter.
    query = `${query}count=${this.pageIn}`;
counter++;
}
elseif(this.pageIn){  //if count not null, add count parameter.
    query = `${query}&count=${this.pageIn}`;
} 

if (this.typeIn && counter = 0){  //if count not null, add count parameter.
    query = `${query}count=${this.typeIn}`;
counter++;
}
elseif(this.typeIn){  //if count not null, add count parameter.
    query = `${query}&count=${this.typeIn}`;
} 



return this.http.get(query).map(res => res.json());
}

    query = `${query}&post_type=${this.typeIn}`;

this is a workaround I believe.