js读取json数据并生成级联菜单

性能优化的话,应该主要是减少for的次数。

思路:先整体for一遍,能创建的先创建,碰到父级项目还没创建的子项目,先用个数组cache起来,等for结束,所有的父级项目都创建完成了,然后把cache的项目加进去,这样应该可以减少一些循环次数。

情况一:如果JSON能够按照项目的层级排序,把父级项目都放在前面的话,只要一次for就可以全部搞定。
情况二:如果大多数父级项目都排在后面的话,可能反而增加了for的次数,不过应该比楼主的方法还是要节省一些,最多只有两次for。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
            var data = [
                { "cid": "1", "name": "品牌1", "pid": "0" },
                { "cid": "2", "name": "品牌2", "pid": "0" },
                { "cid": "3", "name": "品牌3", "pid": "1" },
                { "cid": "4", "name": "品牌4", "pid": "2" },
                { "cid": "5", "name": "品牌5", "pid": "1" }
            ];
            window.onload = function() {
                for (var i = 0; i < data.length; i++) {
                    if (data[i].pid == 0) {
                        var ul = document.createElement("ul");
                        var li = document.createElement('li');
                        li.innerHTML = data[i].name;
                        ul.appendChild(li);
                        for (var k = 0; k < data.length; k++) {
                            if (data[k].pid == data[i].cid) {
                                var ul1 = document.createElement("ul");
                                var li1 = document.createElement('li');
                                li1.innerHTML = data[k].name;
                                ul1.appendChild(li1);
                                li.appendChild(ul1);
                            }
                        }
                        document.body.appendChild(ul);
                    }
                }
            }
    </script>
</head>
<body>
</body>
</html>

方法二

<script>
function showJSON() {   
    var user =   
     {   
   "cate" :  [{"cid" : "1","name" : "品牌1","pid" : "0"},
   {"cid" : "2","name" : "品牌2","pid" : "0"},
   {"cid" : "3","name" : "品牌3","pid" : "1"},
   {"cid" : "4","name" : "品牌4","pid" : "2"},
   {"cid" : "4","name" : "品牌4","pid" : "2"},
   {"cid" : "4","name" : "品牌4","pid" : "2"},
   {"cid" : "4","name" : "品牌4","pid" : "2"},
   {"cid" : "4","name" : "品牌4","pid" : "2"},
   {"cid" : "4","name" : "品牌4","pid" : "0"},
   {"cid" : "4","name" : "品牌4","pid" : "2"},
   {"cid" : "4","name" : "品牌4","pid" : "4"},
   {"cid" : "4","name" : "品牌4","pid" : "2"},
   {"cid" : "4","name" : "品牌4","pid" : "4"},
   {"cid" : "4","name" : "品牌4","pid" : "2"},
   {"cid" : "4","name" : "品牌4","pid" : "4"},
   {"cid" : "4","name" : "品牌4","pid" : "2"},
   {"cid" : "4","name" : "品牌4","pid" : "2"},
   {"cid" : "4","name" : "品牌4","pid" : "2"},
   {"cid" : "5","name" : "品牌5","pid" : "1"}
   ]
     }   
      var l = user.cate.length;
  
  for(var i=0;i < l;i++){
   if(user.cate[i].pid == "0"){
    document.write(user.cate[i].name + "<br>");  
    for(var j=0; j < l ;j++){
     if(user.cate[j].pid == user.cate[i].cid){
     document.write(" ");
     document.write(user.cate[j].name + "<br>");
     }
    }
   }
  }
}   
showJSON()
</script>

时间: 2024-09-24 11:17:17

js读取json数据并生成级联菜单的相关文章

js 读取json数据方法

for(var i=0;i<网页特效onlist.length;i++){ for(var key in jsonlist[i]){ alert("key:"+key+",value:"+jsonlist[i][key]); } }

sql-ASP读取SQL数据表 生成多记录JSON 具体代码如何写 求教大神

问题描述 ASP读取SQL数据表 生成多记录JSON 具体代码如何写 求教大神 数据表是user 主键是m_Name <%response.ContentType=""text/json"" response.write request(""jsoncallback"")%>([{""m_Name"":""*依旧""n_Name&quo

web项目前端读取json数据不正常 ?

问题描述 web项目前端读取json数据不正常 ? 后台代码 @Override public String execute() throws Exception { Object obj=this.session.get(StaticString.ADMIN_INFO); Map<String, Object> map=new HashMap<String, Object>(); if(obj!=null){ AdminBean newAdmin =new AdminBean(t

jquery ajax 读取json数据存入表格中

问题描述 jquery ajax 读取json数据存入表格中 test.txt的json数据如下[{""XH"":1YWName"":""业务1""SName"":""系统1""QDName"":""渠道1""HJNumber"":5}{""XH&q

jquery调取json数据实现省市级联的方法_jquery

本文实例讲述了jquery调取json数据实现省市级联的方法.分享给大家供大家参考.具体如下: 使用jQuery mobile作为创建移动web的框架,需要实现省市级联的功能,具体代码如下(还需要优化的地方): Html代码: jQuery mobile中,有input  list属性,下方紧跟<datalist >标签,中间包含的<option value="XXXX"></option>即为选项,相当于这个input为有下拉列表的功能,当然,in

JS中Json数据的处理和解析JSON数据的方法详解_javascript技巧

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C.C++.C#.Java.JavaScript.Perl.Python等).这些特性使JSON成为理想的数据交换语言. 易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率). JSON的规则很简单: 对象是一个无序的"'名称/值'对"集合.一个对象以&quo

json-在AngularJS中怎么实现读取JSON数据后,根据同一店铺名称下循环购买的商品

问题描述 在AngularJS中怎么实现读取JSON数据后,根据同一店铺名称下循环购买的商品 菜鸟一枚,大神勿嫌弃. 我在做购物车的模拟,在service中手写了一组json数组对象, var goods = [{ id:1, sstype:"企业商城", image_file:"img/cartImg/c8.jpg", name:"舒语17 18 19寸沃森CVT沃尔沃日产轮毂原装正品啦啦啦啦", shangpinpingpai:"沃

Python处理JSON数据并生成条形图_python

一.JSON 数据准备 首先准备一份 JSON 数据,这份数据共有 3560 条内容,每条内容结构如下: 本示例主要是以 tz(timezone 时区) 这一字段的值,分析这份数据里时区的分布情况. 二.将 JSON 数据转换成 Python 字典 代码如下: 三.统计 tz 值分布情况,以"时区:总数"的形式生成统计结果 要想达到这一目的,需要先将 records 转换成 DataFrame,DataFrame 是 Pandas 里最重要的数据结构,它可以将数据以表格的形式表示:然后

flowLayoutPanel控件如何清空里面根据json数据自动生成的控件?

问题描述 flowLayoutPanel控件如何清空里面根据json数据自动生成的控件? 我在网上查了大量资料也没能找到. 我现在要实现模糊查询,就是当我的条件框(文本框)输入值后,清理flowLayoutPanel容器中原有的所有控件.随后再生成我筛选后的控件(这个实现了).