Search code examples
javascriptjqueryjqtree

jqTree shows undefined for valid json

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.

Solution

  • 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