Fetch based on if stetement

Question

I have some demo app that fetching data from chuck norris jokes api. I'm adding variable to the endpoint which represent the joke category -

fetchJoke: function() {
  fetch(
    `https://api.chucknorris.io/jokes/random?category=${this.selectedCat}`
  )
    .then(response => {
      return response.json();
    })
    .then(jsonOBj => {
      this.joke = jsonOBj.value;
    })
    .catch(error => {
      console.log(error);
    });
}

The selectedCat is a variable that get from the user the desired joke category, if the user don't choose a category they can load some random joke. In that case the endpoint is different -

https://api.chucknorris.io/jokes/random

The question is, how can I set the endpoint based on if statement, something like this:

if(selectedCat) {
fetch(someAddress)
} else {
fetch(anotherAddress)
}

You could use inline if statements, mentioned in this thread: https://stackoverflow.com/questions/10270351/how-to-write-an-inline-if-statement-in-javascript — whati001, Jan 24 '20 at 14:50

score 2 · Answer 1 · answered Jan 24 '20 at 14:45

let url = ''
let pageUrl = 'https://api.chucknorris.io/jokes/random'

if(selectedCat) {
  url = `{pageUrl}?category=${this.selectedCat}`
} else {
  url = pageUrl
}

fetchJoke(url)

To make it work you need also to add url parameter to fetchJoke func which will be passed to fetch func

Sohail Ashraf · Answer 2 · 2020-01-24T14:52:38.893

Instead of adding fetch in if condition, create the URL dynamically.


fetchJoke: function() {
  let url = `https://api.chucknorris.io/jokes/random`;

  if(this.selectedCat) {
    url = url + `?category=${this.selectedCat}`;
  } 

  fetch(url)
    .then(response => {
      return response.json();
    })
    .then(jsonOBj => {
      this.joke = jsonOBj.value;
    })
    .catch(error => {
      console.log(error);
    });
}

OR

fetchJoke: function() {
  fetch(`https://api.chucknorris.io/jokes/random${this.selectedCat ? '?category=' +this.selectedCat: ''}`)
    .then(response => {
      return response.json();
    })
    .then(jsonOBj => {
      this.joke = jsonOBj.value;
    })
    .catch(error => {
      console.log(error);
    });
}

Fetch based on if stetement

2 Answers2