Not pulling JSON data, works on local, but not on online

PLEASE help us help you by writing a good post!

  • Website: Abbie Street
    I am having a build issue on my website. Everything shows up perfectly in localhost (on Visual Studio). I am fetching data from a JSON FILE, which is in a folder called public.

This is how it should be showing:

However, if you visit the website, the pink tags are not showing. I can reach the JSON url directly, but am not having any luck on getting it to show online.

@austinpacholek2014 This doesn’t appear to be an issue related to hosting on Netlify, just something that’s not quite right about your specific project.

It’s likely you would see the same thing by running your Build command (not your Develop command) locally, then viewing the output with npx serve.

From what I can see the issue doesn’t seem to be related to loading the json data, but is probably just whatever code you have that processes it and creates the tags.

There is a posts.json file loading at runtime, and it does contain those tags:

Checking the code that you have to load and process that json:

The line:

const currentFile = window.location.pathname.split('/').pop();

Will return:

'white-rock-lake-engagement-with-kristy-&-ben'

You then perform a find on the posts with:

const post = posts.find(post => post.file.endsWith(currentFile));

The key in the json file is:

"file": "posts/White-Rock-Lake-Engagement-with-Kristy-&-Ben.html",

As I’m sure you can now see, there are a few things wrong with this.

If you weren’t aware endsWith is case-sensitive:

This method lets you determine whether or not a string ends with another string.
This method is case-sensitive.

You’ll need to adjust your handling accordingly.

The reason you never saw an error in your log is because there is no error, the if ( post ) just never does anything when there isn’t a post found, which is what’s happening.

1 Like

Many thanks Nathan. Will adjust accordingly