Manipulating complex JSON in Javascript

I have been doing the Freecodecamp Javascript curriculum for the last 10 days to learn Javascript fundamentals.

Well, as most people who have learned to code I have to solve challenges that involve the concepts learned previously. And I was stuck with the "Record challenge" for two days.

I did a post on Twitter and researched on Google about JSON but could not find out still how to write the steps correctly.

Nothing I tried worked, probably because in my head I am still figuring out how to write instructions to a computer in JS.

But, fortunately, Andre, saw my post on Twitter came to my rescue!

We looked together through the challenge and I could learn that:

1. To access a JSON object I need to use the correct syntax, to tell the computer to access a particular object, using [] bracket notation was the way to go:

So if: value !== "" {
collection[id[prop] //which is the album// // then create an empty array// = []
}

The album was noted by collection.

1. When you read a challenge, each of the steps is a condition that must be met and decoded in JS language. In this particular challenge (Record collection) the conditions are not all an if statements. I was writing 3 main "if" statements. In other words, having all of them with if statements tells the computer I only want to run one of them if one complies the condition.

That was a mistake.

Not all steps have the same importance to achieve the end goal of the challenge.

Conditions below:
***If prop is "tracks" but the album doesn't have a "tracks" property, create an empty array before adding the new value to the album's corresponding property.

***If prop is "tracks" and value isn't empty (""), push the value onto the end of the album's existing tracks array.

***If value is empty (""), delete the given prop property from the album.

What is the main condition?

Well, if we don't have any values, then delete the object.

I was confused, so I wrote all these conditions following the order stated. But instead, I should have written them considering what is the most logical thing to evaluate first.

My old code was:

function updateRecords(id, prop, value)
{ if (prop === "tracks" && collection[id]["tracks"] === undefined) {
collection[id]["tracks"] = []
} //If prop is "tracks" and value isn't empty (""),
//push the value onto the end of the album's existing tracks array.//
if (prop === "tracks" && value !== "") {
collection[id]["tracks"].push(value)
} //If value is empty (""), delete the given prop property from the album.//
if (value === "") {
delete collection[id][prop]
}

else { collection[id][prop] = value; }

console.log(collection[id])

return collection

}

It did not pass the challenge, because there are main conditions all in the same level of the hierarchy.

The first "if" will execute as is one of the main conditions.
The second "if" will not be executed by the computer. As I am saying "if you encounter the first "if" them, do not execute the other instructions.

So I re-ordered and added an else if statement in the second condition.
New code:

function updateRecords(id, prop, value) {
if (value === "") {
delete collection[id][prop];
} else if (prop === "tracks") {
collection[id][prop] = collection[id][prop] || [];
collection[id]["tracks"].push(value);
} else {collection[id][prop] = value }

return collection;
}

console.log(updateRecords(5439, "artist", "ABBA"));

The else statement was overwriting the second condition with if.
After changing the second if to an else if statement it worked!

Other useful things to know when manipulating JSON Objects:

• Access the objects with [] and specify what property you want to access:

For example:

let household {

Object 1=> household1: {
Name: Sunflower;
N of people: 5;
Status: medium class;
Children: [
"Charles",
"Brigitt",
]
Working: yes;
},

Object 2=> household2: {
Name: Tulips;
N of people: 8;
Status: high class;
Children: [
"Victoria",
"Shalston",
]
working: "",
}

//Access household when the property has an empty "" value//

function registryCity(id, prop, value) {
if (household[id][prop] === "") {
household[id[prop] = household[id][prop] || [] }

return household;
}

Note: I am accessing the prop after indicating the id, as there are two properties, is needed to specify the ID first (imagine is like a "door").
Without the [id], the computer cannot enter any of the [prop].

These are the main takeaways from this challenge with JSON objects, quite a long way still to go but persevering is key to learn to code.

If you are a beginner like myself, I do strongly recommend to review fundamentals at least 3 times, write code that proves these concepts. Then come back to it and speak out loud about these concepts.

Consider writing a blog post about it too!

A massive thanks to Andre and all people that assisted me to understand how to solve this challenge!

Now onto reviewing Freecodecamp Javascript from lesson 1 again!

Keep up!

Karem