Over the years I’ve frequently found that tasks I expect to be tricky can be solved with a single function, whilst ostensibly simple ones end up becoming time-consuming, complicated, and downright frustrating.
Here’s one that went full byzantine.
For context, I’m using a Linux Mint laptop, writing my code in Microsoft’s Visual Studio Code and using it’s integrated Terminal for operations like Git (I pretty much always set up Git repositories for more than the very simplest of sandbox projects). I’m outputting the results of some operations to the console in Chromium. The point of this is to stage complexity: check the data is actually being chugged over in the way I expect, before I try to attach the output to any end-user visible HTML structures like a list or a table. But as we’ll see, so much for keeping it simple.
.map .filter .forEach), outputting the results to the page. My custom functions will be attached to pertinent buttons that will run and display the results.
This forces a digression from
.forEach() to AJAX. I end up at an actually quite unhelpful article on how to use
XMLHttpRequest() to achieve my end. Those of you who are ahead of my curve on this will have twigged that I need to solve another problem first: I need a local server environment to run the AJAX call.
From here I briefly had to step into the bigger picture of DevOps to wrap my simple app into an off-the-peg Docker LAMP stack. This is a directory template I built for just such an eventuality. Although this is technical overkill, the ability to run a local server environment and push the whole project somewhere public relatively quickly, is proving to be a useful secondary skill set. If I was working on my iMac I would have built my project under MAMP by habit, but Linux Mint doesn’t have such an app: we need to install and manage the separate parts manually. Docker allows us to build quite different environments (like a MongoDB, Express.js, Vue.js, and Node.js (MEVN) stack) in a much more adaptable utility.
So with this all set up, I can finally and successfully load my JSON data.
But not so fast! The console is telling me that the array I’m expecting
JSON.parse() to provide me with, is actually an object my
.forEach() chokes on (I used a temporary
for loop to test that I’m actually able to manipulate the data).
So this morning I’ve been recommended to look at VS Code’s built in debugger. Working with a debugger is also an obviously useful skill to have, but this proves to be several digressions into the wilds: VS Code’s documentation tutorial recommends I install both Node and Express to follow along.