Can I use modulo with Array.prototype.map to insert new line every 3 indicies?

Question

I'm trying to learn es6 and playing around with the pokemon API. myRoute = 'https://pokeapi.co/api/v2/ability/144/';

const arrObservable = this._http.get(newurl);
 arrObservable.subscribe( 
(data) => {
 const pokeString = data.pokemon.map( ( { pokemon }: obj ) => pokemon.name );
console.log(`There are ${data.pokemon.length} pokemon with the ${data.name} ability:  ${pokeString}`);

})

output:

There are 19 pokemon with the regenerator ability: slowpoke,slowbro,tangela,slowking,corsola,ho-oh,tangrowth,audino,solosis,duosion,reuniclus,foongus,amoonguss,alomomola,mienfoo,mienshao,mareanie,toxapex,tornadus-therian

I am getting the correct results, it just looks a bit icky in the console, so I'm wondering if there is a way to add a '\n' every few lines while still using the .map() function?

Answer 1

Once you've used .map, join by commas, and then use .replace on the resulting string to replace instances of 3 words separated by commas with those 3 words and commas plus a newline. That way, your pokeString will actually be a string:

const pokeString = data.pokemon
  .map( ( { pokemon }: obj ) => pokemon.name )
  .join(',')
  .replace(/[^,]+,[^,]+,[^,]+,/g, '$&\n');

const names = ['slowpoke','slowbro','tangela','slowking','corsola','ho-oh','tangrowth','audino','solosis','duosion','reuniclus','foongus','amoonguss','alomomola','mienfoo','mienshao','mareanie','toxapex','tornadus-therian'];

const pokeString = names
  .join(',')
  .replace(/[^,]+,[^,]+,[^,]+,/g, '$&\n');
  
console.log(pokeString);