Collect <td> strings into an Array with jQuery

Question

I have some tabular data and I need to put them into an array so I can look for a match elsewhere in the code. So I need to convert this:

<td> Name 1 </td>
<td> Name 2 </td>
<td> Name 3 </td>

into:

['Name 1', 'Name 2', 'Name 3']

This does not work:

 $('td').text().toArray();

I really hoped it would :) I need to take the text of an input and compare it to the existing <td>s to make sure it's unique, so if there is a better way of going about it, I'd love to hear it. I know I could create an empty array, create a loop or use $.each() and push() each .text() to the array, but there has got to be a more concise way.

Possible duplicate of Getting all the table td values into array — showdev
– showdev, Commented Sep 16, 2016 at 18:34

Ibrahim Khan · Accepted Answer · 2016-09-16 18:36:24Z

2

You can use jQuery map() method like following.

var arr = $('td').map(function (){
    return $(this).text().trim();
}).get();

console.log(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td> Name 1 </td>
        <td> Name 2 </td>
        <td> Name 3 </td>
    </tr>
</table>

edited Sep 16, 2016 at 18:36

answered Sep 16, 2016 at 18:30

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

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

3 Comments

SpaceNinja Over a year ago

Yeah I never quite grasped the .map() and .get(). Thanks!

SpaceNinja Over a year ago

@Azim maybe you can tell me - when do you know when .get() will be necessary? I know the documentation says .get() "Retrieves the DOM elements matched by the jQuery object". So when you have a matched set returned from a normal jQuery selector, how do you know you also need to then do a .get() to "retrieve" the items already in the matched set?

Ibrahim Khan Over a year ago

map() returns a jQuery object. get() returns an array containing each element in a jQuery object (plain JS array). @SpaceNinja

baao · Accepted Answer · 2016-09-16 18:32:34Z

1

You need to loop over the elements and get each one's text. In plain js you could do :

var result = Array.prototype.map.call(document.getElementsByTagName("td"), function(el) {
        return el.innerHTML.trim();
    });

    console.log(result)

<table>
    <tr>
        <td> Name 1 </td>
        <td> Name 2 </td>
        <td> Name 3 </td>
    </tr>
</table>

answered Sep 16, 2016 at 18:32

baao

73.5k18 gold badges152 silver badges208 bronze badges

Collectives™ on Stack Overflow

Collect <td> strings into an Array with jQuery

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related