<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        .all{
            width:100%;
            height:800px;
        }
        .left{
            width:47%;
            height:800px;
            float: left;
            overflow: scroll;
            border:1px solid red;
        }
        .right{
            width:47%;
            height:800px;
            float: left;
            overflow: scroll;
            border:1px solid green;
        }
        #left-text{
            width:97%;
            height: 100%;
            padding: 10px 10px 10px 30px;
            border: 0;
            border-right: solid 1px #E5EBEE;
            border-bottom: solid 1px #eee;
            border-radius: 0;
            resize: none;
            outline: none;
        }
        #right-text{
            margin:20px;
        }
        .right button{
        width: 200px;
        float: left;
        margin: 10px 30px;
        height: 30px;
        cursor: pointer;
        }
        #right-text{
            display: inline-block;
            color:#ff7799;
            font-size: 19px;
        }
        .two{
            display: inline-block;
            color:#9977ff;
        }
        .three{
            display: inline-block;
            color:green;
        }
        .four{
            display: inline-block;
            color:#000;
        }
    </style>
</head>
<body>
<div class="all">
    <div class="left">
        <textarea name="" id="left-text" cols="30" rows="10"></textarea>
    </div>
    <div class="right">
        <button class="right22">输出文字</button>
        <div  id="right-text">
        </div>
    </div>
</div>
<script src="jquery-1.10.2.js"></script>
<script>
    $(function(){
        $(".right22").click(function(){
        var str=$("#left-text").val();
        var dataJson1 =$.parseJSON(str)
        var dataXIU=dataJson1.service_config.config;
            for (var index in dataXIU){
                 $("#right-text").append("<span class='one'>一级类别：<b>"+dataXIU[index].category_alias+"</b></span></br>");
            // console.log(dataXIU[index].goodsCategory);
               for (var indexs in dataXIU[index].goodsCategory){
                   var name=dataXIU[index].goodsCategory[indexs].goods_category_name;
                   var dan=dataXIU[index].goodsCategory[indexs].goods_unit
                    $("#right-text").append("<span class='two'>二级类别：<b>"+name+"</b></span></br>");
                        // console.log(dataXIU[index].goodsCategory[indexs].son);
                        var sanji=dataXIU[index].goodsCategory[indexs].son;
                        for (var indexss in sanji){
                            var sanname=sanji[indexss].goods_category_name;
                            var sandan=sanji[indexss].goods_unit
                            $("#right-text").append("<span class='three'>三级类别：<b>"+sanname+"</b>  单位="+sandan+"</span></br>");
                            // console.log(sanji[indexss].attr);    
                                            for (var indexsss in sanji[indexss].attr){
                                                var siname=sanji[indexss].attr[indexsss].field_alias;
                                                var sidan=sanji[indexss].attr[indexsss].enum;
                                                 console.log(sidan)
                                                 
                                                if(sidan!=undefined){
                                                    for(indexssss in sidan ){
                                                        var alias= sidan[indexssss].alias;
                                                        var wudan= sidan[indexssss].value;
                                                        $("#right-text").append("<span class='four'>四级："+siname+"-<b>"+wudan+"</b></span></br>");
                                                        
                                                    }
                                                    
                                                }
                                                                
                                             }
                         }
              }
          }
        })
    })
</script>
</body>
</html>

91.用js遍历原生json数据的更多相关文章

  1. js循环读取json数据，将读取到的数据用js写成表格

    ①js循环读取json数据的方式: var data=[{"uid":"2688","uname":"*江苏省南菁高级中学 022 ...

  2. Js循环读取JSON数据

    <script> $(function () { var jsonString = '{Unid:"1",CustomerName:"宋江",Age ...

  3. js实现对json数据的序列化（兼容ie6以上浏览器）

    /** * 增加对JSON数据的序列化方法, * 主要用于IE6.7不支持JSON对象的浏览器 */ var xue = xue || {};xue.json = xue.json || {}; xu ...

  4. js读取解析JSON数据

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...

  5. js之操作JSON数据

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...

  6. js读取解析JSON数据（转）

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...

  7. 菜鸟笔记：node.js+mysql中将JSON数据构建为树（递归制作树状菜单数据接口）

    初学Web端开发,今天是第一次将所学做随笔记录,肯定存在多处欠妥,望大家海涵:若有不足,望大家批评指正. 进实验室后分配到的第一个项目,需要制作一个不确定层级树形菜单的数据接口,对于从来没实战编过程的 ...

  8. 在java中像js那样处理json数据

    工作中经常需要通过ajax向前台返回json数据,都是通过拼字符串拼出来的,很发麻烦不说,还容易出错. 于是想,能不能像js那样操作json呢?或者说更方便的操作呢? Google的gson就是这样的 ...

  9. json-server 和mock.js生成大量json数据

    JSON-server和mock.jsmock文件夹下 db.json db.jsjson-sever使用 安装:npm install json-server -g/mock 目录下执行json-s ...

随机推荐

  1. browserslist详解

    https://www.jianshu.com/p/d45a31c50711 https://juejin.im/post/5b8cff326fb9a019fd1474d6 https://githu ...

  2. java 调用腾讯身份OCR接口文档实例（绝对可用）

      1.情景展示 通过读取身份证照片上的信息,实现自动填充功能. 2.原因分析 想要解析照片上所携带的相关信息,就需要识别照片的功能,腾讯提供了免费的身份证OCR接口,可供大家使用. 没有耐心的可以直 ...

  3. bat修改文件内容

    #file.vbsSet fso = Wscript.CreateObject("Scripting.FileSystemObject")set f=fso.opentextfil ...

  4. [Gamma]Scrum Meeting#6

    github 本次会议项目由PM召开,时间为6月1日晚上10点30分 时长10分钟 任务表格 人员 昨日工作 下一步工作 木鬼 撰写博客,组织例会 撰写博客,组织例会 swoip 前端显示屏幕,翻译坐 ...

  5. k8s删除pod一直处于terminating状态

    我这里的pod是与nfs有关,nfs挂载有问题导致pod有问题,执行完删除命令以后看到pod一直处于terminating的状态. 这种情况下可以使用强制删除命令: kubectl delete po ...

  6. Atlassian JIRA 插件开发之一 环境搭建

    参考 https://developer.atlassian.com/server/framework/atlassian-sdk/  download the SDK 说明 Download the ...

  7. 在ensp上通过FTP进行文件操作

    接下来的实验,我们使PC-1为用户端,需要访问FTP Server,不允许用户端上传到server. 在R1上员工不能上传文件到server,但是可以下载文件.同时R1也需要作为用户端从server下 ...

  8. Maven ------ 了解与安装

    1.什么是Maven Maven :项目对象模型(POM),可以通过一段描述信息来管理项目的构建,报告和文档的项目管理工具软件, maven 来自犹太语意为知识的积累,为了在项目中简化构建过程,最直观 ...

  9. Windows域的创建与加入教程

    一.说明 以前看书的时候时常看到“域”这个词,后来听一些渗透的演讲通常会说进入内网后首先要找域控.在认知中“域控”应该是域管理服务器一类的东西,但毕竟没有实现过所以还是不太懂长什么样. 前段时间朋友电 ...

  10. CentOS7使用tar.gz包安装MySql的踩坑之旅

    由于客户的CentOS服务器没有安装yum工具,只能通过下载tar.gz包安装mysql,于是跟着万能的百度开启了漫漫踩坑之旅: 1.下载mysql-5.6.33-linux-glibc2.5-x86 ...