Build a Music Instrument Filter - Step 12

JavaScript
1

Tell us what’s happening:

Console logs a returning array of strings, with copy-pasted text, as requested. Still my code won’t pass

Your code so far

<!-- file: index.html -->


/* file: styles.css */


/* file: script.js */
// User Editable Region

function instrumentCards(instrumentCategory) {
  const instruments =
    instrumentCategory === "all"
      ? instrumentsArr
      : instrumentsArr.filter(
          ({ category }) => category === instrumentCategory
        );
  for (let i=0; i<instruments.length; i++){
    instruments[i] = `<div class="card"><h2>${instruments[i].instrument}</h2><p>\$${instruments[i].price}</p></div>`
  };
  return instruments
}

// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36 Edg/139.0.0.0

Challenge Information:

Build a Music Instrument Filter - Step 12
https://www.freecodecamp.org/learn/full-stack-developer/workshop-music-instrument-filter/step-12

2

Hi @Aello

Try console logging the function, passing in an instrument category.

Then compare the output with the expected output.

Happy coding

3

Thank you for your time; I just did:

console.log(instrumentCards("brass"))

logs:

[ '<div class="card"><h2>Trumpet</h2><p>$200</p></div>',
  '<div class="card"><h2>Trombone</h2><p>$300</p></div>',
  '<div class="card"><h2>French Horn</h2><p>$4300</p></div>' ]

I don’t understand how it differs from: “array of strings containing the HTML code to display the instrument cards, each string corresponding to an object in the instruments array. The strings should have this format <div class="card"><h2>[instrument]</h2><p>$[price]</p></div>”

Also

console.log(typeof(instrumentCards("percussion")[1]))

logs

string
4

Since you are using a loop, how about creating an array then returning that array.

5

Thank you, it worked, but I don’t understand the logic behind it: the function is now returning the exact same output as when I was using “instruments”, defined at the beginning of the function and whose elements were being replaced by the loop, as returning parameter, which was already giving the requested output.
Why was that method rejected, while a new array was accepted?

6

with the loop that replaces the elements inside the array, you were also changing instrumentsArr in some cases, do you think that is the expected behaviour?

1 Like