CODEWITHSUNDEEP
javascriptarraysdictionaryfilter
Paul C
Paul C

Reputation: 31

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

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');

Upvotes: 0

Views: 345

Answers (2)

secan
secan

Reputation: 2659

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>

Upvotes: 1

Jamiec
Jamiec

Reputation: 136094

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>

Upvotes: 1

Related Questions