0

I have the following jquery code:

$('.menubox').children('div').toArray().map(function(n,i){
            return [$(n).children('input').val(),$(n).children('.subs').children('div').toArray().map(function(n,i){ 
                    return [$(n).children('input').val(),$(n).children('.subs').children('div').toArray().map(function(n,i){ 
                            return $(n).children('input').val(); 
                        })];
                })];
        });

This is the HTML to go with that:

        <td class="menubox">
        <div class="draggable droppable lvl0">
            <input type="hidden" value="-" />
            LBL1
            <div class="subs"></div>
        </div>
        <div class="draggable droppable lvl0">
            <input type="hidden" value="-" />
            LBL2
            <div class="subs">                  
                <div class="draggable droppable lvl1">
                    <input type="hidden" value="3" />
                    <b>LBL2.1</b><span style="display:block;"><a class="deleteItem">verwijder</a></span>
                    <div class="subs"></div>
                </div>                  

                <div class="draggable droppable lvl1">
                    <input type="hidden" value="6" />
                    <b>LBL2.2</b><span style="display:block;"><a class="deleteItem">verwijder</a></span>
                    <div class="subs"></div>
                </div>                  
            </div>
        </div>
    </td>

It works fine in chrome but IE throws an error:

Error: Object doesn't support this property or method

When I remove the map() function, the error is gone. What am I doing wronge here?

3
  • BTW, what is the goal of all this .map()ing? I'm guessing there's a much simpler way to get what you want.
    – Matt Ball
    Jun 16, 2011 at 12:47
  • I need to end up with an array with the id's (input.val()) and structure. something like: [['-'],['-',[['5'],['6']]]] given the html above
    – ubes
    Jun 16, 2011 at 12:56
  • As it is right now, the above code returns an array like [["-",[]],["-",[["3",[]],["6",[]]]]], not like the one in your comment.
    – Matt Ball
    Jun 16, 2011 at 13:48

1 Answer 1

1

What am I doing wronge here?

Calling .toArray() on a jQuery object. Remove those calls, and add .get() after .map() if you want to end up with a vanilla JS array. Note that jQuery's .map() callback takes index, element while Array.map's callback takes element, index so you also need to swap the argument names.

var results = $('.menubox').children('div').map(function(i, n)
{
    return [
        $(n).children('input').val(),
        $(n).children('.subs').children('div').map(function(i, n)
        {
            return [
                $(n).children('input').val(),
                $(n).children('.subs').children('div').map(function(i, n)
                {
                    return $(n).children('input').val();
                }).get()
            ];
        }).get()
    ];
}).get();

console.log(JSON.stringify(results));
// ["-",[],"-",["3",[],"6",[]]]

This works in Chrome but not IE since Chrome supports Array.map() but (surprise, surprise) IE <9 do not.

Demo: http://jsfiddle.net/mattball/5KBdA/

2
  • No worries. You can always come back later when you've got the rep if you feel that strongly about it.
    – Matt Ball
    Jun 16, 2011 at 15:00
  • Call me crazy, but you wrote a solution but then said it still doesn't work in IE8/9. Was there a workaround for the no-map in IE8/9 problem? Looks like you can use the jquery version: api.jquery.com/jQuery.map
    – Kevin
    Jul 4, 2012 at 21:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.