CODEWITHSUNDEEP
javascriptforeachmapping
Paul C
Paul C

Reputation: 31

How to chain multiple array methods to arrow function

In my arrow function I'm trying to use method .forEach and then chain .map method to it, but I'm getting error message "(card).map(card => {" "card is not defined".

I also tried using .find method const findCards = cards.find(card => card.symbol === '7' ).map(card => { error message "map is not a function"

I was able to chain .map method to a .filter method.

const filteredCards = cards.filter(card => card.number).map(card => {

I'm able to console log .forEach without the .map.. SO I'm confused a bit..

HTML

<div class="container" id="forEach-method"></div>
<div class="container" id="find-method"></div>

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} 
];


//.FOREACH METHOD
const cardsContainerforEach = document.querySelector('#forEach-method');
const forEachCards = cards.forEach(card).map(card => {
  return '<div class="card">' + '<span>' + card.symbol + '<span>' + '</div>';
})
cardsContainerforEach.innerHTML = forEachCards.join('\n');


//.FIND METHOD
const cardsContainerFind = document.querySelector('#find-method');
const findCards = cards.find(card => card.symbol === '7' ).map(card => {
  return '<div class="card">' + '<span>' + card.symbol + '<span>' + '</div>';
})
cardsContainerFind.innerHTML = findCards.join('\n');

Upvotes: 1

Views: 1039

Answers (2)

Jacob Hansen
Jacob Hansen

Reputation: 148

Foreach don't return anything, thats why you cant chain it, and find returns a single object not an array, thats why you can't chain that. You can chain .map method to a .filter method because map returns an array.

The line cards.forEach(card) is looking for a function named card. What you probably are trying is to inject a fatarrow function into foreach, that should look like this cards.forEach(card => /* do something with card */).

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 foreach = cards.forEach(card => card);
const find = cards.find(card => card.symbol === '-');
const map = cards.map(card => parseInt(card.symbol));

console.log('forEach:', foreach); // Should return undefined.
console.log('find:', find); // Should return a single object.
console.log('map:', map); // Should return an array object.

//.filter() METHOD
const filterCards = cards.filter(card => !card.number ).map(card => {
  return '<div class="card">' + '<span>' + card.symbol + '<span>' + '</div>';
})
console.log(filterCards.join('\n'));

Of the options that you tried only map returns an array meaning that you have the higher order array functions available on map.

Upvotes: 1

Paul Martin
Paul Martin

Reputation: 469

So I can see two issues here.

  1. You don't need the forEach on your first function. map will iterate over the array and return a new array with the contents changed as you've asked.
  2. find returns an element, not an array, so you'd be better off using either filter, then mapping over it, or just returning the result of find and passing it to html.

Here's your code returning what you want by mapping over the filter (good if you expect cases with more than one result)...

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} 
];

//.FOREACH METHOD
const cardsContainerforEach = document.querySelector('#forEach-method');
const forEachCards = cards.map(card => {
  return '<div class="card">' + '<span>' + card.symbol + '<span>' + '</div>';
})
cardsContainerforEach.innerHTML = forEachCards.join('\n');

//.FIND METHOD
const cardsContainerFind = document.querySelector('#find-method');
const findCards = cards.filter(card => card.symbol === '7').map(card => {
  return '<div class="card">' + '<span>' + card.symbol + '<span>' + '</div>';
})

cardsContainerFind.innerHTML = findCards.join('\n');

Upvotes: 1

Related Questions