Create JSON on HTML basis and vice-versa

Question

I have hierarchical structure of <select>/<input> based elements, which can be formed into (logical) groups. In other words, i have logical-tree where every node represented by (three) <select>/<input> .

Here is how HTML looks like (all extra elements like buttons deleted):

<div class="conditions-group logical-or">

<div class="conditions">

    <div class="conditions-group logical-and">

        <div class="conditions">

            <div class="condition row">
                <div class="metric">
                    <select class="form-control"></select>
                </div>
                <div class="operator">
                    <select class="form-control "></select>
                </div>
                <div class="value">
                    <input value="" class="form-control">
                </div>
            </div>

            <div class="condition row">
                <div class="metric">
                    <select class="form-control"></select>
                </div>
                <div class="operator">
                    <select class="form-control "></select>
                </div>
                <div class="value">
                    <input value="" class="form-control">
                </div>
            </div>

        </div>

        <div class="condition row">
            <div class="metric">
                <select class="form-control"></select>
            </div>
            <div class="operator">
                <select class="form-control "></select>
            </div>
            <div class="value">
                <input value="" class="form-control">
            </div>
        </div>

    </div>
</div>

My aplication is C# ASP-NET MVC. I use bootstrap to make this looking good. And i have some JS-logic for creating this by user. This HTML-code is just example that created by me.

I need to store this structre and be able to build HTML back from stored data (so user can comeback and see his structure). So i understood that i need to use JSON to store.

Here is my questions: What is the better way to achive my goal? I need use some JS-library, right? Could you please make my clear practical advice what to use in this case and why.

Answer 1

You don't have to use JSON, but you do need to serialize it somehow. JSON can be a fairly clean method.

There are some libraries out there that will do this, but at a cursory glance, none of them seemed super well supported, so you might want to avoid.

In this case, it seems fairly straight and I would probably go with a more direct approach which you do it more or less by hand.

Starting with, since it looks like you have metric , operator , and value in each, I would start with those in your object:

{
  rows: [
    { metric: 'someValue', operator: 'someValue', value: 'someValue' },
    // .. more as necessary
  ]
}

I would build the object as a POJO (plain old JavaScript object) and then use JSON.stringify() to convert it to JSON.

With your data, you could basically just loop through and output your HTML:

function render(rows) {
  rows.forEach(({ metric, operator, value }) => {
     // create elements based on these value
  });
}

For saving the data, there are two approaches:

• parse the HTML and turn it into a JSON object after the fact
• keep the data as an object, update it, and then re-render the page based off of it

I prefer the second method. Instead of making HTML directly, have one data object and when you make changes, update that object and just call your render() method to re-render. This means you don't have to parse the HTML when you go to save.

It will also simplify the tool you mentioned to allow uses to add this, as all it'll have to do instead is rows.push({ metric: 'defaultValue', operator: 'defaultValue', value: 'defaultValue' }) .

The only other thing is to add an onChange() to each input. When they change, figure out which row it is (get the .row parent and figure out what index it is relative to its siblings, that'll be the same index for the rows object) and field (just get the class name) and then just update the appropriate value.

This kind of render-based-off-data is also what libraries like React, Angular and Vue do. Depending on your project, you may consider leveraging one of them to help with things as well (though if the project is small, its perfectly doable without).