CODEWITHSUNDEEP
javascripthtmlarraysstringforeach
John
John

Reputation: 1797

javascript foreach array and split by comma and space and display as a string

I have a long list of items in a list item, which I need to go through and add a comma and space and display as a comma seperated string of items:

So i have the following:

 <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>etc</li>
 </ul>

Which I need to be display as the following:

Item 1, Item 2, Item 3, Item 4, etc

 <p>Item 1, Item 2, Item 3, Item 4, etc</p>

I am new to javaScript so any help would be great.

Thank

Upvotes: 1

Views: 9931

Answers (6)

Derek Henderson
Derek Henderson

Reputation: 9706

Simply get the collection of LIs, concatenate their texts, and insert into a P that you create and append to the BODY:

var items = document.getElementsByTagName('li'),
    count = items.length,
    para = document.createElement('p'),
    str = items[0].innerHTML,
    i;

for (i = 1; i < count; i += 1) {
    str += ', ' + items[i].innerHTML;
}

para.innerHTML = str;
document.body.appendChild(para);

Demo

Edit: It's 2021, and there is a much better way to do this.

const items = document.querySelectorAll('li');
const stringifiedList = Array.from(items)
  .map(item => item.textContent)
  .join(', ');
const para = document.createElement('p');

para.textContent = stringifiedList;
document.body.appendChild(para);

Upvotes: 1

Ishan Jain
Ishan Jain

Reputation: 8171

You can easily get this using Jquery -

Html -

 <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>etc</li>
 </ul>
<span id="lstItem"></span>

Jquery -

$(document).ready(function(){
    var ListItem = "";
    $('ul li').each(function(){
      ListItem += $(this).text() + ", ";    
    });

    $('#lstItem').text(ListItem.substring(0,(ListItem.length - 2)));
});

Try - Jquery Demo

Solution with Javascript - 

var listli = document.getElementsByTagName("li");
var lstItem = [];
for(var i=0; i<listli.length; i++){
    lstItem.push(listli[i].innerHTML);
}
 var showlist = document.getElementById("lstItem");
 showlist.innerText = lstItem.join();

Try With Javascript

Upvotes: 1

Mark Walters
Mark Walters

Reputation: 12400

Using unique ID's in your code makes work like this much simpler.

<ul id="myUL">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>etc</li>
 </ul>
<p id="myPara"></p>

The javascript would look like this

//Grab your ul element by id and then all the li tags within it.
var myArr = document.getElementById("myUL").getElementsByTagName("li");
//Grab your paragraph you wish to populate
var para = document.getElementById("myPara");
//Specify an output array
var output = [];

//Loop over your li's and grab the html content
for(var i=0; i<myArr.length; i++){
    output.push(myArr[i].innerHTML);
}

//Set the paragraph value by joining the outputs together 
para.innerHTML = output.join(", ");

Here is a working jsFiddle - http://jsfiddle.net/GBdTM/

Some useful references

Upvotes: 5

Bergi
Bergi

Reputation: 665574

No JavaScript needed here. Some CSS will do it as well, and keep the more semantic document structure:

ul {
    display: block;
    padding: 0;
}
li {
    display: inline;
}
li:not(:last-child)::after {
    content: ", ";
}

(demo at jsfiddle.net)

Upvotes: 2

Unknown
Unknown

Reputation: 161

Hope this small example will give you something to work of.

$(document).ready(function () {
        var str = '';
        $('li').each(function () {
            str += $(this).text() + ', ';
        });

        //Remove the last two character
        str = str.slice(0, -2);

        //assign the string to the <p>
        $('p').text(str);
    });

jsFiddle Example

Upvotes: 1

Jon
Jon

Reputation: 437904

You want to select the interesting elements, get their text and join the texts with the string ", " as the delimiter.

Get the elements with document.querySelectorAll:

var els = document.querySelectorAll("ul > li"); // ul > li is a "CSS selector"

Translate the collection of elements to a collection of their text by iterating over the returned NodeList:

var text = [];
for (var i = 0; i < els.length; ++i) {
    text.push(els[i].textContent);
}

Join them together with Array.join:

var joined = text.join(", ");

A few caveats:

  • querySelectorAll is not supported in IE < 8
  • textContent is not supported in IE < 9, but you can use innerText for old IE

Upvotes: 3

Related Questions