• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

142
Views
Nuxt 3 api call with data from another api call

I am building a weather forecast app and to get data for a specific city i have a dynamic url (/forecast/[id]) with the city id from open-meteo. To get the actual lat and lon I want to make an api call to the open-meteo geocoding api to then use the retrieved lat and lon and timezone to make another request to the open-meteo forecast api. But unfortunately i was unable to make it work.

here is my current code:

<script setup>
const route = useRoute()
const id = route.params.id
const lat = ref(null)
const lon = ref(null)
const timezone = ref("")

const {data: locationdata} = await useAsyncData("geocode", () =>
  $fetch(`https://geocoding-api.open-meteo.com/v1/get?id=${id}`)
).then((res) => {
  lat.value = res.data.value.latitude
  lon.value = res.data.value.longitude
  timezone.value = res.data.value.timezone
})


const { data: weatherdata, pending } = await useAsyncData("weatherdata", () =>
  $fetch(`https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&hourly=temperature_2m,relativehumidity_2m,surface_pressure,precipitation,weathercode,windspeed_10m,winddirection_10m,windgusts_10m&current_weather=true&windspeed_unit=kn&timezone=${timezone}`)
).catch((e) => {
  console.log(e)
})
</script>
<template>
<pre><code>{{weatherdata}}</code></pre>
</template>
almost 3 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error