Redux app error: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

I have such error:

index.js:8 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

index.js(action):

import { days } from "../components/app";
export function fetchData (day) {
    return async (dispatch) => {dispatch({ type: 'LOAD_DATA_START', day });
    const response = await fetch(`....`); 
    const data = (await response.json()).body; 
    dispatch({ type: 'LOAD_DATA_END', data });
    dispatch({ type: 'SET_SHIFT', data }); 
    } 
}

How to fix this error?

3 answers

  • answered 2019-11-08 13:42 Jose Barranco

    This error basically means that what you are trying to JSON parse is not an object. Maybe the response is wrapped in an array, like

    [{
       "name": "json"
    }]
    

    If so, you will get that error.

  • answered 2019-11-08 13:45 Shilly

    Since the JSON file behind that hyperlink is valid, I suspect that you have a network error and are receiving a standard HTML error page instead, which starts with <html>. That has been the cause of getting the SyntaxError: Unexpected token < in JSON at position 0 error in 99% of the cases I have debugged.

    So double check in the console if you are actually receiving this file with the correct type as the response.

    EDIT:

    You have two issues:

    1) the API expects you to fetch the JSON file using HTTPS. So just add that in front of your url in the actions:

    import { days } from "../components/app";
    export function fetchData(day) {
      return async dispatch => {
        dispatch({ type: "LOAD_DATA_START", day });
        const response = await fetch(`https://api.iev.aero/api/flights/${day}`);
        const data = (await response.json()).body;
        dispatch({ type: "LOAD_DATA_END", data });
        dispatch({ type: "SET_SHIFT", data });
      };
    }
    

    2) Your {day} parameter you need for the URL is not being passed correctly. So there's an issue with how you pass the props or state or something between react and redux. Unfortunately I cannot say what the exact solution for that is, since I don't use react+redux together. But when I replace {day} with one of the day strings you provide export const days = ["23-08-2019", "24-08-2019", "25-08-2019"];, then the API returns the correct JSON file.

    So fix the HTTPS issue and then try fixing the {day} issue. Then the JSON should come back correctly. You'll still have errors concerning filtering, but that has nothing to do with the problem of the json file and can be solved separately.

  • answered 2019-11-08 13:53 Jose Barranco

    Alright, I edited your Code Sandbox file Actions > index.js to this:

    import { days } from "../components/app";
    export function fetchData(day) {
      return async dispatch => {
        dispatch({ type: "LOAD_DATA_START", day });
        const response = await fetch(`api.iev.aero/api/flights/${day}`);
        const data = (await response.text()).body;
        dispatch({ type: "LOAD_DATA_END", data });
        dispatch({ type: "SET_SHIFT", data });
      };
    }