How to export and import jqTree data?

[waldenn]

I'm trying to find a way to export and import the jqTree data, using a file (for my conze.pt project). Love jqTree btw!

From issue #498 I see this code to get a JS object: let obj = $('#tree1').tree('getTree');

Serializing this to a file gives me errors (due to "too much recursion") and how would I read back this file into jqTree?

Anyone implemented this export/import functionality already? Thanks!

[mbraak]

There is a toJson function: https://mbraak.github.io/jqTree/#functions-tojson

const $tree = $("#tree1");

// save
const jsonData = $tree.tree("toJson");

// load
$tree.tree("loadData", JSON.parse(data));

[waldenn]

Thank you!

[Deleted user]

Hi! It is still not clear to me how to load data from a JSON file to a tree. Could you help me with this?

[waldenn]

Hi! It is still not clear to me how to load data from a JSON file to a tree. Could you help me with this?

Hi Max. See: https://mbraak.github.io/jqTree/#Tutorial

[Deleted user]

Thank you, but it is not exactly what I want. I would like to load data existing in a separate JSON file.

[mbraak]

You could import the json file (see https://stackoverflow.com/questions/43735486/load-static-json-file-in-webpack#43742105).

And then you could use the data option in jqTree to initialize a tree with that data (see https://mbraak.github.io/jqTree/#options-data).

import exampleTreeData from './example_tree.json';

$('#tree1').tree({data: exampleTreeData});

[Deleted user]

It's not working. Here are some details:

html:

<script src="jquery-3.6.4.js"></script>
<div id="tree1"></div>
<script src="tree.jquery.js"></script>
<script src="hello.js" type=module></script>
<link rel="stylesheet" href="jqtree.css">

javascript:

import mydata from './data.json';

$('#tree1').tree({
    data: mydata
});

data:

[
    {
        "name": "node1", "id": 1,
        "children": [
            { "name": "child1", "id": 2 },
            { "name": "child2", "id": 3 }
        ]
    },
    {
        "name": "node2", "id": 4,
        "children": [
            { "name": "child3", "id": 5 }
        ]
    }
]

Firefox console output:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///home/abc/tests-webpage-javascript/hello.js. (Reason: CORS request not http).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///home/abc/tests-webpage-javascript/hello.js. (Reason: CORS request not http).
Error processing sheet 
CSSStyleSheet file:///home/abc/tests-webpage-javascript/jqtree.css
 DOMException: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet prefetchCSSResources.js:243:17

[mbraak]

Ah, I see. The example only works if you're using a bundler like webpack or rollup.

As an alternative, you could put the json directly in your javascript:

const myData = [
    {
        "name": "node1", "id": 1,
        "children": [
            { "name": "child1", "id": 2 },
            { "name": "child2", "id": 3 }
        ]
    },
    {
        "name": "node2", "id": 4,
        "children": [
            { "name": "child3", "id": 5 }
        ]
    }
];

$('#tree1').tree({
    data: mydata
});

[Deleted user]

Thank you. It was indeed working when I was trying this. Can we hope to have this use case of loading an external JSON file in the documentation some day?