jqTree shows undefined for valid json

Question

jqTree shows undefined for valid json

1.1k Views Asked by jackyesind At 14 May 2025 at 08:32

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.

Original Q&A

There are 6 best solutions below

Henk Jansen On 05 August 2013 at 07:23

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?

manoj On 01 August 2013 at 11:37

[{
   "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 ]

Akki619 On 01 August 2013 at 11:42

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"}]
];

Ivan Fraixedes On 01 August 2013 at 11:59

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

Mokarom On 04 August 2013 at 21:31

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
     });
  });

**MasterAM** · Accepted Answer

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

jqTree shows undefined for valid json

There are 6 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in JQTREE

Trending Questions

Popular # Hahtags

Popular Questions