0

Hi so I keep on getting this uncaught (in promise) error when I try to load a JSON file using JavaScript fetch API and I have no Idea why can anyone help me please? Here is my code:

next_arrow();

function next_arrow(){
    const next_arrow = document.querySelector('.next');

    next_arrow.addEventListener('click', () => {
        fetch('topic.json')
        .then(
                (res) => res.json()
        )
        .then(
                (data) => console.log(data)
        )
    })

};

Here is the content of the JSON file I'm trying to fetch:

[{"Topic": "Phone or Web"}, {"Topic": "Time or Money"}, {"Topic": "Power or Wisdom"}, {"Topic": "Luxure or Camp!"}]
Rodany Antoine
  • 9
  • 1
  • 4
  • 1
    From the error, the JSON you’ve given us is not what is being returned by the fetch. Can you double check? – evolutionxbox Sep 07 '20 at 00:29
  • 2
    _"Here is the content of the JSON file I'm trying to fetch"_ Is that the content you are _receiving_, or just what you are trying to get? Normally that error comes when your resource returns some HTML (perhaps a default page or a 404/500 page) instead of a JSON resource. – Alexander Nied Sep 07 '20 at 00:29
  • 1
    Use your browser's _Network_ console to see the response status and investigate the content returned. You probably have the an incorrect path to your JSON file and you're getting a 404 page response – Phil Sep 07 '20 at 00:37
  • This is the JSON content of the topic.json file that I'm trying to pull data from or read. Using Fetch API – Rodany Antoine Sep 07 '20 at 00:40
  • Add this to validate if res is not empty. (res) => res ? res.json() : []; – Kishor Patil Sep 07 '20 at 00:40
  • @RodanyAntoine the error says otherwise. – evolutionxbox Sep 07 '20 at 00:42
  • @Kishor Patil Well I'm really confused here. What you are telling me to do is not working it is giving me syntax errors???? – Rodany Antoine Sep 07 '20 at 00:46
  • 1
    @KishorPatil There is no case in fetch api where response object will be *"empty"* – charlietfl Sep 07 '20 at 00:47
  • How about adding .catch(error => console.log(error)) to see the error? – TDAK Sep 07 '20 at 01:08

0 Answers0