个人中心
gpt4 book ai didi

javascript - jqTree 显示未定义的有效 json

转载 作者：行者123 更新时间：2023-11-30 08:06:09 28 4
gpt4 key购买 nike

我正在尝试使用来自 http://mbraak.github.io/jqTree/#tutorial 的 jqTree

我的页面是

    <!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>

它不显示任何值。但它对数据来说很好用变种数据= [ { 标签:'node1'， children : [ {标签:'child1'}， {标签:'child2'} ] }, { 标签:'节点2'， children : [ {标签:'child3'} ] }];

即使两个 json 都是有效的。我将如何解决这个问题或任何其他可用于选择 json 节点的 js。

jsfiddle

是否有其他js可以查看json。

提前致谢。

最佳答案

您可能已经知道，有效的 JSON != 有效的数据。

您需要向构造函数提供符合其要求的数据。

在jqTree的情况下，就是

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

等等

因此，您需要一个函数来重新格式化数据，例如:

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

这会返回类似的东西

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

这将创建一个看起来像这样的树:

jqTree output

Demo

附带说明一下，我相信您很难用 jqTree 做您想做的事。在我看来，定制相对困难。

您可以找到更多可配置的 jQuery 树小部件，例如 jsTree或 zTree在 jQuery's plugin site .

我使用 zTree 创建了一个简短示例，它根据您的数据生成了以下树: zTree's output Demo

关于javascript - jqTree 显示未定义的有效 json，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17992788/

28 4 0
文章推荐： java - EJB stub 线程安全吗？
文章推荐： java - 如何将 native 查询的结果集映射到实体中的变量
文章推荐： javascript - 为什么来自提供者的事件不 $emit 到 $rootScope？
文章推荐： javascript - 如何使用 jQuery 事件监听器获取目标元素？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com