Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2017
    Thanked 0 Times in 0 Posts

    Question Which way? Display & hopefully Data Bind XML and/ or JSON as Collapsible Item/ Panel?

    Which way to go - Display & hopefully Data Bind XML and/ or JSON as Collapsible Items/ Panels?

    I was able to use some memory of 10+ year old knowledge (been a decade since I coded for work) of XSLT from Enterprise XML days to render a variation of this XML in a (top to bottom) HTML table to organize things:

    - xslt - Render SpringBoard plist XML in Tabular Layout with correct fields & numbering/ count - Stack Overflow

    Now, before I go on SO troubling people how to do this without any coding effort, I wanted to be heading in the right direction/ approach for this and take the path of least resistance.


    What I'd really like is:

    - To display Horizontally across the screen, as Collapsible items / Panels / Cards the various levels of Data (XML and/ or JSON - I can easily convert between them using XMLSpy)
    -- [Page 1] [Page 2]... [Page N]
    --- Arrange Folders / Items under each collapsible Page (*vertically* or as an X-Rows x Y-columns grid)

    - Bonus: To have it Data Bind so any changes reflect back on the data
    -- Even better, if I can drag & drop/ edit/ move the items to re-organize, which reflect back on the data
    ---- I believe this part might restrict or shortlist the paths I can take? Thoughts?


    There are too many JS frameworks, libraries, mechanisms, MVC/ Patterns & varieties of pieces of JSfiddle examples around this and I believe if set on the right path I should be able to assemble things.

    But, since this is an experimental thing, I'd like to minimize "lost in space" time.

    - What architecture, framework, direction, (& programming lang/ framework - if other than js/ javascript) would you recommend for this?
    - Is there a better place to be asking this?

    PS: These are screenshots of the 100+ tabs I've opened/ read for this and I am more confused by the alternative paths a person can take .

    All Tabs: MVC, Div vs Table, JS Frameworks, Collapsible Panels, Nested, Databind, XML, JSON
    [![All Tabs: MVC, Div vs Table, JS Frameworks, Collapsible Panels, Nested, Databind, XML, JSON][1]][1]

    [1]: https://i.stack.imgur.com/vXaAw.jpg

  2. #2
    Regular Coder
    Join Date
    Oct 2014
    Thanked 84 Times in 83 Posts
    First and foremost I recommend using JSON because it's already native JavaScript. It's just really easy to consume and easy to read so I recommend it if it's an easy option.

    Aside from that, this is not exactly a small undertaking. If you want two-way binding you're probably best off using a kind of beefy framework but it will have a ton of extra stuff you don't need. One trick I like to use is to simply take data as an JS object and fill an HTML form with it. Then on the form's "onChange" event I update the entire object by serializing the form into a new JS object and replacing it. That's slightly ham-fisted but it does give you the effect you want because you can then convert the JS object into a JSON string and send it to a server to actually update the data.

    That won't work with a complex object that has sub-objects with their own properties unless you implement some specific code to re-create those objects; it works best for a simple object that just has a bunch of structs (numbers, strings and booleans) as its properties.

    In terms of one-way binding for display purposes you could use something like mustache.js, which I've always really liked for its relative simplicity. It's hard to recommend something because I'm not quite understanding what type of data you have and thus what would make the most sense in terms of how to present it.
    I almost always format my code examples with [php][/php] tags because it looks nicer than the regular [code] tag. That does not mean the code example is in PHP.


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts