jQuery: how do I construct a 2d Array?

Question

I have this simplified version of my webpage (its a mess IRL):

<li id=section1 class=sortable_section>
    <header>
    <ul id=container1>
        <li id=item1 class=sortable_item>
        <li id=item2 class=sortable_item>
    </container
</section

<li id=section2 class=sortable_section>
    <header>
    <ul id=container2>
        <li id=item3 class=sortable_item>
        <li id=item4 class=sortable_item>
        <li id=item5 class=sortable_item>
    </container>
</section>

So, I can do $j("container1").sortable('serialize') which creates an array of the ids of all the containing li's. so I would get ["item1", "item2"] for container1.

How do I make an array that looks like this:

[
 ["section1", ["item1", "item2"]],
 ["section2", ["item3", "item4", "item5"]]
]

This is what ive been trying: but it doesn't work

        d = $j.makeArray(
        $j('.sortable_section').each(function(i){
            [$j(this).attr("id"),
                $j.makeArray($j.map($j("#"+$j(this).attr("id")+" .sortable_item"), function(s,j){
                    return ($j(s).attr("id"));
                }))]
        }));

But it returns the entire objects, rather than just the ids....

EDIT: as per one of the answers' suggestions, this is now what I have

d = $j(".sections > li").map(function(index, element){
                return [$j(element).attr('id'),
                    $j("#"+$j(element).attr('id') + " .content").map(function(subindex, subelement){
                        return $j(subelement).attr('id');
                    }).toArray()];


            }).toArray();

but I get this error

TypeError: Result of expression near '...}).toArray()]...' [undefined] is not a function.

When I do alerts on $j(element).attr('id') and $j(subelement).attr('id') I get the correct ids

Ian Henry · Accepted Answer · 2010-08-25 16:30:42Z

1

Use jQuery's map function:

$('#master-list > li').map(function(index, element)
{
    return [$(element).attr('id'),
        $(this).children('ul > li').map(function(subindex, subelement)
        {
            return $(subelement).attr('id');
        }).toArray()];
}).toArray();

Edit:

My bad. The above has been updated with the appropriate .toArray() calls.

Re-edit:

Alright, that's what I get for freestyle coding. Here is the correct, actually tested script, along with the markup I used to test it. I was unable to reproduce your error, but it could be caused by an element without an id or possibly have something to do with your renaming the $ symbol to $j.

<script type="text/javascript">
    $(function () {
        var x = $('#master-list > li').map(function (index, element) {
            return [[element.id,
                $(element).find('li').map(function (subindex, subelement) {
                    return subelement.id;
                }).toArray()]];
        }).toArray();
    });
</script>

<ul id="master-list">
    <li id="section1" class="sortable_section">
        Header
        <ul id="container1">
            <li id="item1" class="sortable_item">a</li>
            <li id="item2" class="sortable_item">b</li>
        </ul>
    </li>

    <li id="section2" class="sortable_section">
        Header
        <ul id="container2">
            <li id="item3" class="sortable_item">a</li>
            <li id="item4" class="sortable_item">b</li>
            <li id="item5" class="sortable_item">c</li>
        </ul>
    </li>
</ul>

The reason the above didn't work was a little oddity regarding jQuery's map function: apparently, if you return an array of values, it flattens the array and returns all of the values. So instead of [a, [b, c]] you just get [a, b, c]. To get around this, I added an extra set of brackets so that you are now returning an array containing an array, which, when flattened, is what you want.

FYI, you don't need to do this:

$('#' + $(element).attr('id') + ' .content')

You can get the same effect in more readable code with this:

$(element).find('.content');

edited Aug 25, 2010 at 16:30

answered Aug 24, 2010 at 19:58

Ian Henry

22.4k4 gold badges53 silver badges61 bronze badges

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

6 Comments

NullVoxPopuli Over a year ago

When I alert this code, it tells me my array is [object Object] rather than the desired array in my question.

Ian Henry Over a year ago

I've edited the answer. (Forgot that the jQuery map function returns a jQuery set)

NullVoxPopuli Over a year ago

I got this error TypeError: Result of expression near '...}).toArray()...' [undefined] is not a function.

NullVoxPopuli Over a year ago

I'll update my post to show you what I have I'm still getting the same type error, even with the added brackets

NullVoxPopuli Over a year ago

I see that it works here: jsfiddle.net/MMCSR So I guess I just need to mess with my selectors until I get it right.

|

SideFX · Accepted Answer · 2010-08-24 19:39:42Z

0

Could you use

var serializedListItems = $("li").serializeArray();

answered Aug 24, 2010 at 19:39

SideFX

8392 gold badges12 silver badges34 bronze badges

1 Comment

NullVoxPopuli Over a year ago

no, cause there are n sections, each having there own ul of items.

Collectives™ on Stack Overflow

jQuery: how do I construct a 2d Array?

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related