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

[xbliss]

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:

• http://stackoverflow.com/questions/43761829/render-springboard-plist-xml-in-tabular-layout-with-correct-fields-numbering

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

[fretburner]

If you’ve got no preference or prior experience with any of the current JS frameworks, I’d recommend taking a look at VueJS for this. It even has a demo of a simple tree view implementation in the documentation, which might get you started in the right direction.

I think out of all of the current frameworks, Vue probably has the gentlest learning curve. As you can see from the demo, it’s also very easy to start prototyping components in a code playground like JSFiddle.