Banging my head against the wall on nested html array inputs

[TwitchBlade]

I'm working on a layout builder (VERY beta right now) using drag and drop and everything is working great except trying to submit the structure via array inputs. I've been trying for almost two days to get this array of inputs to submit correctly and I'm starting to feel like a crazy person doing the same thing over and over expecting different results so I thought I'd try and ask guys smarter than me for some help....haha

The first two levels seem to be fine, but when it gets to the 3rd level, the format isn't correct so the server side repeat doesn't work as expected for level 3 and on. I'm pretty sure I have the name="" structure correct, but I can't help think I'm missing something simple.

Here is the nested repeat structure in Wappler that generates the sortable layout containing the nested array of inputs.

<div id="layout" class="nested-sortables-1">
  <div class="nested-sortables draggable l1" data-level="l1" dmx-repeat:repeatl1="scApp.data.qCurrentPage.layout[0].l1">
    <%- await include('/partials/content/elements/element_buttons', Object.assign({}, locals)) %>
    <dmx-value id="varL1Index" dmx-bind:value="$index"></dmx-value>
    <input dmx-bind:id="'l1_'+l1_id" dmx-bind:name="'layout['+varL1Index.value+'][id]'" dmx-bind:value="l1_id+'|'+l1_element_id" type="hidden">
    <div class="nested-sortables draggable l2" data-level="l2" dmx-repeat:repeatl2="l2">
      <%- await include('/partials/content/elements/element_buttons', Object.assign({}, locals)) %>
      <dmx-value id="varL2Index" dmx-bind:value="$index"></dmx-value>
      <input dmx-bind:id="'l2_'+l2_id" dmx-bind:name="'layout['+varL1Index.value+'][l2]['+varL2Index.value+'][id]'" dmx-bind:value="l2_id+'|'+l2_element_id" type="hidden">
      <div class="nested-sortables draggable l3 row" data-level="l3" dmx-repeat:repeatl3="l3">
        <%- await include('/partials/content/elements/element_buttons', Object.assign({}, locals)) %>
        <dmx-value id="varL3Index" dmx-bind:value="$index"></dmx-value>
        <input dmx-bind:id="'l3_'+l3_id" dmx-bind:name="'layout['+varL1Index.value+'][l2]['+varL2Index.value+'][l3]['+varL3Index.value+'][id]'" dmx-bind:value="l3_id+'|'+l3_element_id" type="hidden">
        <div class="draggable l4 col-md-2" data-level="l4" dmx-repeat:repeatl4="l4">
          <%- await include('/partials/content/elements/element_buttons', Object.assign({}, locals)) %>
          <dmx-value id="varL4Index" dmx-bind:value="$index"></dmx-value>
          <input dmx-bind:id="'l4_'+l4_id" dmx-bind:name="'layout['+varL1Index.value+'][l2]['+varL2Index.value+'][l3]['+varL3Index.value+'][l4]['+varL4Index.value+'][id]'" dmx-bind:value="l4_id+'|'+l4_element_id" type="hidden">
          <div class="nested-sortables-5" id="repeatl5" is="dmx-repeat" dmx-bind:repeat="l5">
            <div class="l5 draggable">
              <%- await include('/partials/content/elements/element_buttons', Object.assign({}, locals)) %>
              <dmx-value id="varL5Index" dmx-bind:value="$index"></dmx-value>
              <input dmx-bind:id="'l5_'+l5_id" dmx-bind:name="'layout['+varL1Index.value+'][l2]['+varL2Index.value+'][l3]['+varL3Index.value+'][l4]['+varL4Index.value+'][l5]['+varL5Index.value+'][id]'" dmx-bind:value="l5_id+'|'+l5_element_id" type="hidden">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

Here is what the submited layout array looks like in the console payload.

layout[0][id]: 1|1
layout[0][l2][0][id]: 2|3
layout[0][l2][0][l3][0][id]: 3|4
layout[0][l2][0][l3][0][l4][0][id]: 3|5
layout[0][l2][0][l3][0][l4][0][l5][0][id]: 3|9
layout[0][l2][0][l3][1][id]: 1|4
layout[0][l2][0][l3][1][l4][0][id]: 1|5
layout[0][l2][0][l3][1][l4][0][l5][0][id]: 1|7
layout[0][l2][0][l3][2][id]: 2|4
layout[0][l2][0][l3][2][l4][0][id]: 2|5
layout[0][l2][0][l3][2][l4][0][l5][0][id]: 2|8
layout[0][l2][1][id]: 1|2

If I output the $_POST.layout I get this in the console preview. Brackets are appearing around the 3rd level and on keys where as you can see the correct way is like level 2 (l2) where there are no brackets.

[
    {
        "id": "1|1",
        "l2": [
            {
                "id": "2|3",
                "l3": [
                    {
                        "[id]": "3|4",
                        "[l4][0][id]": "3|5",
                        "[l4][0][l5][0][id]": "3|9"
                    },
                    {
                        "[id]": "1|4",
                        "[l4][0][id]": "1|5",
                        "[l4][0][l5][0][id]": "1|7"
                    },
                    {
                        "[id]": "2|4",
                        "[l4][0][id]": "2|5",
                        "[l4][0][l5][0][id]": "2|8"
                    }
                ]
            },
            {
                "id": "1|2"
            }
        ]
    }
]

This is what the rendered layout generated by the front end repeats looks like. (Again very beta the info on the components is for testing purposes don't judge the ugliness haha)

Any help would be GREATLY appeciated.

-Twitch

[TwitchBlade]

Well, I needed to move on so I ended up writing a custom javascript function to parse the structure and then serialized the array to send as the value in a textarea on submit and then unserialized back into an array on the server side into the proper array.
Not ideal but works.

-Twitch

[Apple]

You're a madlad for trying to build such within Wappler. You have a lot of free time

A project of such complexity you're prone to run into edge-case bugs like this one, apparently

[TwitchBlade]

haha, once I got past the array issue, it's been smooth sailing so far. The custom javascript is actually working out better and gives me more flexibility. I wish I had lots of free time, I'm currently working on this at 2:30 am cause I couldn't sleep with code swirling in my head like "oh you know what you could do" or "you should add this, but better get up so you don't forget"

I'll post again when I get it too a useable state.

-Twitch

[Apple]

[Hyperbytes]

Lol,thats my life!