Let´s talk about we have the next structure,

const songsFromYoel = {

allsongs: {

rock: ["Bohemian Rhapsody", "Smoke on the water"],

metal: ["Walk", "Enter Sandman"]

}

How we can print the songs?

The first option I think about is to use a loop, for example,

for (let key in songsFromYoel) {

const keys = songsFromYoel[key];

for (let key2 in keys) {

for (let key3 in keys[key2]) {

console.log(keys[key2][key3]);

}

}

} // Output

Bohemian Rhapsody

Smoke on the water

Walk

Enter Sandman

This is a little confusing and exhausting.

How about use a .foreach() instead,

Object.keys(songsFromYoel).forEach(key => {

Object.keys(songsFromYoel[key]).forEach(key2 => {

songsFromYoel[key][key2].forEach(key3 => {

console.log(key3);

});

});

}); // Output

Bohemian Rhapsody

Smoke on the water

Walk

Enter Sandman

Same result, I get lost with the keys, it’s chaotic.

The simplest option that I use for this type of structures is,

Iterables

When introducing generators we have to talk about two concepts.

Use of the for… of Implement a method [Symbol.iterator]()

Use of the for… of

The for…of statement creates a loop iterating over iterable objects, including:

String , Array , arguments , NodeList , TypedArray , Map , Set .

The for…of loop unlike the well-known for…in , is for looping over data—like the values in an array.

The benefit of using for … of

Works with break, continue and return, unlike .forEach().

So let´s implement it in our example.

for (index of songsFromYoel) {

console.log(index);

} // Output

songsFromYoel is not iterable

Why are you throwing us a mistake?

Because we have not implemented the [Symbol.iterator]().

Implement a method [Symbol.iterator]()

[Symbol.iterator]() returns a new iterator object and it handles the further iteration process.

This object have one method,

next() -> Returns an object {done: Boolean, value: any} containing the next value in the iterator. If all items have been returned, done will be true .

So let´s create our [Symbol.iterator](),

const songsFromYoel = {

allsongs: {

rock: ["Bohemian Rhapsody", "Smoke on the water"],

metal: ["Walk", "Enter Sandman"]

}, [Symbol.iterator]() {

return {

next() {}

};

}

};

But this doesn’t work because we need to convert our allsongs object into an array to iterate it.

As we do it because first we convert it into an array with the values, with the object.values() method.

const songsFromYoel = {

allsongs: {

rock: ["Bohemian Rhapsody", "Smoke on the water"],

metal: ["Walk", "Enter Sandman"]

}, [Symbol.iterator]() {

let allSongs = Object.values(this.allsongs);

return {

next() {}

};

}

};

Now we have to create an index and increase it by the elements that we have inside this array.

const songsFromYoel = {

allsongs: {

rock: ["Bohemian Rhapsody", "Smoke on the water"],

metal: ["Walk", "Enter Sandman"]

}, [Symbol.iterator]() {

let allSongs = Object.values(this.allsongs);

let allsongsIndex = 0;

return {

next() {

return {

value: allSongs[allsongsIndex],

done: false

};

}

};

}

}; // Output

[ 'Bohemian Rhapsody', 'Smoke on the water' ]

[ 'Bohemian Rhapsody', 'Smoke on the water' ]

[ 'Bohemian Rhapsody', 'Smoke on the water' ]

...

Now we have to tell the infinite loop when to stop, for that we create an if, if the index we just created is greater than the length of our array, we send that the iteration stop with an object { value: undefined, done: true }.

const songsFromYoel = {

allsongs: {

rock: ["Bohemian Rhapsody", "Smoke on the water"],

metal: ["Walk", "Enter Sandman"]

}, [Symbol.iterator]() {

let allSongs = Object.values(this.allsongs);

let allsongsIndex = 0;

return {

next() {

if (allsongsIndex >= allSongs.length) {

return { value: undefined, done: true };

}



return {

value: allSongs[allsongsIndex],

done: false

};

}

};

}

};

But it still fails, because it doesn’t show us the second elements of the array.

Because we need to create a new index to iterate in that second array and increase the allsongsIndex.

const songsFromYoel = {

allsongs: {

rock: ["Bohemian Rhapsody", "Smoke on the water"],

metal: ["Walk", "Enter Sandman"]

}, [Symbol.iterator]() {

let allSongs = Object.values(this.allsongs);

let allsongsIndex = 0;

let songsfromYoelIndex = 0;

return {

next() {

if (songsfromYoelIndex >= allSongs[allsongsIndex].length){

allsongsIndex++;

songsfromYoelIndex = 0;

} if (allsongsIndex >= allSongs.length) {

return { value: undefined, done: true };

}



return {

value: allSongs[allsongsIndex],

done: false

};

}

};

}

};

And we need to add the new index to the return value.