HTML unwilling to communicate with node server to retrieve API information. Any tips?

Question:

Hi all, my fairly simple (mostly AI written) project is hitting a big hurdle. The HTML grabs AI information via a js node server in the same project to get around CORS issues, but the two seem completely unwilling to communicate, and I’ve tried pretty much everything at this point. Any suggestions?

The API call is correct, and I can, using a temporary CORS proxy, populate the HTML with the data.

Repl link/Link to where the bug appears:

https://replit.com/@JamesAllen20/ExtraneousAgonizingMicroscope#public/index.html

Screenshots, links, or other helpful context:

code snippet

What exactly is the error you are facing? There are a couple issues with your code that are unrelated to client-server communication:

You’re trying to load the index.js script but it doesn’t exist:

<script type="text/javascript" src="index.js"></script>

You’re also trying to bind to the toggleTimeFormat function, but it’s not defined in the global scope:

<input type="checkbox" id="timeFormat" onchange="toggleTimeFormat()">

Just move the function definitions outside of the DOMContentLoaded event listener

Also, this line throws an error:

const ukTimeFormat = new Intl.DateTimeFormat('en-GB', {hour12: !use24HourFormat, hour: 'numeric', minute: 'numeric', timeStyle: 'short'});

You can’t specify timeStyle while also specifying the hour and minute

2 Likes

index.js is in the top level folder, no?

Don’t worry about toggletimeformat, thats work in progress.

Thanks.

the index.js in the top level folder is your node server script. There’s no index.js in the public folder

Other guides I’ve followed attempting to run a server the same way suggested placing the js in the top level folder.

But I also just tried it with the js in the public folder with the HTML and there was no change.

Yes. The script should be in the top level folder. The point is that you’re also trying to load a client side script called index.js, which doesn’t exist. Just remove that line from the HTML.

Thanks, I have removed it, though sadly still no API data is shown. Perhaps there is something wrong with the API request, as I’m noticing API data isn’t being logged to console as per

    console.log('API Data:', data);
1 Like

I’m at the point where I’ve tried pretty much everything I can conceivably find as a layman, and had no improvements. No errors are being throw by the index.js, or the HTML. I’ve verified the API by using this page with a CORS workaround.

Again, any suggestions welcome at this point. Thanks

That’s weird. This is what I see when I make all of the fixes in my post above:

Note: I have to toggle the checkbox first because that’s the only way to trigger an updateTable(). If you want, add a call to updateTable after all of your function definitions so it automatically loads the data when you open the page.

On that page with the CORS workaround, you’re fetching the data in the DOMContentLoaded event listener, but in your main repl, you’re fetching the data in the updateTable function, which is only called when the checkbox is checked/unchecked.

I’m starting to think it might be an issue with my local network, oddly enough. Can you fork my project with your changes? Would be grateful, thanks.

Sure: https://wsmkitewindow.grimsteel.repl.co/

Changes:

  • I moved all of the functions and the one variable out of the DOMContentLoaded event listener (you don’t need to wait for the DOM to declare functions/variables)
  • I added a call to updateTable inside the DOMContentLoaded event listener
  • I removed timeStyle: 'short' from the ukTimeFormat thing
1 Like

Thanks, that does work, I will evaluate more closely along with the fixes you provided above to patch my knowledge. Thank you for taking the time.

2 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.