CODEWITHSUNDEEP
reactjs
ARPIT PRASAD
ARPIT PRASAD

Reputation: 11

Not able to fetch get request from 5 day weather forecast API of OpenWeather website using axios in React

Hi I am a beginner in React and developing a very simple weather website which shows athe 5 day forecast of a particular city. Intially i have built a simple looking front end with no data. Now i intend to fill in the data using API provided by OpenWeather website Here is the link

I am using axios to fetch get request in react But when console logging the response my code is not able to get the response it is showing an error of 404 It is showing this error

xhr.js:177 GET http://localhost:3000/api.openweathermap.org/data/2.5/forecast?q=M%C3%BCnchen,DE&appid=b606f9db39d148829c9500a2651c63dd 404 (Not Found)


createError.js:16 Uncaught (in promise) Error: Request failed with status code 404

    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:62)

and here is my code

App.js

import React from 'react'

import Navbar from './Components/Navbar/Navbar'
import Cities from './Components/Cities/Cities'

const App = () => {
  return (
    <div>
     
      <Navbar/>
      <h1>City Name</h1>
      <Cities/>
    </div>
  )
}

export default App

Cities.js

import React from 'react'

import Day3 from './City/Day3'
import Day1 from './City/Day1'
import Day2 from './City/Day2'
import Day4 from './City/Day4'
import classes from './Cities.module.css'


const Cities = () => {

    return (
        <div className={classes.Cities}>
           
            <Day1/>
            <Day2/>
            <Day3/>
            <Day4/>
        </div>
    )
}

export default Cities

Day1.js

import React, { Component } from 'react'
import { WiDayCloudy } from "weather-icons-react"
import classes from './City.module.css'
import axios from 'axios'
class Day1 extends Component  {

    componentDidMount(){
        axios.get('api.openweathermap.org/data/2.5/forecast?q=München,DE&appid=b606f9db39d148829c9500a2651c63dd').then(
            response=>{
                console.log(response)
            }
        )
    }

    render(){
        return (
        <div className={classes.City}>
         <WiDayCloudy size={100} color='rgb(156, 231, 231)' />
           <h1>Day 1</h1>
           <h4>Maximum temperature</h4>
           <h4>Minimum Temperature</h4>
           <h4>Humidity</h4>
           <h4>Precipitation</h4>
        </div>
    )

    }
    
}

export default Day1

Day 2 Day 3 Day 4 is same as Day1

Please help

Upvotes: 0

Views: 283

Answers (1)

Rajib Basu
Rajib Basu

Reputation: 11

Your problem is here

"http://localhost:3000/api.openweathermap.org/data/2.5/forecast?q=M%C3%BCnchen,DE&appid=b606f9db39d148829c9500a2651c63dd"

It should be like:

"https://api.openweathermap.org/data/2.5/forecast?q=M%C3%BCnchen,DE&appid=b606f9db39d148829c9500a2651c63dd"

Configure your axios for this get request

Upvotes: 1

Related Questions