Generate Json access levels with jsTree

Question

I am creating the Front End for an application that will have access levels. I found a library called jstree, but I'm having a hard time getting the checkboxes that have been marked or not, I'll post the code for an example here.

I would like that when I click on the save button, generate this json output, as it will be sent in an ajax request.

{
"globais": [
    {
        "Empresas": [
            {"read": true},
            {"create": false},
            {"update": true},
            {"delete": false}
        ]
    },
    {
        "filiais": [
            {"read": true},
            {"create": false},
            {"update": false},
            {"delete": false}
        ]
    }
],
"financeiro": [
    {
        "fornecedores": [
            {"read": true},
            {"create": true},
            {"update": true},
            {"delete": true}
        ]
    },
    {
        "lancamentos": [
            {"read": true},
            {"create": false},
            {"update": false},
            {"delete": false}
        ]
    }
  ]
}

$(function() {

  $('#jstree').jstree({
    "plugins": ["checkbox"]
  }).bind("loaded.jstree", function(event, data) {
    // you get two params - event & data - check the core docs for a detailed description
    $(this).jstree("open_all");
  })

});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

<div id="jstree">
  <ul>
    <li data-jstree='{"opened":true}'>Root
      <ul>
        <li>Globais
          <ul>
            <li>Empresas
              <ul>
                <li data-jstree='{"selected":true}'>Read</li>
                <li>Create</li>
                <li data-jstree='{"selected":true}'>Update</li>
                <li>Delete</li>
              </ul>
            </li>
            <li>Filiais
              <ul>
                <li data-jstree='{"selected":true}'>Read</li>
                <li>Create</li>
                <li>Update</li>
                <li>Delete</li>
              </ul>
            </li>
          </ul>
        </li>
        <li>Financeiro
          <ul>
            <li>Fornecedores
              <ul>
                <li data-jstree='{"selected":true}'>Read</li>
                <li data-jstree='{"selected":true}'>Create</li>
                <li data-jstree='{"selected":true}'>Update</li>
                <li data-jstree='{"selected":true}'>Delete</li>
              </ul>
            </li>
            <li>Lançamentos
              <ul>
                <li data-jstree='{"selected":true}'>Read</li>
                <li>Create</li>
                <li>Update</li>
                <li>Delete</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

<button type="button">Salvar</button>

Answer 1

jsTree provides a get_checked function on the tree instance which returns a list of checked nodes as an array of node id's. You can use this list along with the tree's json representation returned by the get_json function to parse the structure into a JSON similar to the one in your question.

<button type="button" onclick="getSelected()">Salvar</button>

function getChild(node, target, sel) {
    var label = node.text.trim();
    if (node.children.length > 0) {
        target[label] = {};
        node.children.forEach(function (n) {
            getChild(n, target[label], sel);
        });
    } else {
        target[label] = !!(sel.indexOf(node.id) >=0);
    }
}

function getSelected() {
    var aSel = $('#jstree').jstree(true).get_checked();
    var aNodes = $('#jstree').jstree(true).get_json();
    var oJSON = {}
    getChild(aNodes[0], oJSON, aSel);

    console.log(oJSON);
}

This will create a JSON structure similar to the one below

{
  "Root": {
    "Globais": {
      "Empresas": {
        "Read": true,
        "Create": false,
        "Update": true,
        "Delete": false
      },
      "Filiais": {
        "Read": true,
        "Create": false,
        "Update": false,
        "Delete": false
      }
    },
    "Financeiro": {
      "Fornecedores": {
        "Read": true,
        "Create": true,
        "Update": true,
        "Delete": true
      },
      "Lançamentos": {
        "Read": true,
        "Create": false,
        "Update": false,
        "Delete": false
      }
    }
  }
}