Can I pass dynamic values to ES6's Template Literals?

Question

getSelectedCityId() {
    let citiName
    citiId;
    axiosInstance
        .get("/api/cities")
        .then(response => {
            if (response.status === 200 && response.data) {
                citiName = this.state.city;
                citiId = this.state.city.city_id;
            }
        })
        .catch(error => {});

    let url = `/api/${citiName}/${citiId}/schools/`;
    axiosInstance
        .get(url)
        .then(response => {

        })
        .catch(error => {
            console.log(error);
        });
}

When I hit that API call,the url shows :

localhost:9000/api/undefined/undefined/schools/

I'm trying to pass the data I will get from the 1st API call as a parameter to the second API.My point is,why the template literal is throwing undefined ? Are we not allowed to pass dynamic data through template literals ?

You you can, but in this case it's not working because you're trying to set variables that are part of an asynchronous process. You should read through [this question and answers on how to return the response from an async call](https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call?rq=1). — Andy, Nov 27 '17 at 20:10
PS - you might enjoy an improved coding experience in this instance if [you used `async/wait`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function). [You'd have to include it in your build process, however](https://stackoverflow.com/questions/38357234/is-it-possible-to-use-async-await-in-react-js). — Andy, Nov 27 '17 at 20:17

score 3 · Answer 1 · answered Nov 27 '17 at 20:13

3

Since getting /api/cities data is async operation, you need to wait for the result. Just for proof of concept:

getSelectedCityId()
{
  let citiName
  citiId;
  axiosInstance
    .get("/api/cities")
    .then(response => {
      if (response.status === 200 && response.data) {
        citiName = this.state.city;
        citiId = this.state.city.city_id;
        return `/api/${citiName}/${citiId}/schools/`;
      }
      return null;
    })
    .then(url => {
      if(url) { // the data from previous then
        axiosInstance.get(url) //.then().catch()
      }
    });
}

answered Nov 27 '17 at 20:13

dhilt

18,707
8
70
85

This is a more concise answer than mine. I shall yield to ye! – Joshua Underwood Nov 27 '17 at 20:15
@JoshuaUnderwood Agree.However,I like decomposition.Breaking code into smaller functions becomes easier for reading and debugging.I went with your solution anyway! – Technologeek Nov 27 '17 at 20:22

score 3 · Accepted Answer · answered Nov 27 '17 at 20:14

getSelectedCityId() {
    let citiName
    citiId;
    axiosInstance
        .get("/api/cities")
        .then(response => {
            if (response.status === 200 && response.data) {
                citiName = this.state.city;
                citiId = this.state.city.city_id;
                this.getSelectedCityIdStepTwo(`/api/${citiName}/${citiId}/schools/`);
            }
        })
        .catch(error => {});
}

getSelectedCityIdStepTwo(url) {
    axiosInstance
        .get(url)
        .then(response => {

        })
        .catch(error => {
            console.log(error);
        });
}

This will ensure the second AXIOS call isn't made until the first one is completed and there is a valid URL to pass.

Can I pass dynamic values to ES6's Template Literals?

2 Answers2