Last week, I got all the way to the end before the damn Google Sheets API stopped working on me. This week, I figured that we would create a JSON file out of the spreadsheet, host it somewhere, and then just use that. I started by creating a CSV file from the Google Sheets document, running it through a CSV to JSON converter, creating a new github repo for it, and then wiring it up for hosting via Render. That resulted in my new api.wisparks.jws.app “service”. Now that we have replaced Google Sheets, let’s try to get the app finally working.
Of course, since the JSON file is hosted on a different subdomain, that means that we need to add a CORS rule for * to cover codepen, the test instance, and the production instance.
From within the Render dashboard, if you navigate to the “HTTP Response Headers” section, put the location that the rule is for under “Request Path”, put “Access-Control-Allow-Origin” under “Header Name”, and put the domain that is making the http request under “Header Value” that should create the appropriate CORS rule.
We can now remove the watch of the parks variable and all of the rejiggeredParks stuff, since we no longer need to rejigger the parks data.
See the Pen
Wisc Parks (Part 4): Listing state parks by distance from the user by Joe Steinbring (@steinbring)
on CodePen.
As you can see above, that worked great! So, now we can fix the testing instance.
So, now that it is finally working, the next steps is going to be individual profile pages for each park.
Have a question, comment, etc? Feel free to drop a comment, below.