The future seemed bright, and it just couldn't come fast enough. Bill had finally left his boring job at a cornflake packing plant, and his software engineering course was starting in two days.
It was time for Bill to build his new desk from Ikea.
What could go wrong?
Bill ripped open the tough cardboard box (it took a solid four minutes, but scissors are for the faint-hearted) and pulled out all of the neatly flat-packed wooden panels. The thick manual worked beautifully as a coaster for his coffee mug.
He identified the side panels before you could say "manual!", and attached them to the table-top without a hitch. Onto the drawers and the cabinet. It was all going well. Until...
Uh oh. The screw holes don't match up.
And what is this thin long bar for?
Open user-manual.
We've all been there. Type, type, type. What could go wrong? Finally, after writing a bible of code, you refresh the browser, and...
[object][object][object]
Arghhhh! When did that happen?!
In the render function? In the fetch?
Is there something wrong with the API I'm using?!
Time for coffee.
You see, herein lies the wisdom of logging. Don't be a blind man (or an overconfident man, or a lazy man) at the screen, wondering what's behind each variable and each variable with a key and each variable that's been iterated through and whatnot.
Don't be like Billy.
Console.log.
Often, and everywhere.
As an SE student at Flatiron School, I was tasked with creating a simple app with a few event listeners, some iteration, and data from an API. By now, after many, many practice labs, I knew one thing: checking my work at every step does not make it take longer.
First, I fetched some data from a jokes API, making sure I logged the data I was given to the console:
document.addEventListener("DOMContentLoaded", function() {
fetch("https://official-joke-api.appspot.com/jokes/programming/ten", {
method: "GET",
headers: {
"application" : "application/json"
}
})
.then(res => res.json())
// I made sure to log my data:
.then(data => console.log(data))
})
The console reveals...
An error.
After checking some documentation on fetch, I see that I made a simple mistake in the header object. Here is my corrected code:
document.addEventListener("DOMContentLoaded", function() {
fetch("https://official-joke-api.appspot.com/jokes/programming/ten", {
method: "GET",
headers: {
// The corrected code:
"Content-Type" : "application/json"
}
})
.then(res => res.json())
.then(obj => console.log(obj))
})
And now, here is my console:
Nice! An array of objects, with four key-value pairs each.
Now let's see if I can iterate through the array and access each object individually:
document.addEventListener("DOMContentLoaded", function() {
fetch("https://official-joke-api.appspot.com/jokes/programming/ten", {
method: "GET",
headers: {
"Content-Type" : "application/json"
}
})
.then(res => res.json())
// Iterating through the array and logging each obj to the console:
.then(function (data) {
data.forEach (obj=> console.log(obj))
})
})
What is the value of "obj"?
Each joke object! Great.
For my joke application, I will only need the setup and punchline for each joke. Let's see if I can access them via their keys.
Here is my code:
document.addEventListener("DOMContentLoaded", function() {
fetch("https://official-joke-api.appspot.com/jokes/programming/ten", {
method: "GET",
headers: {
"Content-Type" : "application/json"
}
})
.then(res => res.json())
.then(function (array) {
array.forEach (function (obj) {
// Logging the two values I'll be using:
console.log(obj.setup);
console.log(obj.punchline);
})
})
})
Here is what I logged to the console:
Now that I know what I am working with, I can confidently render my joke setups and punchlines to the page!
Take a moment to imagine what would have happened if I hadn't logged the data at step one. I would have had no idea where I went wrong, and would have had to debug all that code!
I probably would have just gone for a coffee break, instead.
Bill never did reassemble his desk. He had no patience to figure out at what point (or points) he had gone wrong, and had already drilled in some new holes that shouldn't be there. The drawers don't slide easily and the cabinet door doesn't open, but with the user manual supporting one leg, it's all good.
It was a humbling experience, but Bill had learned his lesson.
And now he's ready to write a technical blog post about it, to educate the world:
Erm, that is:
