HTML to Javascript Multiple Nested Array Conversion

412
November 26, 2016, at 11:41 AM

I have following shortcode structure, that needs to be converted into a Javascript Array with jQuery.

[container bg="dark" color="#fff" title="abc"]
   [column type="one_fourth" bg="red"]
         [image a="1" b="2"]any shortcode[/image]
         [break xa="1" xb="2" xc="3"]any shortcode[/break]
   [/column]
   [column type="one_half" bg="green"]
         [video ab="1" cb="2"]any shortcode[/video]
   [/column]
   [column type="one_fourth" bg="blue"]
         [break xa="1" xb="2" xc="3"]any shortcode[/break]
   [/column]
[/container]

I want to convert this to a JS array. Upon clicking convert, it should return an array in the following format:

[container] => Array (
    [columns] => Array
        (
            [0] => stdClass Object
                (
                    [widgets] => Array
                        (
                            [0] => stdClass Object
                                (
                                    [a] => 1
                                    [b] => 2
                                    [widget-template] => image
                                )
                            [1] => stdClass Object
                                (
                                    [xa] => 1
                                    [xb] => 2
                                    [xc] => 3
                                    [widget-template] => break
                                )                                   
                        )
                    [column_settings] => stdClass Object
                        (
                            [bg] => red
                        )                           
                )
            [1] => stdClass Object (
                    [widgets] => Array
                        (
                            [0] => stdClass Object
                                (
                                    [ab] => 1
                                    [cb] => 2
                                    [widget-template] => video
                                )
                        )
                    [column_settings] => stdClass Object
                        (
                            [bg] => green
                        )                           
                )
            [2] => stdClass Object  (
                    [widgets] => Array
                        (
                            [0] => stdClass Object
                                (
                                    [xa] => 1
                                    [xb] => 2
                                    [xc] => 3
                                    [widget-template] => break
                                )
                        )
                    [column_settings] => stdClass Object
                        (
                            [bg] => blue
                        )                           
                )
        )
    [structure] => Array
        (
            [0] => one_fourth
            [1] => one_half
            [2] => one_fourth
        )
)
[settings] => stdClass Object
    (
        [bg] => dark
        [color] => #fff
        [title] => abc
    )

The [container] shortcode checks what column structure is inside, and also what variables/attributes are given to container and save them in "Settings". For anything within the [column] shortcode will be considered as "Widgets" and makes and array of all inner widgets within each [column] and also its attributes/variables. And the column variable/attributes will be saved as "column_settings" array.

Rent Charter Buses Company
READ ALSO
Fade in on load more button

Fade in on load more button

I have a simple function that shows 10 more table-rows on click but im struggling to get them to fade in, when the button is clicked I need the rows to fade in and not just the content inside is what I am only able to get to workThe row styles just appear...

260
CSS animation with jQuery Function has Delay Time

CSS animation with jQuery Function has Delay Time

I have a problem regarding the duration and responsiveness to click of the CSS transform animationThe problem is that upon first clicking the toggle, the animation responds to clicks and can be stopped mid-way allowing it to switch back and forth

401
Loader image not working on the safari device

Loader image not working on the safari device

Loader image not working on the safari device On clicking the search button, I am trying show a loader on my page before redirecting to the result pageThe loader image is populated only on the chrome browser and not on the safari browser

410
Passing data from an ejs page to a bootstrap modal

Passing data from an ejs page to a bootstrap modal

I'm currently trying to pass some data from an ejs page to a bootstrap modalI don't really see how to do this

370