JSFiddle - React, Tailwind, and code Playground

by Erik Bartlow

HTML

<h3>Enter the JSON Path Expression:</h3>

<div style="display:inline">
    <input type="text" style="width:200px;border: 1px solid #000000;" value="$.model.sections[*].id" id="expression" />
    <input id="btn" type="button" style="width: 80px" value="Go" />
</div>
<div id="results" style="border: 1px solid #000000;min-height: 200px; max-width: 300px;margin-top: 5px;"></div>

JavaScript

var model = {
    "model": {
        "id": "0",
            "Name": "New Value Chain",
            "Published": "false",
            "DateUpdated": Date(),
            "Owner": {
            "Name": "",
                "Email": ""
        },
            "sections": [{
            "id": "0",
                "Name": "New Section",
                "Parent": "0",
                "Siblings": {
                "before": "0",
                    "after": "0"
            },
                "Color": "tan",
                "posLeft": "0",
                "posWidth": "200"
        }],
            "rows": [{
            "id": "1",
                "Name": "Value Chain Relationship",
                "Type": "time",
                "Parent": "1",
                "Siblings": {
                "before": "0",
                    "after": "2"
            },
                "rows": [],
                "elements": []
        }, {
            "id": "2",
                "Name": "Business Process Area",
                "Type": "area",
                "Parent": "1",
                "Siblings": {
                "before": "1",
                    "after": "3"
            },
                "rows": [],
                "elements": [{
                "id": "1",
                    "Name": "Vision / Strategy",
                    "Type": "base",
                    "Parent": "2",
                    "Siblings": {
                    "before": "0",
                        "after": "2"
                },
                    "StartGroup": "true",
                    "EndGroup": "false"
            }, {
                "id": "2",
                    "Name": "Complete and Total Risk Management",
                    "Type": "base",
                    "Parent": "2",
                    "Siblings": {
                    "before": "1",
                        "after": "0"
                },
                    "StartGroup": "false",
                    "EndGroup": "true"
            }]
        }, {
 ...