Retrieve information from an external JSON file and display it in a jstree

I am trying to pass JSON data to a jstree object from an external file. The code snippet I have does not seem to be working properly.

<script>
            $.jstree.defaults.core.themes.responsive = true;
$('#frmt').jstree({
    plugins: ["checkbox", "types"],
    "json_data":{
    "ajax" : {
        "url" : "D:\p\web\nodes.json"  // the URL to fetch the data. Use relative url if required
     }
},
       "types": {
        "file": {
            "icon": "jstree-file"
        }
    }
});
</script>

Here is my nodes.json file:

[
 {
  "id": "ajson1",
  "parent": "#",
  "text": "Simple root node"
}, 
{
  "id": "ajson2",
  "parent": "#",
  "text": "Root node 2"
}, {
  "id": "ajson3",
  "parent": "ajson2",
  "text": "Child 1"
}, {
  "id": "ajson4",
  "parent": "ajson2",
  "text": "Child 2"
}
]

Manually inserting this data into JavaScript works fine, but when assigning the path of nodes.json to an external file, it doesn't seem to work as expected.

javascriptjsonjstree

Answer №1

Are you using the latest version of jstree? The current version is 3.3.1. In older versions, there was a plugin called json_data that needed to be included in your plugins list. However, with the newest version, you can simply use "url" instead. Here's an example:

$('#tree').jstree({
    'core' : {
        'data' : {
            'url' : function (node) {
                return node.id === '#' ? 'ajax_roots.json' : 'ajax_children.json';
             },
            'data' : function (node) {
                return { 'id' : node.id };
            }
         }
    });

I hope this information proves helpful.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What methods can I use to integrate a Google HeatMap into the GoogleMap object in the Angular AGM library?

I am trying to fetch the googleMap object in agm and utilize it to create a HeatMapLayer in my project. However, the following code is not functioning as expected: declare var google: any; @Directive({ selector: 'my-comp', }) export class MyC ...

javascriptangulargoogle-mapstypescriptheatmap

Retrieve JSON response from server using Swift to decode

I am currently encountering an issue with parsing the data response from the server and converting it to JSON format using Swift. Previously, the response was returning as JSON but now, with additional attributes added, it returns a string. When trying to ...

jsonswift

Leveraging the power of Fractal Transformer in conjunction with ember-data

While using the PHP league's Fractal as the transformer for my API, I have encountered an issue where the item transformer is wrapping everything in an array similar to a collection. This goes against the standards set by the JSON API. For instance, ...

jsonember.jslaravel

Solidjs: Implementing a Map in createStore does not trigger updates upon changes

As a beginner in solidjs, I might have missed something important. In the code snippet below, I am trying to understand an issue: const [state, setState] = createStore({ items: new Map() }); // e.g. Map<number, string> In a component, suppose I want ...

javascripttypescriptsolid-js

What is the best way to create a dynamic hyperlink that leads to a detailed information page based on the specific link clicked?

I'm currently working on a web page that displays a list of users, and I want each user's name to be clickable, leading to a page with specific details about that user. I'm new to this field, so I'm unsure where to start. My idea is to ...

javascripthtmlnode.jsmongodbexpress

Securing the communication with encrypted API request payloads and responses

It concerns me that all data exchanged between the client and server is in raw json format, as it can easily be manipulated by inexperienced hackers trying to tamper with the values. Although it's not possible to hide a secret salt in javascript, I&a ...

c#jsonvue.jsencryptionaxios

How to parse an array into a C# class using System.Text.Json.DeserializeObject

Currently, I am dealing with the integration of Google's recaptcha RESTful service in an attempt to convert the JSON object into a class. When working with WSDLs, Visual Studio typically handles most of the code generation for you, making it easier to ...

jsonvisual-studio-2019jsonserializerdatacontractjsonserializer

Using Jquery to retrieve the window size and dynamically apply it to a div's CSS, adjusting it accordingly when the

Hey there! I'm trying to create a full-screen div, but unfortunately CSS doesn't seem to do the trick in this case. JavaScript/jQuery is my only option. My plan is to dynamically set the size of the div based on the browser window's dimensi ...

javascriptjquery

The ID of the jQuery droppable element cannot be found

Is there a way to retrieve the ID of a li element from a droppable function? Currently, when I try to do so, it returns undefined. Any suggestions on why this might be happening? The structure of each li element is as follows: <li class="ui-state-def ...

javascriptphpjqueryajax

I aim to showcase particular cookies within an input field using jQuery

I am seeking a way to create a responsive page that showcases cookies. My goal is to have the output of a function automatically appear in the input value upon loading the page, instead of requiring a click event. Here is the code snippet I have been worki ...

javascriptjqueryhtmlcookies

Discovering JSON Format using Python

I need to extract the structure of JSON data from a table in my database. Each row contains slightly different JSON attributes, with none including them all. Here are some examples: { "testAssignmentName": "RhubarbRhubarbRhubarbRhubarbRhubarbRhubarbRh ...

pythonjsonpython-3.xpython-2.7

Animating a Canvas to Follow Mouse Coordinates

I am looking for a way to animate a circle moving towards specific coordinates, similar to the game . I have attempted using the jquery animate() function, but it is too slow due to the constant updating of the target coordinates. Is there a faster metho ...

javascripthtmlcanvasjquery-animate

Tips for Creating and Verifying JWE in Node.js

I attempted to use the following code in order to create an RSA-OAEP and A128GCM JWE generator and validator. It successfully encrypts claims and generates the JWE, then decrypts it and provides me with the original claims when running on node.js. However, ...

javascriptnode.jsencryptionjwe

Steps to invoke a function to add an element into a list

Every time a user clicks on a button, I want to generate a new tab. In this tab, when the user clicks again, I want a function to be called like: onclick('+reportname+','+report type+') onclick("'+reportname+'","'+repor ...

javascriptjqueryasp.net

Creating JSON in Android involves following a set of steps to transform data

Can someone help me with creating nested JSON in Android? I need the JSON data to have a structure similar to this: JSON Customername = Alice Customercode = 101 Customercity = New York Customerstate = NY Customercountry = USA Customersales Productname ...

androidjson

Importing a module directly from the umd distribution may yield a distinct outcome compared to importing it

Within my Vite/Vue3 application, I am importing two identical umd.js files: One is located at node_modules/foo/bar/dist/foobar.umd.js (imported with alias @foo = node_modules/@foo). The second .umd.js file can be found at <root dir>/foo/bar/dist/ ...

javascriptvue.jsviteumdesmodules

Error encountered while using jQuery AJAX to fetch SVG file: 'Invalid format'

For a while now, I have been using various SVGs from Inkscape and loading them into a specific container element with the .load method. Recently, I decided to switch things up and use AJAX's .get method instead, primarily because I wanted to prepend t ...

javascriptjqueryajaxsvg

Display the data count of a filtered list in Vue 2

As a newcomer to Vue, I am facing what seems like a simple and common task but the solution is escaping me. I need to filter some data and then display the count in a component. This is the HTML structure: <main class="container-fluid"> <div ...

javascriptvue.jsbootstrap-4vuejs2vue-component

Tips for maintaining the menu state following a refresh

Is there a way to save the menu state when pressing F5? I'm looking for a similar functionality as seen on the Binance website. For example, clicking on the Sell NFT's submenu and then refreshing the page with F5 should maintain the menu state on ...

javascriptangulartypescript

Button Vote in Bootstrap is unresponsive

I have a voting system implemented on my website using normal CSS buttons, and it works perfectly fine. However, when trying to integrate it with Bootstrap buttons, it seems to not function properly. I am looking to switch to using Bootstrap buttons for t ...

javascriptjquerytwitter-bootstrap