jqTree shows undefined for valid json

Question

I am trying to use the jqTree from http://mbraak.github.io/jqTree/#tutorial

my page is

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> Json Parser </TITLE>
       <link rel="stylesheet" href="css/jqtree.css">
       <script src="js/jquery-2.0.3.min.js"></script>
       <script src="js/tree.jquery.js"></script>
       <script type="text/javascript">


 $(function() {
   var data = [{"tweetText":"RT @dna: IPL spot-fixing: Jagmohan Dalmiya still clueless about N Srinivasan's return http://t.co/PwDniu8sJg","urlsMentioned":[],"usersMentioned":[{"userId":17710740,"screenName":"dna","userName":"dna"}],"source":"<a href=\"http://twitter.com/download/android\" rel=\"nofollow\">Twitter for Android</a>","tweetId":362907208733827100,"reTweetCount":12,"reTweeted":true,"createdDate":"Thu Aug 01 12:06:35 UTC 2013","user":{"location":"","userId":24525170,"screenName":"varuntripathi1","userName":"varun","profileDescription":"","language":"en"},"reTweetedStatus":{"tweetText":"IPL spot-fixing: Jagmohan Dalmiya still clueless about N Srinivasan's return http://t.co/PwDniu8sJg","urlsMentioned":["http://dnai.in/bAoD"],"usersMentioned":[],"source":"<a href=\"http://twitter.com/tweetbutton\" rel=\"nofollow\">Tweet Button</a>","tweetId":362606709404991500,"reTweetCount":12,"reTweeted":false,"createdDate":"Wed Jul 31 16:12:31 UTC 2013","user":{"location":"India","userId":17710740,"screenName":"dna","userName":"dna","profileDescription":"We are India’s favourite English daily delivering news, views & analyses. Follow us for real-time news updates. PS: This Twitter feed is not operated by a bot.","language":"en"},"hashTags":[]},"hashTags":[]}]
$('#tree1').tree({ 
    data: data
});
 });
   </script>
 </HEAD>

 <BODY>
    <div id="tree1">
    </div>
 </BODY>
</HTML>

It does not show any value. but it is workinf fine for the data var data = [ { label: 'node1', children: [ { label: 'child1' }, { label: 'child2' } ] }, { label: 'node2', children: [ { label: 'child3' } ] } ];

even though both json are valid one. How would i solve this or any other js available to select the nodes of a json.

jsfiddle

Is there anyother js available to view the json.

Thanks in advance.

Why would jqTree accept that arbitrary JSON? You need to sanitize and restructure it first. @LeGEC's answer points you in the right direction. How do you expect the output to look? — MasterAM, Aug 11 '13 at 06:19

score 5 · Accepted Answer · answered Aug 11 '13 at 15:01

As you probably have already figured out, valid JSON != valid data.

You need to provide the constructor with data that corresponds to its requirements.

In the case of jqTree, that is

[
    {
        "label":"node 1",
        "children": [
            {
                "label": "node 1.1"
            },
            {
                "label": "node 1.2"
            }
        ]
    },
    {
        "label": "node 2"
    }
]

etc.

So, you need a function to reformat the data, such as:

function formatData(arr) {
    var label, data = [], obj, node;
    if(!$.isArray(arr)) {
        arr = [arr];
    }
    console.log(arr);
    var l = arr.length, i;

    for(i=0; i< l; ++i) {
        node = {};
        obj = arr[i];
        node.label = obj.user.screenName + ": " + obj.tweetText + " (" + obj.createdDate + ")";
        if(typeof obj.reTweetedStatus == "object") { //fetch children
            node.children = formatData(obj.reTweetedStatus);
        }
        data.push(node);
    }

    return data;
}

which will return something like

[{
    "label": "varuntripathi1: RT @dna: IPL...Jg (Thu Aug 01 12:06:35 UTC 2013)",
    "children": [{
        "label": "dna: IPL spot-fixing: Ja...Jg (Wed Jul 31 16:12:31 UTC 2013)"
    }]
}]

This creates a tree that looks something like this:

jqTree output

Demo

On a side note, I believe that it will be difficult for you to do what you want with jqTree. It is relatively difficult to customize, in my view.

You can find more configurable jQuery tree widgets, such as jsTree or zTree in jQuery's plugin site.

I created a short example with zTree that produces a the following tree based on your data: zTree's output Demo

score 1 · Answer 2 · answered Aug 01 '13 at 11:59

1

Your data variable is not a JSON, JSON is a formatted string that you can parse to get a get a javascript object in this case.

A proper JSON string of that object is: var jsonData = "[{"label":"node1","children":[{"label":"child1"},{"label":"child2"}]},{"label":"node2","children":[{"label":"child3"}]}]"

Although I haven't ever used jqTree, I typed your example in Plunker to check how tree work with the three types of data; you data, a json data get from javascript object and the object get from that json data.

http://plnkr.co/edit/Sw3BCigiU69jLkQkAw5U?p=preview

answered Aug 01 '13 at 11:59

Ivan Fraixedes

550
3
12

see my edited code. I checked that json in online json viewer. It is working but here only not working – jackyesind Aug 01 '13 at 12:12
Could you have any idea on this? or is there any other js available to to select the json node – jackyesind Aug 02 '13 at 06:15
What Ivan is saying, @jackyesind, is that `var data = [{ "..." }];` is not a valid JSON value. In your question, it's an array with a single JavaScript object. Note the different location of the quotes in `var data = "[{ ... }]";`, which is a JSON array. – Arjan Aug 08 '13 at 10:45

score 0 · Answer 3 · answered Aug 01 '13 at 11:37

0

[{
   "club":
         { "id":1,"name":"This is a team name"},
   "members":
         [
             {"id":2,"name":"Test Name"},
             {"id":3,"name":"Another Name"},
             {"id":4,"name":"More Names"},
             {"id":5,"name":"Cool Person"}]
}];

Put [ and ]

answered Aug 01 '13 at 11:37

manoj

5,235
7
24
45

include jquery-1.9.1.min.js not jquery-2.0.3.min.js may verson problem – manoj Aug 01 '13 at 11:53
Could you have any idea on this? or is there any other js available to to select the json node – jackyesind Aug 02 '13 at 06:15
I want json viewer not tree view of folder – jackyesind Aug 02 '13 at 07:04
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/34676/discussion-between-manoj-and-jackyesind) – manoj Aug 02 '13 at 07:57
here they blocked chat options – jackyesind Aug 02 '13 at 08:29
Is there any jstree with check box near to the node to select that node? – jackyesind Aug 02 '13 at 08:46
you can add checkbox for node that you want by DOM manipulation by jquery. – manoj Aug 02 '13 at 08:50
My need is i want check box for the parent node and if i select the check box in the parent node. when i click save the selected checkbox value should be saved – jackyesind Aug 02 '13 at 09:23
could you help me on this? currently i am using http://www.daviddurman.com/jquery-json-editor-plugin.html – jackyesind Aug 02 '13 at 09:57

Akki619 · Answer 4 · 2013-08-01T11:53:44.560

0

I have edited my answer, can u please try this

 var data = [
"club":
        [{"id":1,"name":"This is a team name"}],
"members":
        [{"id":2,"name":"Test Name"},{"id":3,"name":"Another Name"},{"id":4,"name":"More Names"},{"id":5,"name":"Cool Person"}]
];

edited Aug 01 '13 at 11:53

answered Aug 01 '13 at 11:42

Akki619

2,386
6
26
56

Same problem Nothing is displayed – jackyesind Aug 01 '13 at 11:45
what your console says? – Akki619 Aug 01 '13 at 11:47
missing ] after element list "club": – jackyesind Aug 01 '13 at 11:52
Could you have any idea on this? or is there any other js available to to select the json node – jackyesind Aug 02 '13 at 06:15

score 0 · Answer 5 · answered Aug 04 '13 at 21:31

0

I tried by adding a extra brace around the json data returned from the server and worked

 $.post(your_url, null, function (data) {
    //add extra braces before binding to the tree
    data = $.parseJSON("[" + data + "]");        
    $('#tree1').tree({
        data: data,
        autoOpen: true,
        dragAndDrop: true
     });
  });

answered Aug 04 '13 at 21:31

Mokarom

603
5
13

try it here - http://jsfiddle.net/xHUWC/. You'll need to modify your json to match mine meaning there should be name, id, children properties for each of your tree nodes. At first I thought you are loading data from server. I have the problem with missing braces while loading from server. – Mokarom Aug 05 '13 at 14:49

score 0 · Answer 6 · answered Aug 05 '13 at 07:23

0

The following json data works.

var data = [
    {
        label: 'RT @dna: IPL spot-fixing: Jagmohan Dalmiya still clueless about N Srinivasan\'s return http://t.co/PwDniu8sJg',
        children: [
            {
                label: 'IPL spot-fixing: Jagmohan Dalmiya still clueless about N Srinivasan\'s return http://t.co/PwDniu8sJg'
            }
        ]
    }
];

By the way, what do you want to show exactly in the tree?

answered Aug 05 '13 at 07:23

Henk Jansen

66
2

I want to display the above json in a tree – jackyesind Aug 05 '13 at 08:21

jqTree shows undefined for valid json

6 Answers6