[solved] Create nested JSON in Fusion


(Pascal Folleher) #1

Hi,
we tried to create a Slider based on slick.js. But we have some issues creating the (nested) json to configure slick.

Here is an example what the result should look like (taken from our monocle styleguide):

slickConfiguration = '{ "slidesToShow": 5,                                   

                                "responsive": [
                                    {
                                        "breakpoint": 1920,
                                        "settings": {
                                            "slidesToShow": 4,
                                            "slidesToScroll": 1,                                              
                                        }
                                    },
                                    {
                                        "breakpoint": 1366,
                                        "settings": {
                                            "slidesToShow": 3,
                                            "slidesToScroll": 1,                                            
                                        }
                                    },
                                    {
                                        "breakpoint": 1024,
                                        "settings": {
                                            "slidesToShow": 2,
                                            "slidesToScroll": 1,                                               
                                        }
                                    },
                                    {
                                        "breakpoint": 768,
                                        "settings": {
                                            "slidesToShow": 1,
                                            "slidesToScroll": 1,                                              
                                        }
                                    }
                                ]}'

We made several attempts mixing Neos.Fusion:DataStructure and Neos.Fusion:Join that more or less failed. How could we create the json using fusion (Neos 4.2)?


(Peter Rauber) #2

Did you use the Eel-Helper Json.stringify to process the result?

I use (in Neos 3.x):

json = Neos.Fusion:RawArray {
    @process.json = ${Json.stringify(value)}
    key = 'value'
    ...
}

Which I expect to work the same in Neos 4.x with Neos.Fusion:DataStructure instead of RawArray.


(Pascal Folleher) #3

We used Json.Stringify before assigning the json configuration as a data-attribute. Probably should have posted our last failed attempt as well…

prototype(MyPackage:Content.Slider) < prototype(Neos.Neos:ContentComponent) {
renderer = MyPackage:Components.Molecule.Slider {

#        test = ${q(node)}
#        test.@process.debug = Neos.Fusion:Debug{
#            title = 'whatever'
#        }

    nodeName = ${q(node).property('_name')}

    @context.slickConfigurationDataStructure = Neos.Fusion:DataStructure {
        responsive = Neos.Fusion:DataStructure {
            smBreakpointSettings = Neos.Fusion:DataStructure {
                breakpoint = 368
                settings = Neos.Fusion:DataStructure {
                    slidesToShow    = ${q(node).property('smSlidesToShow')}
                    slidesToScroll  = ${q(node).property('smSlidesToScroll')}
                    dots            = ${q(node).property('showDots')}
                    prevArrow       = ${'.' + q(node).property('_name') + '-prev-js"'}
                    nextArrow       = ${'.' + q(node).property('_name') + '-next-js"'}
                    z-index         = 999
                }
            }
            mdBreakpointSettings = Neos.Fusion:DataStructure {
                breakpoint = 768
                settings = Neos.Fusion:DataStructure {
                    slidesToShow    = ${q(node).property('smSlidesToShow')}
                    slidesToScroll  = ${q(node).property('smSlidesToScroll')}
                    dots            = ${q(node).property('showDots')}
                    prevArrow       = ${'.' + q(node).property('_name') + '-prev-js"'}
                    nextArrow       = ${'.' + q(node).property('_name') + '-next-js"'}
                    z-index         = 999
                }
            }
            lgBreakpointSettings = Neos.Fusion:DataStructure {
                breakpoint = 1024
                settings = Neos.Fusion:DataStructure {
                    slidesToShow    = ${q(node).property('smSlidesToShow')}
                    slidesToScroll  = ${q(node).property('smSlidesToScroll')}
                    dots            = ${q(node).property('showDots')}
                    prevArrow       = ${'.' + q(node).property('_name') + '-prev-js"'}
                    nextArrow       = ${'.' + q(node).property('_name') + '-next-js"'}
                    z-index         = 999
                }
            }
        }
        slidesToShow        = ${q(node).property('slidesToShow') ? q(node).property('slidesToShow') : ''}
}


    slides = Neos.Neos:ContentCollection {
        nodePath = 'slideritems'

        attributes {
            data-slick = ${Json.stringify(slickConfigurationDataStructure)}
            class = ${'molecule-slider'}
        }
    }
}
}

The result of the json stringify is:

  {
   "responsive":{
      "smBreakpointSettings":{
         "breakpoint":368,
         "settings":{
            "slidesToShow":1,
            "slidesToScroll":1,
            "dots":true,
            "prevArrow":".node-1tscywo7rigsu-prev-js\"",
            "nextArrow":".node-1tscywo7rigsu-next-js\"",
            "z-index":999
         }
      },
      "mdBreakpointSettings":{
         "breakpoint":768,
         "settings":{
            "slidesToShow":1,
            "slidesToScroll":1,
            "dots":true,
            "prevArrow":".node-1tscywo7rigsu-prev-js\"",
            "nextArrow":".node-1tscywo7rigsu-next-js\"",
            "z-index":999
         }
      },
      "lgBreakpointSettings":{
         "breakpoint":1024,
         "settings":{
            "slidesToShow":1,
            "slidesToScroll":1,
            "dots":true,
            "prevArrow":".node-1tscywo7rigsu-prev-js\"",
            "nextArrow":".node-1tscywo7rigsu-next-js\"",
            "z-index":999
         }
      }
   },
 "slidesToShow":1
}

The value of the key responsive should be an array of objects like in my first post. I also have to remove the keys smBreakpointSettings, mdBreakpointSettings, lgBreakpointSettings from the json stringify result to get "responsive":[{...},{...},{...}] .


(Pascal Folleher) #4

We found the solution, I didn’t knew that in order to get what we want, the array keys have to be integer, in sequence starting from 0…

So this is the solution:

        @context.slickConfigurationDataStructure = Neos.Fusion:DataStructure {
        slidesToShow = ${q(node).property('slidesToShow') ? q(node).property('slidesToShow') : ''}
        responsive = Neos.Fusion:DataStructure {
            0 = Neos.Fusion:DataStructure {
                breakpoint = 368
                settings = Neos.Fusion:DataStructure {
                    slidesToShow    = ${q(node).property('smSlidesToShow')}
                    slidesToScroll  = ${q(node).property('smSlidesToScroll')}
                    dots            = ${q(node).property('showDots')}
                    prevArrow       = ${'.' + q(node).property('_name') + '-prev-js'}
                    nextArrow       = ${'.' + q(node).property('_name') + '-next-js'}
                    z-index         = 999
                }
            }
            1 = Neos.Fusion:DataStructure {
                breakpoint = 768
                settings = Neos.Fusion:DataStructure {
                    slidesToShow    = ${q(node).property('smSlidesToShow')}
                    slidesToScroll  = ${q(node).property('smSlidesToScroll')}
                    dots            = ${q(node).property('showDots')}
                    prevArrow       = ${'.' + q(node).property('_name') + '-prev-js'}
                    nextArrow       = ${'.' + q(node).property('_name') + '-next-js'}
                    z-index         = 999
                }
            }
            2 = Neos.Fusion:DataStructure {
                breakpoint = 1024
                settings = Neos.Fusion:DataStructure {
                    slidesToShow    = ${q(node).property('smSlidesToShow')}
                    slidesToScroll  = ${q(node).property('smSlidesToScroll')}
                    dots            = ${q(node).property('showDots')}
                    prevArrow       = ${'.' + q(node).property('_name') + '-prev-js'}
                    nextArrow       = ${'.' + q(node).property('_name') + '-next-js'}
                    z-index         = 999
                }
            }
        }
    }

(Christian Müller) #5

Just as a follow up. I think the content of the responsive key could/should be a Maping object. Basically you would map the “hardcoded” array of breakpoint numbers to a DataStructure. That will give you an numberical array which should cleanly stringify to JSON and reduces a lot of code duplication.