<!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{
100%;
height:800px;
}
.left{
47%;
height:800px;
float: left;
overflow: scroll;
border:1px solid red;
}
.right{
47%;
height:800px;
float: left;
overflow: scroll;
border:1px solid green;
}
#left-text{
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{
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>