Learn Basic String and Array Methods by Building a Music Player step 18

JavaScript
1

Hi guys and Happy New Year!

I got soo stuck on this step, I just can’t figure out how to solve this step:

I just can’t figure out where to put the ‘join(“”)’ method…

      
      return `
      <li id="song-${song.id}" class="playlist-song">
      <button class="playlist-song-info">
          <span class="playlist-song-title">${song.title}</span>
          <span class="playlist-song-artist">${song.artist}</span>
          <span class="playlist-song-duration">${song.duration}</span>
      </button>
      <button class="playlist-song-delete" aria-label="Delete ${song.title}">
          <svg width="20" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8" fill="#4d4d62"/>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M5.32587 5.18571C5.7107 4.90301 6.28333 4.94814 6.60485 5.28651L8 6.75478L9.39515 5.28651C9.71667 4.94814 10.2893 4.90301 10.6741 5.18571C11.059 5.4684 11.1103 5.97188 10.7888 6.31026L9.1832 7.99999L10.7888 9.68974C11.1103 10.0281 11.059 10.5316 10.6741 10.8143C10.2893 11.097 9.71667 11.0519 9.39515 10.7135L8 9.24521L6.60485 10.7135C6.28333 11.0519 5.7107 11.097 5.32587 10.8143C4.94102 10.5316 4.88969 10.0281 5.21121 9.68974L6.8168 7.99999L5.21122 6.31026C4.8897 5.97188 4.94102 5.4684 5.32587 5.18571Z" fill="white"/></svg>
      </button>
      </li>

  `;
      
    } 
    )

My knowledge in methods is shallow and even though I have googled “chaining” etc. it keeps eluding me. Any helpful hints would be much appreciated.

Keep coding and thanks in advance!
/K

3 Likes
2

Hi.
See this part of the requirements one more time:

Chain the join() method to your map() method and pass in an empty string for the separator.

Let us know if this helps.

1 Like
3

@kimson

Take this pseudo example

Look at this pseudo code

getCollection()
  .then(() => do something)
  .then(() => do something else);

or

 myCollection
  .map(() => "some string value")
  .join(" my separator or even an empty string ... ")

These are two different examples of chaining.

Basically, when the value returned is an array or a Promise or anything else that is an object with methods that are returning that object, then using thatObject.[method name]().[same method or other method]() etc, is a pattern that can be used.

1 Like
4

@kimson

Hey there,

Let me give you an example to demonstrate how chaining works:

const array = [{name: "john", age: 26}, {name: "steve", age: 24}];
const finalArray = array.map(person => {
    return `${person.name}-${person.age}`
}).join("_");
console.log(finalArray); //output: "john-26_steve-24"

So, here the map() method first returns an array ["john-26", "steve-24"] and followed by that the join() method with seperator as "_", returns our finalArray as "john-26_steve_24".

Happy Coding :keyboard: !

5

Hi @GeorgeCrisan and thanks for your swift reply.

Yes, that’s the task for the step but I just don’t understand the concept of chaining.
I read this at no avail… :METHOD CHAINING IN JAVASCRIPT

I read this: Method chaining in javascript

But I just have to admit that I just can wrap my head around the concept.

And I wrote this when @GKA provided his tip. :slight_smile:

6

@kimson

is it still confusing/unclear ?

7

Meantime, I’ve added another reply above. Have a look at that. PM privately and I can take you through how it works if you like. Happy to have a zoom call to chat it, if you prefer that.

1 Like
8

Hi @GKA.

Very much so, but yoiyr example should lead me in the right direction. I am studying over and over again to understand the code.

Thank you for your patience.

9

Hi again @GeorgeCrisan ,

I am slowly beginning to get the concept of “chaining” but unfortunately I lack the deeper, real understanding.

Your example is another good angle of the issue and I will spend some time to really get to understand the code and syntax.

Thank you so far, guys.

10

@kimson

Maybe this will help:

const array = //some array
const finalArray = array.map().join();

is very much same as

const array = //some array
const intermediateArray = array.map();
const finalArray = intermediateArray.join();
1 Like
11

@GKA , @GeorgeCrisan ,

Thank you very much for your help and hints and examples, I got it!

Equally hard and impossible in the beginning as embarrassingly easy and simple when one finally understands.

Thank you for not spoling and beeing patient, polite and courteous.

Even though you both provided hints and examples @GeorgeCrisan’s hint was the one that made it all make sense.

Case closed.
/K

2 Likes
12

}).join(“”) at the end, be careful with spacing!

13

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.