How to create an array of values from LI inside a UL

Question

I have a control which allows users to sort the <li> in whatever order they want. when the form submits I want to grab the text inside the <li> for each <li> put into an array, in the order on the form.

<ul id="sortable">
    <li class="ui-state-default">
        <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Protective Services
    </li>
    <li class="ui-state-default">
        <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Engineering Services and Public Works
    </li>
</ul>

I am grabbing the <li>'s with:

var ar = [];
ar = document.getElementById("sortable").getElementsByTagName("li");

I then go through the array:

for(i = 0; i < ar.length; i++){
    alert(ar[i].text());    //ar[i].anything results in console errors.
}

ar[i] displays [object HTMLLIElement] for every <li> available. if I try to access the .text/.val/id properties inside the items i get a console error. So I'm assuming this has to do with a parsing/conversion issue?

How do I properly create an array that looks like protective services,Engineering Services and Public Works and NOT like [object HTMLLIElement],[object HTMLLIElement]? Or how do I access my text information from the <li> as a [object HTMLLIElement]?

marty · Accepted Answer · 2014-09-27 20:30:43Z

3

For a pure javascript solution use the innertext property

alert(ar[i].innerText);

Fiddle: http://jsfiddle.net/3fjursaw/

answered Sep 27, 2014 at 20:30

marty

4845 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

loveNoHate · Accepted Answer · 2014-09-27 20:30:05Z

1

You need to get the jQuery object in order to use text():

alert($(ar[i]).text());

JSFIDDLE: http://jsfiddle.net/rh6ufn23/1/.

answered Sep 27, 2014 at 20:30

loveNoHate

1,5451 gold badge13 silver badges22 bronze badges

3 Comments

Cody Stott Over a year ago

Can you make the jsfiddle link bigger?

loveNoHate Over a year ago

@CodyStott No, it's streetstyle stussy.com/us/crown-stripe-tee; everything else would be too big!

user3753569 Over a year ago

haha yeah just a little bit bigger I can't see it! :P Thanks for your solution, wasn't aware i had to use jQuery object to use text(). the innerHTML is great but puts all text in upper-case, i would like to keep my formatting the same and not worry about another step, so your solution is the best for me.

Patrick Evans · Accepted Answer · 2014-09-27 20:32:01Z

1

You need to use the properties ar[i].innerText or ar[i].textContent on DOM nodes. The method .text() would be used if you had a jQuery object

var lis = document.getElementById("sortable").getElementsByTagName("li");

var data = [];
for(var i=0; i<lis.length; i++){
   data.push(lis[i].innerText);  
}

var jsonFormated = JSON.stringify(data);
document.getElementById("log").innerHTML = jsonFormated;

<ul id="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Protective Services</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Engineering Services and Public Works</li>
</ul>


<div id="log"></div>

answered Sep 27, 2014 at 20:32

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

Comments

netchkin · Accepted Answer · 2014-09-27 20:30:49Z

0

the problem is that you work with the HTMLElement, which is of vanilla js, not jQuery. Try .innerHTML instead of .text()

answered Sep 27, 2014 at 20:30

netchkin

1,3941 gold badge12 silver badges22 bronze badges

Comments

Giannis Grivas · Accepted Answer · 2014-09-27 20:33:06Z

0

Use :

var ar = [];
var listItems = $("#sortable li");
listItems.each(function(li) {
    ar.push($(this).text());
});

Working here: http://jsfiddle.net/csdtesting/0uddfms6/

answered Sep 27, 2014 at 20:33

Giannis Grivas

3,4242 gold badges22 silver badges40 bronze badges

Comments

TheStatehz · Accepted Answer · 2014-09-27 20:37:18Z

0

jQuery solution:

$('li', '#sortable').each(function(){
    alert($(this).text()); 
});

Or to fix your solution in pure JS:

var ar = [];
ar = document.getElementById("sortable").getElementsByTagName("li");

for (i = 0; i < ar.length; i++) {
    alert(ar[i].innerText);
}

See fiddle.

edited Sep 27, 2014 at 20:37

answered Sep 27, 2014 at 20:31

TheStatehz

3102 silver badges7 bronze badges

1 Comment

Patrick Evans Over a year ago

There is no need to use replace, using innerText or textContent will give strings that have html tags removed

Collectives™ on Stack Overflow

How to create an array of values from LI inside a UL

6 Answers 6

Comments

JSFIDDLE: http://jsfiddle.net/rh6ufn23/1/.

3 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

JSFIDDLE: http://jsfiddle.net/rh6ufn23/1/.

3 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related