How to filter the array and then use map method to output it?

Question

I'm trying to use:

1..cards**.filter** method to find cards number === TRUE, 2..then use cards**.map** method to innerHTML cards.symbol value without the number value.

The end result should be 9 divs displayd in my index.html file -> <div class="cards">1</div> <div class="cards">2</div> <div class="cards">3</div> <div class="cards">4</div> <div class="cards">5</div> <div class="cards">6</div> <div class="cards">7</div> <div class="cards">8</div> <div class="cards">9</div>

//HTML

 <body>
    <h1>Filter Method</h1>
    <div class="container" id="filter-method"></div>
</body>

//JAVASCRIPT

const cards = [
    {  symbol: '1', number: true},
    {  symbol: '2', number: true},
    {  symbol: '3', number: true},
    {  symbol: '4', number: true},
    {  symbol: '5', number: true},
    {  symbol: '6', number: true},
    {  symbol: '7', number: true},
    {  symbol: '8', number: true},
    {  symbol: '9', number: true},
    {  symbol: '+', number: false},   
    {  symbol: '-', number: false},   
    {  symbol: '*', number: false} 
    ];
    
    const cardsContainer = document.querySelector('#filter-method');
    
    const filteredCards = cards.filter((card) => {
      if(card.number === true){
        return '<div class="card">' + '<span>' + card.symbol  + '<span>' + '</div>';
      }
})

cardsContainer.innerHTML = filteredCards.join('\n');

try this cards.filter(v=>v.number).map(v=><div class="card"><span>${v.symbol}</span></div>).join('\n');; — Girish
– Girish, Commented Apr 28, 2021 at 9:57

Jamiec · Accepted Answer · 2021-04-28 09:57:28Z

1

filter should return true or false to determine whether to include that item and then map can be used to turn it to html. I've assumed you want to keep the <span> elements too.

const cards = [
    {  symbol: '1', number: true},
    {  symbol: '2', number: true},
    {  symbol: '3', number: true},
    {  symbol: '4', number: true},
    {  symbol: '5', number: true},
    {  symbol: '6', number: true},
    {  symbol: '7', number: true},
    {  symbol: '8', number: true},
    {  symbol: '9', number: true},
    {  symbol: '+', number: false},   
    {  symbol: '-', number: false},   
    {  symbol: '*', number: false} 
    ];
    
const cardsContainer = document.querySelector('#filter-method');
    
const filteredCards = cards.filter(card => card.number).map(card => {
    return '<div class="card">' + '<span>' + card.symbol  + '</span>' + '</div>';
})
    
cardsContainer.innerHTML = filteredCards.join("\n")

<div class="container" id="filter-method"></div>

answered Apr 28, 2021 at 9:57

Jamiec

136k15 gold badges143 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Paul C Over a year ago

Lovely, Thank you for your time Jamiec. That's exaclty what I was trying to achieve.

Paul C Over a year ago

Jamiec, I'm having hard time to understant this function with multiple methos. const filteredCards = cards.filter(card => card.number).map(card => { Can you please try to explain it to me in the simpliest way possible?

Jamiec Over a year ago

@PaulC both filter and map are methods which act on an array, and return an array. So they are just chained one after another. You could do it in multiple steps too - const filteredCards = cards.filter(....) and then const html = filteredCards.map(...). Does that make more sense?

secan · Accepted Answer · 2021-04-28 10:09:45Z

1

You could do everything in one go using Array.prototype.reduce():

const cards = [
  { symbol: '1', number: true },
  { symbol: '2', number: true },
  { symbol: '3', number: true },
  { symbol: '4', number: true },
  { symbol: '5', number: true },
  { symbol: '6', number: true },
  { symbol: '7', number: true },
  { symbol: '8', number: true },
  { symbol: '9', number: true },
  { symbol: '+', number: false },
  { symbol: '-', number: false },
  { symbol: '*', number: false }
];

const cardsContainer = document.querySelector('#filter-method');

cardsContainer.innerHTML = cards.reduce((strHTML, card) => {
  if (card.number) strHTML += `<div class="card"><span>${card.symbol}</span></div>`
  return strHTML;
}, '')

<body>
  <h1>Filter Method</h1>
  <div class="container" id="filter-method"></div>
</body>

answered Apr 28, 2021 at 10:09

secan

2,6771 gold badge9 silver badges24 bronze badges

2 Comments

Paul C Over a year ago

Secan thank you for you time and good answer, most definatly gonna use that in the future. But for now I'm still on learning stages and I was trying to practice and understand .filter and .map methods..

secan Over a year ago

Just to give you an idea of how "powerful" the Array.prototype.reduce() method is, just consider this: with .filter() + .map() + .join() you have a total of 30 iterations over the cards array and its filtered subset (12 for filtering, 9 for mapping, 9 for joining); with .reduce() you have only 12 iterations to obtain the same result. That is definitely a tool you want to add to your kit once you are confident with .map() and .filter() ;)

Collectives™ on Stack Overflow

How to filter the array and then use map method to output it?

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related