Add an array to an array to an array during each() loop

Question

I run numerous .each() loops inside one another like so:

var my_array = [];
$(".btn-submit").click(function(e) {
    e.preventDefault();
    $(".tab-pane").each(function() {
        // add .tab-pane IDs to my_array
        $(this).find(".connected").each(function() {
            // add .connected IDs to tab-pane array
            $(this).find(".ui-state-default").each(function() {
                // add .ui-state-default IDs to connected array
            });
        });
    });
    $("input[name=my_array").val() = my_array;
    $(this).closest("form").submit();
});

Within every .each(), I would like to add the ID of elements to my_array, ending up with arrays nested inside arrays nested inside arrays, and leaving me with one final variable, nested like so:

Pseudo Code

my_array (
    tab_pane (
        connected (
            ui-state-default
            ui-state-default
            ui-state-default
        )
        connected (
            ui-state-default
            ui-state-default
            ui-state-default
        )
        connected (
            ui-state-default
            ui-state-default
            ui-state-default
        )
    )
    tab_pane (
        connected (
            ui-state-default
            ui-state-default
            ui-state-default
        )
        connected (
            ui-state-default
            ui-state-default
            ui-state-default
        )
        connected (
            ui-state-default
            ui-state-default
            ui-state-default
        )
    )
    tab_pane (
        connected (
            ui-state-default
            ui-state-default
            ui-state-default
        )
        connected (
            ui-state-default
            ui-state-default
            ui-state-default
        )
        connected (
            ui-state-default
            ui-state-default
            ui-state-default
        )
    )
)

How can I go about this?

A further, basic example to maybe clarify things.

Consider the following page structure.

<div class="tab-pane" id="A">
    <ul class="connected" id="1">
        <li class="ui-state-default" id="101"></li>
        <li class="ui-state-default" id="102"></li>
        <li class="ui-state-default" id="103"></li>
    </ul>
    <ul class="connected" id="2">
        <li class="ui-state-default" id="104"></li>
        <li class="ui-state-default" id="105"></li>
        <li class="ui-state-default" id="106"></li>
    </ul>
    <ul class="connected" id="3">
        <li class="ui-state-default" id="107"></li>
        <li class="ui-state-default" id="108"></li>
        <li class="ui-state-default" id="109"></li>
    </ul>
</div>
<div class="tab-pane" id="B">
    <ul class="connected" id="4">
        <li class="ui-state-default" id="110"></li>
        <li class="ui-state-default" id="111"></li>
        <li class="ui-state-default" id="112"></li>
    </ul>
    <ul class="connected" id="5">
        <li class="ui-state-default" id="113"></li>
        <li class="ui-state-default" id="114"></li>
        <li class="ui-state-default" id="115"></li>
    </ul>
    <ul class="connected" id="6">
        <li class="ui-state-default" id="116"></li>
        <li class="ui-state-default" id="117"></li>
        <li class="ui-state-default" id="118"></li>
    </ul>
</div>
<div class="tab-pane" id="C">
    <ul class="connected" id="7">
        <li class="ui-state-default" id="119"></li>
        <li class="ui-state-default" id="120"></li>
        <li class="ui-state-default" id="121"></li>
    </ul>
    <ul class="connected" id="8">
        <li class="ui-state-default" id="122"></li>
        <li class="ui-state-default" id="123"></li>
        <li class="ui-state-default" id="124"></li>
    </ul>
    <ul class="connected" id="9">
        <li class="ui-state-default" id="125"></li>
        <li class="ui-state-default" id="126"></li>
        <li class="ui-state-default" id="127"></li>
    </ul>
</div>

I need to create an array that looks like so, when I submit the form, so I can POST it through via a hidden input:

my_array = array(
    "#A" => array(
        "#1" => array (
            "#101", "#102", "#103"
        )
        "#2" => array(
            "#104", "#105", "#106"
        )
        "#3" => array(
            "#107", "#108", "#109"
        )
    )
    "#B" => array (
        ...
    )
)

It looks like you want to index on the element IDs; if so you'll want nested objects, not arrays. If not, can you show some sample HTML and the resulting JS array (not parenthesized pseudocode) you'd like to see as a result? — Paul Roub
– Paul Roub, Commented Oct 26, 2015 at 16:56
This is my HTML code as it stands now: jsfiddle.net/h4wdv2nw Once the left-hand elements are dragged in to place, submitting the form needs to save the IDs of every .ui-state-default element within an array of the IDs of every .connected element within an array of the IDs of every .tab-pane element... if that makes any sense? — mpdc
– mpdc, Commented Oct 26, 2015 at 17:03
Basically, I need to POST every ID on the page to a PHP script, exactly as they're nested within the HTML structure, so that I can extract the order/nesting and save to a database. I assumed arrays within arrays would be the easiest way to do this. — mpdc
– mpdc, Commented Oct 26, 2015 at 17:06
in js array index from 0. Also can you provide sample for B? it should be 4=> array(...),5=>array()... or somthing else? — Grundy
– Grundy, Commented Oct 26, 2015 at 17:19
Yes, B will follow exactly the same nesting structure as A, etc. — mpdc
– mpdc, Commented Oct 26, 2015 at 17:22

somethinghere · Accepted Answer · 2015-10-27 10:53:25Z

Heres an easy way to do it:

function getSelectTree(selection, root){
    root = root || document;
    var result = {};
    for(var i = 0, r = root.querySelectorAll(selection[0]); i <  r.length; i++){
        if(r.item(i).id){
           result[r.item(i).id] = getSelectTree(selection.slice(1), r.item(i));
           result[r.item(i).id]['_'] = r.item(i);
       }
    }
    return result;
}

Just simply invoke it with the order you want to drill down with:

getSelectTree(['.tab-pane','li'])

And you will get back an Object where the keys are the Ids and the item itself in _ - you can ommit that by removing the result[r.item(i).id]['_'] = r.item(i); line.

function getSelectTree(selection, root){
    root = root || document;
    var result = {};
    for(var i = 0, r = root.querySelectorAll(selection[0]); i <  r.length; i++){
        if(r.item(i).id){
            result[r.item(i).id] = getSelectTree(selection.slice(1), r.item(i)) || [];
            result[r.item(i).id]['_'] = r.item(i);
        }
    }
    return result;
}

var result = getSelectTree(['.tab-pane','.connected','li']);
console.log(result);
document.write(JSON.stringify(result));

div { display: none; }
body { font-family: monospace; }

<div class="tab-pane" id="A">
    <ul class="connected" id="1">
        <li class="ui-state-default" id="101"></li>
        <li class="ui-state-default" id="102"></li>
        <li class="ui-state-default" id="103"></li>
    </ul>
    <ul class="connected" id="2">
        <li class="ui-state-default" id="104"></li>
        <li class="ui-state-default" id="105"></li>
        <li class="ui-state-default" id="106"></li>
    </ul>
    <ul class="connected" id="3">
        <li class="ui-state-default" id="107"></li>
        <li class="ui-state-default" id="108"></li>
        <li class="ui-state-default" id="109"></li>
    </ul>
</div>
<div class="tab-pane" id="B">
    <ul class="connected" id="4">
        <li class="ui-state-default" id="110"></li>
        <li class="ui-state-default" id="111"></li>
        <li class="ui-state-default" id="112"></li>
    </ul>
    <ul class="connected" id="5">
        <li class="ui-state-default" id="113"></li>
        <li class="ui-state-default" id="114"></li>
        <li class="ui-state-default" id="115"></li>
    </ul>
    <ul class="connected" id="6">
        <li class="ui-state-default" id="116"></li>
        <li class="ui-state-default" id="117"></li>
        <li class="ui-state-default" id="118"></li>
    </ul>
</div>
<div class="tab-pane" id="C">
    <ul class="connected" id="7">
        <li class="ui-state-default" id="119"></li>
        <li class="ui-state-default" id="120"></li>
        <li class="ui-state-default" id="121"></li>
    </ul>
    <ul class="connected" id="8">
        <li class="ui-state-default" id="122"></li>
        <li class="ui-state-default" id="123"></li>
        <li class="ui-state-default" id="124"></li>
    </ul>
    <ul class="connected" id="9">
        <li class="ui-state-default" id="125"></li>
        <li class="ui-state-default" id="126"></li>
        <li class="ui-state-default" id="127"></li>
    </ul>
</div>

Update: Maintaining the order

Instead of storing the elements in an object with the ID being the key, we will make it an array with nested objects that, in turn, will have an array of children. This means the order is maintained:

function getSelectTree(selection, root){
    root = root || document;
    var result = [];
    for(var i = 0, r = root.querySelectorAll(selection[0]); i <  r.length; i++){
        if(r.item(i).id){
            result.push({
                id: r.item(i).id,
                item: r.item(i),
                children: getSelectTree(selection.slice(1), r.item(i)),
            });
        }
    }
    return result;
}


var result = getSelectTree(['.tab-pane','.connected','li']);
console.log(result);
document.write(JSON.stringify(result));

ul { display: none; }

<div class="tab-pane" id="A">
        <ul class="connected" id="1">
            <li class="ui-state-default" id="101"></li>
            <li class="ui-state-default" id="102"></li>
            <li class="ui-state-default" id="103"></li>
        </ul>
        <ul class="connected" id="2">
            <li class="ui-state-default" id="104"></li>
            <li class="ui-state-default" id="105"></li>
            <li class="ui-state-default" id="106"></li>
        </ul>
        <ul class="connected" id="3">
            <li class="ui-state-default" id="107"></li>
            <li class="ui-state-default" id="108"></li>
            <li class="ui-state-default" id="109"></li>
        </ul>
    </div>
    <div class="tab-pane" id="B">
        <ul class="connected" id="4">
            <li class="ui-state-default" id="110"></li>
            <li class="ui-state-default" id="111"></li>
            <li class="ui-state-default" id="112"></li>
        </ul>
        <ul class="connected" id="5">
            <li class="ui-state-default" id="113"></li>
            <li class="ui-state-default" id="114"></li>
            <li class="ui-state-default" id="115"></li>
        </ul>
        <ul class="connected" id="6">
            <li class="ui-state-default" id="116"></li>
            <li class="ui-state-default" id="117"></li>
            <li class="ui-state-default" id="118"></li>
        </ul>
    </div>
    <div class="tab-pane" id="C">
        <ul class="connected" id="7">
            <li class="ui-state-default" id="119"></li>
            <li class="ui-state-default" id="120"></li>
            <li class="ui-state-default" id="121"></li>
        </ul>
        <ul class="connected" id="8">
            <li class="ui-state-default" id="122"></li>
            <li class="ui-state-default" id="123"></li>
            <li class="ui-state-default" id="124"></li>
        </ul>
        <ul class="connected" id="9">
            <li class="ui-state-default" id="125"></li>
            <li class="ui-state-default" id="126"></li>
            <li class="ui-state-default" id="127"></li>
        </ul>
    </div>

Looking in my console, I get an Object with the desired structure - thank you. However, my Javascript is novice at best - how do I get the data stored within this Object into a variable, so I can post it via the form?
You can use my snippets (just amended) JSON.stringify() function to turn this into a string (the output of my snippet is a string) and then post it with the POST data of your form. On the server end you can decipher it using php's json_decode($data, true);
When I var_dump(json_decode($_POST['my_array'], true)); on the script, the arrays are sorted by key order - as they're the IDs. Can I get the li IDs in to the values, instead, so I can keep the order displayed on the page?
@mpdc I have updated my post to, instead of using an object with key values, it will use arrays that you can loop through with the objects in order and the children tucked away in a children array inside every object. Check it out, its only a slight modification.

charlietfl · Accepted Answer · 2015-10-26 17:38:40Z

1

Something like this would get you started

var data = []; // final data array

$(".tab-pane").each(function () {
    var paneObj = createElObj(this);
    data.push(paneObj);   
    $(this).find(".connected").each(function () {
        var listObj = createElObj(this);
        paneObj.children.push(listObj);        
        $(this).find(".ui-state-default").each(function () {
            listObj.children.push(createElObj(this));            
        });
    });
});    


function createElObj(el) {
    return {
        id: el.id,
        tag: el.tagName,
        cls: $(el).attr('class'),
        children: []
    }    
}

Could be easily adapted to be more recursive if you need more depth

DEMO

edited Oct 26, 2015 at 17:38

answered Oct 26, 2015 at 17:27

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Collectives™ on Stack Overflow

Add an array to an array to an array during each() loop

2 Answers 2

Update: Maintaining the order

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update: Maintaining the order

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related