Ошибка при заполнении дерева начальной загрузки из данных, полученных с помощью вызова Ajax

Я использую плагин дерева загрузки начальной загрузки ( https://github.com/jonmiles/bootstrap-treeview). Я не уверен, является ли это проблемой с плагином treeview или способом, которым я реализую код. Я пытаюсь загрузить treeview, используя данные обратного вызова ajax. Вот пример кода, который я использую:

<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>

Когда я запускаю код, я не вижу никаких данных в своем дереве. В моем инструменте разработчика (для браузера Chrome) в консоли я вижу "Uncaught TypeError: $(...). Treeview не является функцией (…)" ошибка в строке " $('#lstCollections'). Treeview({ data: collectionTree });"

Если я заменю $('#lstCollections').treeview({ data: collectionTree });с $('#lstCollections').treeview({ data: tree2}); (где tree2 - это переменная, которую я объявил внутри функции document.ready, я все еще получаю ту же ошибку.

Интересно, что если я заполню древовидную структуру, используя следующий вызов вне функции обратного вызова ajax:

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

Все работает!! Я не уверен, почему gettig treeview не является функцией (), когда вызов находится внутри функции обратного вызова ajax.

Источник

0 ответов

Правильный формат, который должен передаваться в древовидное представление, - это не то, что вы получаете от вызова Ajax, вы должны проанализировать объект json, как в следующем примере:

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

Теперь вы можете без проблем передать действительную переменную в treeView.

Все дело в добавлении квадратных скобок к объекту JSON!

Источник
Другие вопросы по тегам