When i try to fetch data from api(/) i get this error. Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

this is my code.

import React from 'react';

import './App.css';

import Weather from "./ponents/Weather"
import 'bootstrap/dist/css/bootstrap.min.css'
import 'weather-icons/css/weather-icons.css'

const Api_Key="079b76b390ad70c628a14a9a141e5992";

class App extends React.Component {

    constructor(){
        super();
        this.state={};
        this.getWeather();
    }

    getWeather= async ()=>{
        const api_call = await fetch(
            `api.openweathermap/data/2.5/weather?q=London,uk&appid=${Api_Key}`,
        );

        const data = await api_call.json();

        console.log(data);
    }

    render()
    {
        return (
            <div className="App">
                <Weather/>
            </div>
        )
    }

}
export default App;

thanks!

When i try to fetch data from api(https://openweathermap/) i get this error. Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

this is my code.

import React from 'react';

import './App.css';

import Weather from "./ponents/Weather"
import 'bootstrap/dist/css/bootstrap.min.css'
import 'weather-icons/css/weather-icons.css'

const Api_Key="079b76b390ad70c628a14a9a141e5992";

class App extends React.Component {

    constructor(){
        super();
        this.state={};
        this.getWeather();
    }

    getWeather= async ()=>{
        const api_call = await fetch(
            `api.openweathermap/data/2.5/weather?q=London,uk&appid=${Api_Key}`,
        );

        const data = await api_call.json();

        console.log(data);
    }

    render()
    {
        return (
            <div className="App">
                <Weather/>
            </div>
        )
    }

}
export default App;

thanks!

• javascript
• reactjs

• 1 you are expecting json data but the api is returning some html. try await api_call.text() to see the response and inspect why it isn't returning json – Vaibhav Vishal Commented Oct 14, 2019 at 12:32
• const data = await api_call.json(); This line is throwing the error. Remove .json() and then console.log(data) and see the HTML you're getting, pretty sure you'll find some useful info there. – Mohammed Mortaga Commented Oct 14, 2019 at 12:35
• Have you checked in developer console the petition and the request you are getting? Seems you are not getting the correct json – ProblemsEverywhere Commented Oct 14, 2019 at 12:35
• You can check the Network tab in browser developer tools to see what you are getting in response. – Prerak Sola Commented Oct 14, 2019 at 12:35
• 1 const api_call = await fetch(`//api.openweathermap/data/2.5/weather?q=London,uk&appid=${Api_Key}`) try this. see the // in front of the url. Use either http://, https:// or just // if unsure. – Vaibhav Vishal Commented Oct 14, 2019 at 12:38

2 Answers 2

You are getting a JSON back. I just tried to call

async function get() {
  try {
    const res = await fetch(`http://api.openweathermap/data/2.5/weather?q=London,uk&appid=079b76b390ad70c628a14a9a141e5992`);
    const json = await res.json();
    console.log('json', json)
  } catch (err) {
    console.error('err', err);
  }

}

It responds with:

{
"coord": {
"lon": -0.13,
"lat": 51.51
},
"weather": [
  {
"id": 520,
"main": "Rain",
"description": "light intensity shower rain",
"icon": "09d"
}
],
"base": "stations",
"main": {
"temp": 285.3,
"pressure": 1004,
"humidity": 93,
"temp_min": 284.15,
"temp_max": 286.48
},
"visibility": 10000,
"wind": {
"speed": 6.2,
"deg": 90
},
"clouds": {
"all": 90
},
"dt": 1571056651,
"sys": {
"type": 1,
"id": 1502,
"message": 0.0096,
"country": "GB",
"sunrise": 1571034113,
"sunset": 1571073060
},
"timezone": 3600,
"id": 2643743,
"name": "London",
"cod": 200
}

You might have missed the http:// part?

i had the same issue in my Ionic app, i just added the './' before the url and it works for me : fetch('assets/files/data.json') => fetch('./assets/files/data.json')