Error while populating bootstrap treeview from data retrieved using Ajax call

Question

I am using bootstrap treeview plugin (https://github.com/jonmiles/bootstrap-treeview). I am not sure if this is an issue with treeview plugin or the way i am implementing the code.I am trying to load the treeview using data from ajax call back. Here is the code sample that i am using:

<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 101 Template</title>
  <!-- Required Javascript -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="~/Content/BootStrap/bootstrap-treeview.js"></script>
</head>
<body>
  <div class="clear-fix"> </div>
  <div class="row">
    <div class="col-sm-2"><div id="lstCollections">This will display my list of all collections</div></div>
  </div>
</body>
</html>

<script type="text/javascript">
  function getTree(handleData) {
    $.ajax({
      type: "GET",
      url: '@Url.Action("Get","DatabaseSchema")',   
      dataType: 'json',
      success: function (response) {
        handleData(response);
      }
    });
  }

  $(document).ready(function () {
    getTree(function (output) {
    var collectionTree = [];

      output.forEach(function (a) {
        collectionTree.push({ text: a });
      });

      //var tree2 = [{ text: "Buyer" }, {text: "text1" }, { text: "text2" }, { text: "text3" }];


      $('#lstCollections').treeview({ data: collectionTree });
    });
  })

</script>

When I run the code, I don't see any data in my treeview. In my developer tool(for chrome browser), in console I see "Uncaught TypeError: $(...).treeview is not a function(…)" error on line " $('#lstCollections').treeview({ data: collectionTree });"

If i replace $('#lstCollections').treeview({ data: collectionTree });with $('#lstCollections').treeview({ data: tree2}); (where tree2 is a variable that i have declared inside document.ready function, I still get the same error.

Interestingly, If i populate the treeview using following call outside of ajax call back function :

function nonAjax() {
    var tree = [{ text: "Buyer" }, { text: "text1" }, { text: "text2" }, { text: "text3" }];
    return tree;
}
$('#lstCollections').treeview({` data: nonAjax() });

Everything works!! I am not sure why I am gettig treeview is not function() when the call is inside ajax callback function.

Damned good question. My treeview isn't working either. It's the fourth I've tried as documented. — ProfK, Sep 22 '17 at 17:04

score 0 · Answer 1 · answered Sep 15 '20 at 10:25

The right format that should pass to the treeview isn't what you get back from the Ajax call you should parse the json object like the following example:

let invalid = '{ "bank": "CityBank", "sum": "500" }, { "bank": "WPBank", "sum": "700" }';
let valid = JSON.parse("[" + invalid + "]");

Now you can pass the valid variable to the treeView without any problems.

It all about adding square brackets notation to the JSON object!

Error while populating bootstrap treeview from data retrieved using Ajax call

1 Answers1