SideStories XV: Record Collection Challenge
By: Hugh Burgess
Tags: Coding, Challenge, Freecodecamp, JavaScript, Json

Hello all, hope you are all well! We’re going to take a look at a large test which I had to carry out this morning, we’re putting a lot of what we’ve learnt thus far into this test and I’ll walk us through the steps. Cheers as always to FreeCodeCamp for the lessons.

Today we’ll look at a JSON object, JSON is short for JavaScript Object Notation, which is a “related data interchange format used to store data” (FreeCodeCamp).

—

Updating a Record Collection

We’re going to do a little detective work and figure out how to update the following code with a nifty little function that we’ll call updateRecords. Let’s take a look at the setup:

-FreeCodeCamp

Here we have a JSON object called collection, with several keys seen in green, (registered as id later on), and properties (or prop as we’ll see in the next half) nested inside the keys which contain value metadata, seen in red here. Note that some of the properties are incomplete.

In this example we can see there is 1 object, 4 keys, and between 1-3 properties, two have a nested array inside with value metadata (line 5 and 10), and the third has an empty array nested inside (line 14). (Ignore the highlighted “albumTitle” on line 17, my mouse was hovering over this at the time).

-FreeCodeCamp

Next, on line 22 we create a function which is called updateRecords and we’re going to pass the object through it under certain conditions which we can see here, set out as if/else statements (line 23–35). It also looks like Bracket Notation is used to take us to destination x in the object on lines 24,27,30,33.

Line 23–24: Here we are saying “if prop is strictly not equal to “tracks” and value is strictly not equal to an empty string, then update or set that album’s prop to value”. Note the strict inequality operator (!==) and the Logical And Operator (&&). Remember that an empty string is defined as “ ”.

Line 26–27: Here the code says “Also, if prop is strictly equal to “tracks” but the album contains no prop named “tracks”, then create an empty array and add empty value inside it”. Note the strict equality operator (===) and the exclamation mark (!) just before the .hasOwnProperty() check for a prop named ‘tracks’, which is to say the opposite of .hasOwnProperty(), it’s saying “it does not have a property called ‘tracks’ ”. On line 27 we define a path for the new array to be set and the value is surrounded by square brackets (indicating the value to be inside an array, nested in the property). This will create tracks: [ undefined ] (we can see an example of this on line 14).

Line 29–30: Here the code is saying “Also, if prop is strictly equal to “tracks” and value is strictly not equal to an empty string (meaning that there are present value(s) in the prop “tracks” array), then add new value onto the end of that existing “tracks” array. We add the new value (which appears in the closed brackets of the .push’s perimeters, see line 30) by using the .push() method which adds new metadata to the end of a specified array. If we then pass a new value through the function, such as:

updateRecords(collection, 2468, ‘tracks’, ‘Dog’);

..for example, the new track “Dog” will be added onto the end of the existing prop track array for album id 2468 in line 10.

Line 32–33: In the final else statement, the code says “Also, if the value is strictly equal to an empty string, then delete the given prop property with it’s empty string value from the id(album)”. Note the delete property and path to value in line 33.

Lastly, on line 35, we return the object, which means the entire object (the variable called “collection” in this case) is always returned regardless of the previously defined conditions.

On line 38, we test the function with it’s corresponding conditions set out as object(collection), id(5439), prop(artist) and value(ABBA). This example update will pass according to the if/else statement on line 23, where prop is ‘artist’ (and not a property called “tracks”), value contains the string ‘ABBA’ (and is not an empty string), and the album (which is id key number 5349) that previously only contained one property called albumTitle is updated from the action on line 24 with a new prop and value. It will now contain two properties: “albumTitle” and “artist”.

—

Aaaand let’s end it there. Phew! I’d say that was a success wouldn’t you? I always find that after I write out the explanation of my workings or a new subject, it solidifies the new ideas in my head better and I’m able to recall these topics a lot easier. This task was initially very difficult but after going through it with you I have found it to be very simple, straight-forward and logical. Til next time!