Adding 5 day forecast to weather app?

Adding 5 day forecast to weather app?
0

#1

I have the current weather showing, but I also wanted to add the forecast API and I can’t even console.log the response.data to see the object I want to dig in to? Any help?


#2

Looking at it and it seems that the forecast API also has the current weather as well. But I can’t seem to find the other 4 days of the forecast in the array?


#3

When I tested out the endpoint you are using to obtain a forecast for my ip address, I get the following JSON response (seen below). It only seems to pull today’s current weather and today’s forecast. You will need to find another endpoint to get a 5 day forecast it seems. What endpoint does the API documentation say to use for a 5 day forecast?

{
  "location": {
    "name": "Seven Trees",
    "region": "California",
    "country": "United States of America",
    "lat": ??.??,
    "lon": -???.??,
    "tz_id": "America/Los_Angeles",
    "localtime_epoch": 1537119425,
    "localtime": "2018-09-16 10:37"
  },
  "current": {
    "last_updated_epoch": 1537119006,
    "last_updated": "2018-09-16 10:30",
    "temp_c": 18,
    "temp_f": 64.4,
    "is_day": 1,
    "condition": {
      "text": "Sunny",
      "icon": "//cdn.apixu.com/weather/64x64/day/113.png",
      "code": 1000
    },
    "wind_mph": 0,
    "wind_kph": 0,
    "wind_degree": 0,
    "wind_dir": "N",
    "pressure_mb": 1016,
    "pressure_in": 30.5,
    "precip_mm": 0,
    "precip_in": 0,
    "humidity": 60,
    "cloud": 0,
    "feelslike_c": 18,
    "feelslike_f": 64.4,
    "vis_km": 16,
    "vis_miles": 9
  },
  "forecast": {
    "forecastday": [
      {
        "date": "2018-09-16",
        "date_epoch": 1537056000,
        "day": {
          "maxtemp_c": 22.2,
          "maxtemp_f": 72,
          "mintemp_c": 12.2,
          "mintemp_f": 54,
          "avgtemp_c": 15.8,
          "avgtemp_f": 60.5,
          "maxwind_mph": 13,
          "maxwind_kph": 20.9,
          "totalprecip_mm": 0,
          "totalprecip_in": 0,
          "avgvis_km": 20,
          "avgvis_miles": 12,
          "avghumidity": 65,
          "condition": {
            "text": "Sunny",
            "icon": "//cdn.apixu.com/weather/64x64/day/113.png",
            "code": 1000
          },
          "uv": 7.5
        },
        "astro": {
          "sunrise": "06:50 AM",
          "sunset": "07:13 PM",
          "moonrise": "01:58 PM",
          "moonset": "No moonset"
        }
      }
    ]
  }
}

#4

I’m confused where I would call it. Haven’t gotten that far as I tried to console.log to actually get into the data. It seems the forecast API also has the current API, so maybe I can delete the current API altogether?


#5

Turns out the code still runs if I switch out the current weather API with the forecast API. When I try to dig into the object, though, (with response.data…), I only see one day as shown here…


#6

See my previous post. The forecast endpoint only seems to show today’s forecast and not any additional days in the future.

UPDATE: After reading through the documentation I found for the API, you can specify an additional querystring parameter (keys=number1to7) and get up to 6 additional days for the forecast. So yes, it is possible to get the current weather, today’s forecast, and 6 additional forecasts for 6 days in the future. Below is such an output:

{
  "location": {
    "name": "Seven Trees",
    "region": "California",
    "country": "United States of America",
    "lat": ??.??,
    "lon": ??.??,
    "tz_id": "America/Los_Angeles",
    "localtime_epoch": 1537132412,
    "localtime": "2018-09-16 14:13"
  },
  "current": {
    "last_updated_epoch": 1537131606,
    "last_updated": "2018-09-16 14:00",
    "temp_c": 23,
    "temp_f": 73.4,
    "is_day": 1,
    "condition": {
      "text": "Sunny",
      "icon": "//cdn.apixu.com/weather/64x64/day/113.png",
      "code": 1000
    },
    "wind_mph": 10.5,
    "wind_kph": 16.9,
    "wind_degree": 350,
    "wind_dir": "N",
    "pressure_mb": 1016,
    "pressure_in": 30.5,
    "precip_mm": 0,
    "precip_in": 0,
    "humidity": 36,
    "cloud": 0,
    "feelslike_c": 24.1,
    "feelslike_f": 75.4,
    "vis_km": 16,
    "vis_miles": 9
  },
  "forecast": {
    "forecastday": [
      {
        "date": "2018-09-16",
        "date_epoch": 1537056000,
        "day": {
          "maxtemp_c": 22.2,
          "maxtemp_f": 72,
          "mintemp_c": 12.2,
          "mintemp_f": 54,
          "avgtemp_c": 15.8,
          "avgtemp_f": 60.5,
          "maxwind_mph": 13,
          "maxwind_kph": 20.9,
          "totalprecip_mm": 0,
          "totalprecip_in": 0,
          "avgvis_km": 20,
          "avgvis_miles": 12,
          "avghumidity": 65,
          "condition": {
            "text": "Sunny",
            "icon": "//cdn.apixu.com/weather/64x64/day/113.png",
            "code": 1000
          },
          "uv": 7.5
        },
        "astro": {
          "sunrise": "06:50 AM",
          "sunset": "07:13 PM",
          "moonrise": "01:58 PM",
          "moonset": "No moonset"
        }
      },
      {
        "date": "2018-09-17",
        "date_epoch": 1537142400,
        "day": {
          "maxtemp_c": 22.2,
          "maxtemp_f": 72,
          "mintemp_c": 12.2,
          "mintemp_f": 54,
          "avgtemp_c": 15.8,
          "avgtemp_f": 60.5,
          "maxwind_mph": 11.9,
          "maxwind_kph": 19.1,
          "totalprecip_mm": 0,
          "totalprecip_in": 0,
          "avgvis_km": 20,
          "avgvis_miles": 12,
          "avghumidity": 64,
          "condition": {
            "text": "Sunny",
            "icon": "//cdn.apixu.com/weather/64x64/day/113.png",
            "code": 1000
          },
          "uv": 7.6
        },
        "astro": {
          "sunrise": "06:51 AM",
          "sunset": "07:12 PM",
          "moonrise": "02:51 PM",
          "moonset": "12:08 AM"
        }
      },
      {
        "date": "2018-09-18",
        "date_epoch": 1537228800,
        "day": {
          "maxtemp_c": 21.2,
          "maxtemp_f": 70.2,
          "mintemp_c": 11.2,
          "mintemp_f": 52.2,
          "avgtemp_c": 16.3,
          "avgtemp_f": 61.4,
          "maxwind_mph": 11,
          "maxwind_kph": 17.6,
          "totalprecip_mm": 0,
          "totalprecip_in": 0,
          "avgvis_km": 19.8,
          "avgvis_miles": 12,
          "avghumidity": 67,
          "condition": {
            "text": "Sunny",
            "icon": "//cdn.apixu.com/weather/64x64/day/113.png",
            "code": 1000
          },
          "uv": 7.1
        },
        "astro": {
          "sunrise": "06:52 AM",
          "sunset": "07:10 PM",
          "moonrise": "03:40 PM",
          "moonset": "12:54 AM"
        }
      },
      {
        "date": "2018-09-19",
        "date_epoch": 1537315200,
        "day": {
          "maxtemp_c": 25.2,
          "maxtemp_f": 77.4,
          "mintemp_c": 11.2,
          "mintemp_f": 52.2,
          "avgtemp_c": 18.1,
          "avgtemp_f": 64.5,
          "maxwind_mph": 11.9,
          "maxwind_kph": 19.1,
          "totalprecip_mm": 0,
          "totalprecip_in": 0,
          "avgvis_km": 20,
          "avgvis_miles": 12,
          "avghumidity": 58,
          "condition": {
            "text": "Sunny",
            "icon": "//cdn.apixu.com/weather/64x64/day/113.png",
            "code": 1000
          },
          "uv": 7.3
        },
        "astro": {
          "sunrise": "06:53 AM",
          "sunset": "07:09 PM",
          "moonrise": "04:23 PM",
          "moonset": "01:45 AM"
        }
      },
      {
        "date": "2018-09-20",
        "date_epoch": 1537401600,
        "day": {
          "maxtemp_c": 28.2,
          "maxtemp_f": 82.8,
          "mintemp_c": 12.2,
          "mintemp_f": 54,
          "avgtemp_c": 20.2,
          "avgtemp_f": 68.4,
          "maxwind_mph": 11,
          "maxwind_kph": 17.6,
          "totalprecip_mm": 0,
          "totalprecip_in": 0,
          "avgvis_km": 20,
          "avgvis_miles": 12,
          "avghumidity": 46,
          "condition": {
            "text": "Sunny",
            "icon": "//cdn.apixu.com/weather/64x64/day/113.png",
            "code": 1000
          },
          "uv": 39960
        },
        "astro": {
          "sunrise": "06:54 AM",
          "sunset": "07:07 PM",
          "moonrise": "05:04 PM",
          "moonset": "02:37 AM"
        }
      },
      {
        "date": "2018-09-21",
        "date_epoch": 1537488000,
        "day": {
          "maxtemp_c": 25.2,
          "maxtemp_f": 77.4,
          "mintemp_c": 12.2,
          "mintemp_f": 54,
          "avgtemp_c": 18.8,
          "avgtemp_f": 65.9,
          "maxwind_mph": 11.9,
          "maxwind_kph": 19.1,
          "totalprecip_mm": 0,
          "totalprecip_in": 0,
          "avgvis_km": 19.8,
          "avgvis_miles": 12,
          "avghumidity": 51,
          "condition": {
            "text": "Partly cloudy",
            "icon": "//cdn.apixu.com/weather/64x64/day/116.png",
            "code": 1003
          },
          "uv": 39960
        },
        "astro": {
          "sunrise": "06:54 AM",
          "sunset": "07:06 PM",
          "moonrise": "05:40 PM",
          "moonset": "03:32 AM"
        }
      },
      {
        "date": "2018-09-22",
        "date_epoch": 1537574400,
        "day": {
          "maxtemp_c": 25.2,
          "maxtemp_f": 77.4,
          "mintemp_c": 12.2,
          "mintemp_f": 54,
          "avgtemp_c": 18.8,
          "avgtemp_f": 65.9,
          "maxwind_mph": 11,
          "maxwind_kph": 17.6,
          "totalprecip_mm": 0,
          "totalprecip_in": 0,
          "avgvis_km": 20,
          "avgvis_miles": 12,
          "avghumidity": 54,
          "condition": {
            "text": "Partly cloudy",
            "icon": "//cdn.apixu.com/weather/64x64/day/116.png",
            "code": 1003
          },
          "uv": 39960
        },
        "astro": {
          "sunrise": "06:55 AM",
          "sunset": "07:04 PM",
          "moonrise": "06:13 PM",
          "moonset": "04:28 AM"
        }
      }
    ]
  }
}

#7

Just looking at this now, so how should I add the keys query string to the url? Before “q= lat + long” ? Will be reading the documentation to figure this out.


#8

Thank you very much!!!