Tree Mount - JSTREE

Question

I was reading about Jstree and I saw that he understands a Json that can be placed in the tree without recursivity, that is, it needs the pattern id,parent,text in accordance with the documentation .

I created an auto-referenced table called Hipotese.

I rode a procedure return with the data from Hipotese Pai together with the data of Hipotese Filha.

  select H.IDHipotese as id ,  
case when (HPai.IDHipotese) is null then '#'
when @IDHipotese <> 0 then '#' 
 else  CAST(HPai.IDHipotese as varchar(4)) end as parent,H.HipoteseIncidencia as text
 from HipoteseIncidencia H
left join HipoteseIncidencia as HPai
on H.IDHipotesePai = HPai.IDHipotese
where 
(@IDHipotese = 0 or H.IDHipotese= @IDHipotese) AND
(@IDIdioma=0 or H.IDIdioma = @IDIdioma)
 order by parent,id

Table structure Hipótese.

The answer in the sequence of Ajax is as follows:

[
  {"id":"27","parent":"#","text":"Incidência Obrigatória"},
  {"id":"28","parent":"#","text":"Executar trabalho em regime de turnos ininterruptos de revezamento"},
  {"id":"30","parent":"#","text":"Executar trabalho em jornada de sobreaviso"},
  {"id":"33","parent":"28","text":"Trabalhar em ferrovias"},
  {"id":"35","parent":"27","text":"Utilizar sistemas alternativos eletrônicos de marcação do ponto"}
]

Someone can help me. Nothing happens, no Javascript error on console has.

HTML:

<div id="tree">
</div>

Asmx:

[WebMethod]
public string retornaJsonArvore()
{
  List<retornaListaHipotese_Result> lst = null;
  using (labEntities entidades = new labEntities())
  {
    lst = entidades.retornaListaHipotese().ToList();
  }
  var serializer = new JavaScriptSerializer();
  string json = serializer.Serialize(lst);
  return json;
}

My Jquery function that fills the tree:

$(function () {
  $.ajax({
    type: "POST",
    url: '<%=ResolveUrl("../ws/Arvore.asmx/retornaJsonArvore")%>',
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (json) {
      createJSTrees(json.d);
    },
    error: function (xhr, ajaxOptions, thrownError) {
      alert(xhr.status);
      alert(thrownError);
    }
  });
});

function createJSTrees(jsonData) {
  $("#tree").jstree({
    "data": jsonData
  });
}

Answer 1

According to the documentation, the option data should not be placed directly in the option object, but within the option core:

var jsonData = [
  {"id":"27","parent":"#","text":"Incidência Obrigatória"},
  {"id":"28","parent":"#","text":"Executar trabalho em regime de turnos ininterruptos de revezamento"},
  {"id":"30","parent":"#","text":"Executar trabalho em jornada de sobreaviso"},
  {"id":"33","parent":"28","text":"Trabalhar em ferrovias"},
  {"id":"35","parent":"27","text":"Utilizar sistemas alternativos eletrônicos de marcação do ponto"}
];

$("#tree").jstree({
    core:{
        "data": jsonData
    }
});

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

<div id="tree">
</div>