jQuery: Convert Attribute Values to Nested Array (Strings to Numbers)

Question

Using jQuery, I would like to get each attribute value, insert it into an array and then insert each array into an array.

From this HTML:

   <ul>
        <li data-bbox="-121,20,-36,30">Item 1</li>
        <li data-bbox="-122,30,-46,40">Item 2</li>
        <li data-bbox="-123,40,-56,50">Item 3</li>
    </ul>

I'm trying to create this type of nested array:

var bboxArray = [
    [-121,20,-36,30],
    [-122,30,-46,40],
    [-123,40,-56,50]
];

...and convert the strings to numbers.

I'm assuming I need to do something like this:

var bboxArray = [];
$('li[data-bbox]').each(function() {
  bboxArray.push($(this).attr('data-bbox').split(','));
});

I just tried your code on CodePen. It is working fine. codepen.io/tekesteg/pen/MyXEQW?editors=1111. Check out the console out put. — Tekeste Kidanu
– Tekeste Kidanu, Commented Apr 20, 2016 at 1:51
not working, those are strings, he is asking for numbers...( I think) — omarjmh
– omarjmh, Commented Apr 20, 2016 at 1:58

omarjmh · Accepted Answer · 2016-04-20 01:58:00Z

2

Working Example

While your code does work, it is returning strings instead of the numbers you have in your required output this will do that:

I simply added .map(Number) at the end of your push

$('li[data-bbox]').each(function() {
  bboxArray.push($(this).attr('data-bbox').split(',').map(Number));
});

answered Apr 20, 2016 at 1:58

omarjmh

13.9k6 gold badges37 silver badges42 bronze badges

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

3 Comments

Dan H. Over a year ago

Yep. Sorry. I didn't make that more clear. I also wanted to convert from string to numbers. Thanks!

omarjmh Over a year ago

youre welcome! can you edit the title in case anyone else see it? Thanks!

Dan H. Over a year ago

I edited the title and the post to make it more clear. If you would like to suggest something additional, please let me know.

PeterKA · Accepted Answer · 2016-04-20 02:11:16Z

0

You can use the .map() method like so:

var bboxArray = $('ul > li').map(function() {
    return [ $(this).data('bbox').split(',') ];
}).get();

var bboxArray = $('ul > li').map(function() {
    return [ $(this).data('bbox').split(',') ];
}).get();
console.log( bboxArray );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <ul>
        <li data-bbox="-121,20,-36,30">Item 1</li>
        <li data-bbox="-122,30,-46,40">Item 2</li>
        <li data-bbox="-123,40,-56,50">Item 3</li>
    </ul>

answered Apr 20, 2016 at 2:11

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Collectives™ on Stack Overflow

jQuery: Convert Attribute Values to Nested Array (Strings to Numbers)

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related