How to properly pass a returned variable value to fetch api within async/await function

Question

I am using vue 3 and within my component I have a few functions which make api calls to a weather api and a location api. I currently am trying to get location data back based on a zip code. I have a separate method which returns a single value (zipcode). I pass that value into the api call as a parameter but each time the request fails with a 400 code because the value for postal_code shows up as empty. If I console.log() the returned zip code just before the fetch() call the value properly shows in my console. Is the value of the zip code being lost somehwere?

Code:

    async function getWeatherBasedOnCoordinate () {
      let response = {};
      console.log(await getZip()) //properly outputs zip code here

      response = await fetch(
          `${ baseWeatherApiUrl }?key=${ weatherApiKey }&postal_code=${await getZip()}&units=I`
      );

      return (await response.json());
    }

    async function getZip () {
      let allDataReturned = await convertCoordsToLocation();
      let featureData = allDataReturned.features;
      let specificLocation = '';

      featureData.forEach((locData, index) => {
        if (index === 0) {
          specificLocation = locData.context[0].text;
        }
      });

      return specificLocation;
    }

The url shown in the Network tab

https://api.weatherbit.io/v2.0/current?key={my-private-api-key}&postal_code=&units=I

As you can see postal_code is empty.

EDIT: More Information

In the getZip() method the allDataReturned looks like this as an example:

{
    "type": "FeatureCollection",
    "query": [
        "825",
        "s",
        "milwaukee",
        "ave",
        "deerfield",
        "il",
        "60015"
    ],
    "features": [{
            "id": "address.4356035406756260",
            "type": "Feature",
            "place_type": [
                "address"
            ],
            "relevance": 1,
            "properties": {},
            "text": "Milwaukee Ave",
            "place_name": "825 Milwaukee Ave, Deerfield, Illinois 60015, United States",
            "matching_text": "South Milwaukee Avenue",
            "matching_place_name": "825 South Milwaukee Avenue, Deerfield, Illinois 60015, United States",
            "center": [
                -87.921434,
                42.166602
            ],
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -87.921434,
                    42.166602
                ],
                "interpolated": true,
                "omitted": true
            },
            "address": "825",
            "context": [{
                    "id": "neighborhood.287187",
                    "text": "60015" //Pulling from here!
                },
                {
                    "id": "place.5958304312090910",
                    "wikidata": "Q287895",
                    "text": "Deerfield"
                },
                {
                    "id": "region.3290978600358810",
                    "short_code": "US-IL",
                    "wikidata": "Q1204",
                    "text": "Illinois"
                },
                {
                    "id": "country.9053006287256050",
                    "short_code": "us",
                    "wikidata": "Q30",
                    "text": "United States"
                }
            ]
        },
        {
            "id": "address.7464624790403620",
            "type": "Feature",
            "place_type": [
                "address"
            ],
            "relevance": 0.5,
            "properties": {},
            "text": "Milwaukee Ave",
            "place_name": "825 Milwaukee Ave, Wheeling, Illinois 60090, United States",
            "matching_text": "South Milwaukee Avenue",
            "matching_place_name": "825 South Milwaukee Avenue, Wheeling, Illinois 60090, United States",
            "center": [
                -87.910299,
                42.144504
            ],
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -87.910299,
                    42.144504
                ],
                "interpolated": true
            },
            "address": "825",
            "context": [{
                    "id": "neighborhood.287187",
                    "text": "Lake Cook Road"
                },
                {
                    "id": "postcode.9418633295906190",
                    "text": "60090"
                },
                {
                    "id": "place.9902190947082220",
                    "wikidata": "Q935043",
                    "text": "Wheeling"
                },
                {
                    "id": "region.3290978600358810",
                    "short_code": "US-IL",
                    "wikidata": "Q1204",
                    "text": "Illinois"
                },
                {
                    "id": "country.9053006287256050",
                    "short_code": "us",
                    "wikidata": "Q30",
                    "text": "United States"
                }
            ]
        },
        {
            "id": "address.6472754353404224",
            "type": "Feature",
            "place_type": [
                "address"
            ],
            "relevance": 0.5,
            "properties": {},
            "text": "Milwaukee Avenue",
            "place_name": "825 Milwaukee Avenue, Glenview, Illinois 60025, United States",
            "matching_text": "South Milwaukee Avenue",
            "matching_place_name": "825 South Milwaukee Avenue, Glenview, Illinois 60025, United States",
            "center": [
                -87.852677,
                42.071152
            ],
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -87.852677,
                    42.071152
                ]
            },
            "address": "825",
            "context": [{
                    "id": "neighborhood.275266",
                    "text": "Northfield Woods"
                },
                {
                    "id": "postcode.3787740186211610",
                    "text": "60025"
                },
                {
                    "id": "place.10211845459386970",
                    "wikidata": null,
                    "text": "Glenview"
                },
                {
                    "id": "region.3290978600358810",
                    "short_code": "US-IL",
                    "wikidata": "Q1204",
                    "text": "Illinois"
                },
                {
                    "id": "country.9053006287256050",
                    "short_code": "us",
                    "wikidata": "Q30",
                    "text": "United States"
                }
            ]
        },
        {
            "id": "address.1225436500189372",
            "type": "Feature",
            "place_type": [
                "address"
            ],
            "relevance": 0.5,
            "properties": {},
            "text": "Milwaukee Ave",
            "place_name": "825 Milwaukee Ave, Buffalo Grove, Illinois 60089, United States",
            "matching_text": "South Milwaukee Avenue",
            "matching_place_name": "825 South Milwaukee Avenue, Buffalo Grove, Illinois 60089, United States",
            "center": [
                -87.917484,
                42.158084
            ],
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -87.917484,
                    42.158084
                ],
                "interpolated": true
            },
            "address": "825",
            "context": [{
                    "id": "neighborhood.287187",
                    "text": "Lake Cook Road"
                },
                {
                    "id": "postcode.11727721238210580",
                    "text": "60089"
                },
                {
                    "id": "place.8589721255665070",
                    "wikidata": "Q967086",
                    "text": "Buffalo Grove"
                },
                {
                    "id": "region.3290978600358810",
                    "short_code": "US-IL",
                    "wikidata": "Q1204",
                    "text": "Illinois"
                },
                {
                    "id": "country.9053006287256050",
                    "short_code": "us",
                    "wikidata": "Q30",
                    "text": "United States"
                }
            ]
        },
        {
            "id": "address.240107872738130",
            "type": "Feature",
            "place_type": [
                "address"
            ],
            "relevance": 0.5,
            "properties": {},
            "text": "Milwaukee Avenue",
            "place_name": "825 Milwaukee Avenue, Wheeling, Illinois 60090, United States",
            "matching_text": "South Milwaukee Avenue",
            "matching_place_name": "825 South Milwaukee Avenue, Wheeling, Illinois 60090, United States",
            "center": [
                -87.898319,
                42.126289
            ],
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -87.898319,
                    42.126289
                ],
                "interpolated": true,
                "omitted": true
            },
            "address": "825",
            "context": [{
                    "id": "neighborhood.287189",
                    "text": "Milwaukee Avenue"
                },
                {
                    "id": "postcode.9418633295906190",
                    "text": "60090"
                },
                {
                    "id": "place.9902190947082220",
                    "wikidata": "Q935043",
                    "text": "Wheeling"
                },
                {
                    "id": "region.3290978600358810",
                    "short_code": "US-IL",
                    "wikidata": "Q1204",
                    "text": "Illinois"
                },
                {
                    "id": "country.9053006287256050",
                    "short_code": "us",
                    "wikidata": "Q30",
                    "text": "United States"
                }
            ]
        }
    ],
    "attribution": "NOTICE: © 2018 Mapbox and its suppliers. All rights reserved. Use of this data is subject to the Mapbox Terms of Service (https://www.mapbox.com/about/maps/). This response and the information it contains may not be retained. POI(s) provided by Foursquare."
}

So from there I get the array of features from within allDataReturned and then I loop through those features to only search for a zipcode since that's all I need.

EDIT# 2 await convertCoordsToLocation()

console.log(await convertCoordsToLocation()) =

{
    "type": "FeatureCollection",
    "query": [
        -73.935242,
        40.73061
    ],
    "features": [
        {
            "id": "address.133608115457788",
            "type": "Feature",
            "place_type": [
                "address"
            ],
            "relevance": 1,
            "properties": {
                "accuracy": "parcel"
            },
            "text": "Railroad Avenue",
            "place_name": "3840 Railroad Avenue, Queens, New York 11101, United States",
            "center": [
                -73.935313,
                40.730278
            ],
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -73.935313,
                    40.730278
                ]
            },
            "address": "3840",
            "context": [
                {
                    "id": "neighborhood.2104431",
                    "text": "Blissville"
                },
                {
                    "id": "postcode.7124328230107530",
                    "text": "11101"
                },
                {
                    "id": "locality.6306827455006740",
                    "wikidata": "Q18424",
                    "text": "Queens"
                },
                {
                    "id": "place.2618194975964500",
                    "wikidata": "Q60",
                    "text": "New York"
                },
                {
                    "id": "district.6262643634006740",
                    "wikidata": "Q18424",
                    "text": "Queens"
                },
                {
                    "id": "region.17349986251855570",
                    "wikidata": "Q1384",
                    "short_code": "US-NY",
                    "text": "New York"
                },
                {
                    "id": "country.19678805456372290",
                    "wikidata": "Q30",
                    "short_code": "us",
                    "text": "United States"
                }
            ]
        },
        {
            "id": "neighborhood.2104431",
            "type": "Feature",
            "place_type": [
                "neighborhood"
            ],
            "relevance": 1,
            "properties": {},
            "text": "Blissville",
            "place_name": "Blissville, New York, New York 11101, United States",
            "bbox": [
                -73.946558,
                40.728349,
                -73.931167,
                40.739547
            ],
            "center": [
                -73.9378,
                40.7347
            ],
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -73.9378,
                    40.7347
                ]
            },
            "context": [
                {
                    "id": "postcode.7124328230107530",
                    "text": "11101"
                },
                {
                    "id": "locality.6306827455006740",
                    "wikidata": "Q18424",
                    "text": "Queens"
                },
                {
                    "id": "place.2618194975964500",
                    "wikidata": "Q60",
                    "text": "New York"
                },
                {
                    "id": "district.6262643634006740",
                    "wikidata": "Q18424",
                    "text": "Queens"
                },
                {
                    "id": "region.17349986251855570",
                    "wikidata": "Q1384",
                    "short_code": "US-NY",
                    "text": "New York"
                },
                {
                    "id": "country.19678805456372290",
                    "wikidata": "Q30",
                    "short_code": "us",
                    "text": "United States"
                }
            ]
        },
        {
            "id": "postcode.7124328230107530",
            "type": "Feature",
            "place_type": [
                "postcode"
            ],
            "relevance": 1,
            "properties": {},
            "text": "11101",
            "place_name": "Queens, New York 11101, United States",
            "bbox": [
                -73.9626849862865,
                40.7276860344023,
                -73.9098450608377,
                40.7628809684208
            ],
            "center": [
                -73.94,
                40.75
            ],
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -73.94,
                    40.75
                ]
            },
            "context": [
                {
                    "id": "locality.6306827455006740",
                    "wikidata": "Q18424",
                    "text": "Queens"
                },
                {
                    "id": "place.2618194975964500",
                    "wikidata": "Q60",
                    "text": "New York"
                },
                {
                    "id": "district.6262643634006740",
                    "wikidata": "Q18424",
                    "text": "Queens"
                },
                {
                    "id": "region.17349986251855570",
                    "wikidata": "Q1384",
                    "short_code": "US-NY",
                    "text": "New York"
                },
                {
                    "id": "country.19678805456372290",
                    "wikidata": "Q30",
                    "short_code": "us",
                    "text": "United States"
                }
            ]
        },
        {
            "id": "locality.6306827455006740",
            "type": "Feature",
            "place_type": [
                "locality"
            ],
            "relevance": 1,
            "properties": {
                "wikidata": "Q18424"
            },
            "text": "Queens",
            "place_name": "Queens, New York, United States",
            "bbox": [
                -73.962795,
                40.5428957646908,
                -73.700272,
                40.80548
            ],
            "center": [
                -73.7976,
                40.7498
            ],
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -73.7976,
                    40.7498
                ]
            },
            "context": [
                {
                    "id": "place.2618194975964500",
                    "wikidata": "Q60",
                    "text": "New York"
                },
                {
                    "id": "district.6262643634006740",
                    "wikidata": "Q18424",
                    "text": "Queens"
                },
                {
                    "id": "region.17349986251855570",
                    "wikidata": "Q1384",
                    "short_code": "US-NY",
                    "text": "New York"
                },
                {
                    "id": "country.19678805456372290",
                    "wikidata": "Q30",
                    "short_code": "us",
                    "text": "United States"
                }
            ]
        },
        {
            "id": "place.2618194975964500",
            "type": "Feature",
            "place_type": [
                "place"
            ],
            "relevance": 1,
            "properties": {
                "wikidata": "Q60"
            },
            "text": "New York",
            "place_name": "New York, New York, United States",
            "bbox": [
                -74.25909,
                40.477399,
                -73.700272,
                40.917577
            ],
            "center": [
                -73.9866,
                40.7306
            ],
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -73.9866,
                    40.7306
                ]
            },
            "context": [
                {
                    "id": "district.6262643634006740",
                    "wikidata": "Q18424",
                    "text": "Queens"
                },
                {
                    "id": "region.17349986251855570",
                    "wikidata": "Q1384",
                    "short_code": "US-NY",
                    "text": "New York"
                },
                {
                    "id": "country.19678805456372290",
                    "wikidata": "Q30",
                    "short_code": "us",
                    "text": "United States"
                }
            ]
        },
        {
            "id": "region.17349986251855570",
            "type": "Feature",
            "place_type": [
                "region"
            ],
            "relevance": 1,
            "properties": {
                "wikidata": "Q1384",
                "short_code": "US-NY"
            },
            "text": "New York",
            "place_name": "New York, United States",
            "bbox": [
                -79.8578350999901,
                40.4771391062446,
                -71.7564918092633,
                45.0239286969073
            ],
            "center": [
                -75.4652471468304,
                42.751210955
            ],
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -75.4652471468304,
                    42.751210955
                ]
            },
            "context": [
                {
                    "id": "country.19678805456372290",
                    "wikidata": "Q30",
                    "short_code": "us",
                    "text": "United States"
                }
            ]
        },
        {
            "id": "country.19678805456372290",
            "type": "Feature",
            "place_type": [
                "country"
            ],
            "relevance": 1,
            "properties": {
                "wikidata": "Q30",
                "short_code": "us"
            },
            "text": "United States",
            "place_name": "United States",
            "bbox": [
                -179.9,
                18.8163608007951,
                -66.8847646185949,
                71.4202919997506
            ],
            "center": [
                -97.9222112121185,
                39.3812661305678
            ],
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -97.9222112121185,
                    39.3812661305678
                ]
            }
        }
    ],
    "attribution": "NOTICE: © 2021 Mapbox and its suppliers. All rights reserved. Use of this data is subject to the Mapbox Terms of Service (https://www.mapbox.com/about/maps/). This response and the information it contains may not be retained. POI(s) provided by Foursquare."
}

Well, clearly your getZip function is broken in some way. What have you done to try and debug this? What does featureData contain? — Evert
– Evert, Commented Oct 12, 2021 at 15:14
What @PA-GW said - what's inside convertCoordsToLocation now? — Ermiya Eskandary
– Ermiya Eskandary, Commented Oct 12, 2021 at 16:59
Only way it would be null is if index was not equal to 0 - is getZip idempotent? As in, can you call it multiple times with the same input and it returns the same output? Do 2 console.logs - does it a) work and b) return the same output? — Ermiya Eskandary
– Ermiya Eskandary, Commented Oct 12, 2021 at 18:04

tao · Accepted Answer · 2021-10-12 18:34:31Z

1

One thing to note is that doing

console.log(await someFn());
const stuff = fetch(`some-url?zip=${await someFn()}&foo=bar`);

actually makes two distinct calls to await someFn(). From what I've tested and from what I know, await should work inside template literals.

You are claiming the first call is returning the expected result and the second does not. Could you provide a minimal reproducible example where this behavior can be tested and debugged?

Anyway, regardless of why the second call returns a different result, since you're saying the console logs the expected result, this should work:

async function getWeatherBasedOnCoordinate() {

  const zip = await getZip();
  // console.log(zip);

  const response = await fetch(
      `${ baseWeatherApiUrl }?key=${ weatherApiKey }&postal_code=${zip}&units=I`
  );
  // console.log(response.json());

  return response.json();
}

edited Oct 12, 2021 at 18:34

answered Oct 12, 2021 at 18:04

tao

91.1k18 gold badges136 silver badges174 bronze badges

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

Collectives™ on Stack Overflow

How to properly pass a returned variable value to fetch api within async/await function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related