Uncaught TypeError: Cannot set property 'nodeI

Question

I'm getting this error on boostrap-treeview.js:267 when retrieving JSON data for my boostrap-treeview.

$(document).ready(function() {
    $.ajax({ 
        url: "js/category_data.php",
        method:"POST",
        dataType: "json",            
        success: function(data) {
            $('#doctypesTree').treeview({ data: data });
        }    
    });
});

The JSON data is the following:

{
    "2":{
            "id":"12",
            "text":"Certified copy",
            "Description":"","root":"0"
        },
    "3":{
            "id":"13",
            "text":"Charter",
            "Description":"",
            "root":"0"
        },
    "4":{
            "id":"14",
            "text":"Codicil (will)",
            "Description":"",
            "root":"0"
        },
    "5":{
            "id":"15",
            "text":"Cohabitation agreement",
            "Description":"",
            "root":"0"
        },
    "6":{
            "id":"16",
            "text":"Collateral assurance",
            "Description":"",
            "root":"0"
        },
    "7":{
            "id":"17",
            "text":"Commercial invoice",
            "Description":"",
            "root":"0"
        },
    "8":{
            "id":"18",
            "text":"Complaint",
            "Description":"",
            "root":"0"
        },
    "9":{
            "id":"19",
            "text":"Conservation easement",
            "Description":"",
            "root":"0"
        },
    "10":{
            "id":"20",
            "text":"Consignee",
            "Description":"",
            "root":"0"
        },
    "11":{
            "id":"21",
            "text":"Consumer complaint",
            "Description":"",
            "root":"0"
        },
    "12":{
            "id":"22",
            "text":"Contract",
            "Description":"",
            "root":"0"
        },
    "13":{
            "id":"23",
            "text":"Contractual term",
            "Description":"",
            "root":"0"
        },
    "14":{
            "id":"24",
            "text":"Contractual terms in English law",
            "Description":"",
            "root":"0"
        },
    "15":{
            "id":"25",
            "text":"Florence Annie Conybeare",
            "Description":"",
            "root":"0"
        },
    "16":{
            "id":"26",
            "text":"Copyright transfer agreement",
            "Description":"",
            "root":"0"
        },
    "17":{
            "id":"27",
            "text":"Countersign (legal)",
            "Description":"",
            "root":"0"
        },
    "18":{
            "id":"28",
            "text":"County Court judgment",
            "Description":"",
            "root":"0"
        },
    "19":{
            "id":"29",
            "text":"Credit Support Annex",
            "Description":"",
            "root":"0"
        },
    "20":{
            "id":"30",
            "text":"Customs declaration",
            "Description":"",
            "root":"0"
        },
    "21":{
            "id":"31",
            "text":"Bills",
            "Description":"",
            "root":"0",
            "nodes":[
                        {
                            "id":"4",
                            "text":"Bill of costs",
                            "Description":"This type gather all documents related to costs","root":"31"
                        },
                        {
                            "id":"5",
                            "text":"Bill of sale",
                            "Description":"","root":"31"
                        }
                    ]
        } 
}

I am using Bootstrap Tree View

Any Ideas

Answer 1

Your json is an object. You'll have to convert it to an array for the tree to work. You can either change your php to return a proper array or use javascript to convert it to an array as shown below.

var data = {
  "2": {
    "id": "12",
    "text": "Certified copy",
    "Description": "",
    "root": "0"
  },
  "3": {
    "id": "13",
    "text": "Charter",
    "Description": "",
    "root": "0"
  },
  "4": {
    "id": "14",
    "text": "Codicil (will)",
    "Description": "",
    "root": "0"
  },
  "5": {
    "id": "15",
    "text": "Cohabitation agreement",
    "Description": "",
    "root": "0"
  },
  "6": {
    "id": "16",
    "text": "Collateral assurance",
    "Description": "",
    "root": "0"
  },
  "7": {
    "id": "17",
    "text": "Commercial invoice",
    "Description": "",
    "root": "0"
  },
  "8": {
    "id": "18",
    "text": "Complaint",
    "Description": "",
    "root": "0"
  },
  "9": {
    "id": "19",
    "text": "Conservation easement",
    "Description": "",
    "root": "0"
  },
  "10": {
    "id": "20",
    "text": "Consignee",
    "Description": "",
    "root": "0"
  },
  "11": {
    "id": "21",
    "text": "Consumer complaint",
    "Description": "",
    "root": "0"
  },
  "12": {
    "id": "22",
    "text": "Contract",
    "Description": "",
    "root": "0"
  },
  "13": {
    "id": "23",
    "text": "Contractual term",
    "Description": "",
    "root": "0"
  },
  "14": {
    "id": "24",
    "text": "Contractual terms in English law",
    "Description": "",
    "root": "0"
  },
  "15": {
    "id": "25",
    "text": "Florence Annie Conybeare",
    "Description": "",
    "root": "0"
  },
  "16": {
    "id": "26",
    "text": "Copyright transfer agreement",
    "Description": "",
    "root": "0"
  },
  "17": {
    "id": "27",
    "text": "Countersign (legal)",
    "Description": "",
    "root": "0"
  },
  "18": {
    "id": "28",
    "text": "County Court judgment",
    "Description": "",
    "root": "0"
  },
  "19": {
    "id": "29",
    "text": "Credit Support Annex",
    "Description": "",
    "root": "0"
  },
  "20": {
    "id": "30",
    "text": "Customs declaration",
    "Description": "",
    "root": "0"
  },
  "21": {
    "id": "31",
    "text": "Bills",
    "Description": "",
    "root": "0",
    "nodes": [{
      "id": "4",
      "text": "Bill of costs",
      "Description": "This type gather all documents related to costs",
      "root": "31"
    }, {
      "id": "5",
      "text": "Bill of sale",
      "Description": "",
      "root": "31"
    }]
  }
};

var dataArray = [];
for (var key in data) {
    if (data.hasOwnProperty(key)) {
        dataArray.push(data[key]);
    }
};

$('#tree').treeview({data: dataArray});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/jonmiles/bootstrap-treeview/master/dist/bootstrap-treeview.min.js"></script>
<div id="tree"></div>