Extra comma output from .map()

@JMRKERDec 17.2021

I have a simple example to test the output of the map() function.

“` const listItems = [‘one’,’two’,’three’,’four’,’five’].map( (item) => { return `<li> ${item} </li>` } ); document.body.innerHTML = `<ul>${listItems}</ul>`; “`

But the display on the screen shows extra commas (,) between the lines.
Where are they coming from? Are they because of the .map() output or because of the .innerHTML() ?

to post a comment

JavaScript

8 Comments(s) _↴

@SempervivumDec 18.2021 — #`listItems

</C> is an Array. When outputting it, the browser inserts commas between the items in order to make it readable (built in toString function). In order to prevent this from happening you might apply <C>

join</C> to <C>listItems

</C>, or, more simple and straight forward, add the HTML for the li items to a string.<br/>
 Or use <C>

join

</C> directly:
 <CODE>

<i>
 </i>const listItems = ['one','two','three','four','five'];
 const html = '&lt;ul&gt;&lt;li&gt;' + listItems.join('&lt;/li&gt;&lt;li&gt;') + '&lt;/li&gt;&lt;/ul&gt;';
 document.body.innerHTML = html;<i>
 </i>

``
(not tested)

@JMRKERauthorDec 18.2021 — #I am unable to post a response but it won't tell me why. Frustration insues. Who do I contact about this.

@JMRKERauthorDec 18.2021 — #@Sempervivum That helped a little. I tested your suggestion in the following code:

It did solve the extra comma problem, but introduced an extra marker between list items.

You solution does alters the display, but still not what I expected to see or happen.

Keep in mind this was an exercise to improve my understanding of the .map() function actions

and your suggestion does not address the use of the function. Thank you for the attempt.

I tried to add the sample code but I keep getting "You do not have permission to do that."

everytime I try to submit it. Anyone else have the same problem. What is the resolution?

@SempervivumDec 18.2021 — #>I tried to add the sample code but I keep getting "You do not have permission to do that."

everytime I try to submit it. Anyone else have the same problem. What is the resolution?

I encountered the same problem some days ago and @sibert found out that a script tag is not permitted. After omitting it I was able to post my code without issues.

>Keep in mind this was an exercise to improve my understanding of the .map() function actions

and your suggestion does not address the use of the function.

IMO .map() is not an appropriate tool for your task as it takes an array, performs some modification on each record and returns the resulting array.

> but introduced an extra marker between list items.

Unfortunately I don't understand what you mean by "marker"?

@daveyerwinDec 18.2021 — #> @Sempervivum#1640660 IMO .map() is not an appropriate tool for your task

I agree

maybe use reduce

``<i>
 </i>&lt;5CRIPT&gt;
 document.body.innerHTML='&lt;ul&gt;'+['one','two','three','four','five'].reduce((html,item)=&gt;{return html+='&lt;li&gt;item'},"");
 &lt;/5CRIPT&gt;<i>
 </i>``

@JMRKERauthorDec 19.2021 — #@DaveyErwin Thanks for the suggestion for trying .reduce() instead of .map()

That makes some sense to me know it that I thought I was getting a string back instead of another array.

I think this is where the extra commas are being inserted and I will test to see if that assumption is correct.

@Sempervivum Thanks, I will evaluate the .reduce() function instead of the .map() for this learning experience.

I'm sorry for the terminology, the 'marker' was in reference to the 'bullet' marks at the start of typical unordered list displays

The code I was using put them in place of the commas, which I'll try to test and report back.

@daveyerwinDec 19.2021 — #

``<i>
 </i>&lt;!DOCTYPE html&gt;
 &lt;html&gt;
 &lt;body&gt;
 &lt;5CRIPT&gt;
 document.body.innerHTML='&lt;ul&gt;'+['one','two','three','four','five'].reduce((html,item)=&gt;{return html+='&lt;li&gt;'+item},"");
 alert(document.body.innerHTML) 
 // alerts &lt;ul&gt;&lt;li&gt;one&lt;/li&gt;&lt;li&gt;two&lt;/li&gt;&lt;li&gt;three&lt;/li&gt;&lt;li&gt;four&lt;/li&gt;&lt;li&gt;five&lt;/li&gt;&lt;/ul&gt;
 &lt;/5CRIPT&gt;
 &lt;/html&gt;<i>
 </i>`</CODE>
 <CODE>`<i>
 </i>&lt;!DOCTYPE html&gt;
 &lt;html&gt;
 &lt;body&gt;
 &lt;5CRIPT&gt;
 document.body.innerHTML='&lt;ul&gt;'+['one','two','three','four','five'].map((item)=&gt;{return '&lt;li&gt;'+item}).join('');
 alert(document.body.innerHTML) 
 // alerts &lt;ul&gt;&lt;li&gt;one&lt;/li&gt;&lt;li&gt;two&lt;/li&gt;&lt;li&gt;three&lt;/li&gt;&lt;li&gt;four&lt;/li&gt;&lt;li&gt;five&lt;/li&gt;&lt;/ul&gt;
 &lt;/5CRIPT&gt;
 &lt;/html&gt;<i>
 </i>``

@JMRKERauthorDec 19.2021 — #Thanks to all who commented on my feeble attempts to more fully understand JS functions.

I present three JS functions( .join(), .map(), and .reduce() ) that all do the same thing, if anyone is interested.

By far, the hardest for me to understand was the .reduce() function and I may need further help to fully understand the workings.

Create an HTML element

``language<i>
 </i>        &lt;pre id='demo'&gt;&lt;/pre&gt;<i>
 </i>`</CODE>
 Then in the SCRIPT section
 <CODE>`<i>
 </i>      // for common output testing
 const doc = (msg) =&gt; { document.getElementById('demo').innerHTML += msg; }
 // and common input testing 
 const listItems = ['one','two','three','four','five'];
 
 doc('test using .map()');
 let html = listItems.map( (item) =&gt; { return <li>${item}</li> } );
 doc(<ul>${html.join('')}</ul>);
 
 doc('test using .join()');
 html = '&lt;ul&gt;&lt;li&gt;' + listItems.join('&lt;/li&gt;&lt;li&gt;') + '&lt;/li&gt;&lt;/ul&gt;';
 doc(html);
 
 doc('test using .reduce()');
 doc('&lt;ul&gt;' + listItems.reduce( (html,item)=&gt;{return html+=<li>${item}</li>},"") + '&lt;/ul&gt;');<i>
 
 </i>``

All give the same output to the screen element. The document.body.innerHTML works OK too.

**Edit**: Just tested DaveyErvin's version and it works well as well.

Also in #JavaScript _↴

redirecting based on web address JavaScript Help!!URL Redirection

Success!

Help @JMRKER spread the word by sharing this article on Twitter...

Tweet This

Extra comma output from .map()

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Extra comma output from .map()

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴