前端时间接到公司的一个需求，说是后端接口返回的数据存在较大的差异，其中json格式会给出来，但是对应的json格式会存在多种方式，如下所示：
二、【
先睹为快
】
json中包括文字块级展示，其中块级元素包括父子级别的关系，且要求在页面上通过背景色做区分，并且除了块级元素，还有表格元素，针对不同的json数据对应的元素还要添加其样式、点击事件等。废话不多说，先看json格式，然后再看json格式生成的页面结构：
json格式如下：
var arr = [
"block_name": "黄大大第一季",
"block_color": "red",
"block_type": "single",
"block_children": [{
"name": "第一集-啊啊",
"color": "blue",
"children": [
"name": "1-1",
"color": "rebeccapurple",
"click": {
"methods": "OBtargetInfoDetail('黄大大第一季 : 第一集-啊啊 1-1章节')"
}, {
"name": "1-2",
"color": "rebeccapurple"
"click": {
"methods": "OBtargetInfoDetail('黄大大第一季 : 第一集-啊啊')"
}, {
"name": "第二集-哈哈",
"color": "blue",
"children": [
"name": "2-1",
"color": "rebeccapurple"
}, {
"name": "第三集-更新中",
"color": "blue",
}, {
"block_name": "黄大大第二季",
"block_color": "red",
"block_type": "multi",
"block_children": [{
"name": "第一集-吃吃",
"color": "blue",
}, {
"name": "第二集-喝喝",
"color": "blue",
}, {
"name": "第三集-吹吹",
"color": "blue",
"children": [
"name": "3-1",
"color": "rebeccapurple"
"name": "3-2",
"color": "rebeccapurple",
"children": [
"name": "3-2-1",
"color": "orange",
"click": {
"methods": "OBtargetInfoDetail('黄大大第二季 : 第三集-吹吹 3-2 3-2-1')"
"name": "3-2-2",
"color": "orange",
"block_name": "OCEANBASE单层名称",
"block_type": "table",
"block_children": {
"head": ["租户ID", "名称", "CPU", "内存", "IO", "会话", "活跃会话", "诊断"],
"lines": [
[{ "val": "123", "color": "red" },
{ "val": "名称1" },
{ "val": "80%" },
{ "val": "80%", "color": "green" },
{ "val": "" },
{ "val": "" },
{ "val": "" },
{ "val": "诊断", "click": { "methods": "OBtargetInfoDetail('210100001')" } }],
[{ "val": "123" },
{ "val": "名称2", "color": "red" },
{ "val": "80%" },
{ "val": "80%", "color": "green" },
{ "val": "" },
{ "val": "" },
{ "val": "" },
{ "val": "诊断", "click": { "methods": "OBtargetInfoDetail('210100001')" } }],
通过前端代码解析生成的页面如下：
三、【实现剖析】
不难看出已经解析到第四层级的深度了，下面我将侧重讲述一下如何做到的
解决这个办法的核心在于递归调用页面解析的方法；
递归时候我们切记从最底层的地方着手，然后再不断的往上冒泡，将生成的页面结构字符串进行拼接，然后再渲染到页面即可；
其中递归的核心代码如下：
function loadDistriDom(domchild, loadHtmlStr) {
debugger;
if (domchild != null && domchild.length > 0) {
domNum++;
for (var k = 0; k < domchild.length; k++) {
onclickStr = "doNothing()";
if (domchild[k].click != null && domchild[k].click != undefined
&& domchild[k].click.methods != null && domchild[k].click.methods != undefined) {
onclickStr = domchild[k].click.methods;
if (domchild[k].children != null) {
loadHtmlStr += `<div class='blc_child` + domNum + `' οnclick="` + onclickStr + `">
<div style='color:`+ domchild[k].color + `'>` + domchild[k].name + `</div>
`+ loadDistriDom(domchild[k].children, "") + `
</div>`;
domNum--;
} else {
loadHtmlStr += `<div class='blc_child` + domNum + `' οnclick="` + onclickStr + `" style='color:` + domchild[k].color + `'>` + domchild[k].name + `</div>`
return loadHtmlStr;
在上面的逻辑中，主要判断是否还有孩子节点，如果有则递归调用，调用的过程中记得将原先的渲染页面字符串重新置空。另外值得注意的是domNum这个值得设置和修改过程，有孩子节点的切记形成dom后再执行–的操作，这个做的主要目的就是让页面的class名形成一个树状结构，如下所示：
调用方法如下：
for (var j = 0; j < arr.length; j++) {
loadHtmlStr = ``;
domNum = 0;
if (arr[j].block_type == "single" || arr[j].block_type == "multi") {
allStr += `<div class='bkchild bkchild_` + arr[j].block_type + `'>
<div style='color:`+ arr[j].block_color + `'>` + arr[j].block_name + `</div>
`+ loadDistriDom(arr[j].block_children, loadHtmlStr) + `
</div>`;
} else {
allStr += `<div class='bkchild bkchild_` + arr[j].block_type + `'>
<div style='color:`+ arr[j].block_color + `'>` + arr[j].block_name + `</div>
` + loadDistriTable(arr[j].block_children) + `</div>`
通过上面的一系列操作和递归调用，不过json数据的层级有多深，我们都是可以来实现页面的层级模块的展示，这个还可以广泛应用于多级菜单的形成。
百度网盘
链接：https://pan.baidu.com/s/158YrxeOj9SuNx83_gH9NjQ
提取码：hdd6
123云盘（不限速）
https://www.123pan.com/s/ZxkUVv-1EJ4
提取码:hdd6
有什么不懂的可以留言，动动发财的小手，点个赞关注下，支持博主创作的可以上皇榜哟，皇榜点击此处；
知识的道路上，愿与君同行！
本文实例讲述了JavaScript解析JSON数据。分享给大家供大家参考，具体如下：
JSON数据是一种常用的数据格式，解析方式也比较简单，特别是由于JavaScript原生就支持JSON，所以JavaScript能够更好的解析JSON。
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>解析JSON</title>
[removed]
// 开始解析
function startParse()
// ,{"字段2"
之前公司有一个需求是：通过js来生成html。而且大部分都是生成表格，直接通过字符串拼接的话，代码的可复用性太低的，所以写了个通用的json转html表格的工具。
htmlKit = {
_tags: [], html: [],
_createAttrs: function (attrs) {
va...
* JSON实际上也是键值对（"key":"value"）
* key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）
* value如果是字符串，用jsonobj.getString("key")获取
* value如果是数 字，用jsonobj.getIntValue("ke...
4.本项目
源码见
文尾捷文规范第一条,视图
源码在view
包，分析工具在analyze
包 一、贝塞尔三次曲线初体验 1.无网格，不曲线,废话不多说，上网格+坐标系 /** * 作者：张风捷特烈
* 时间：2018/11/16 0016:9:04
4.本项目
源码见
文尾捷文规范第一条,视图
源码在view
包，分析工具在analyze
包 一、贝塞尔三次曲线初体验 1.无网格，不曲线,废话不多说，上网格+坐标系 /** * 作者：张风捷特烈
* 时间：2018/11/16 0016:9:04
主要需求: 针对嵌套多层json，可以指定解析到的层级，并返回完整的解析后信息。
目前没在工具类中找到类似的函数故自己实现了，如果大神知道的话请告知下.
1.目前默认认定数组为最底层结构不做解析，以数据返回。
2.默认数据格式全部转换为string类型，针对需要匹配bean对象最赋值，请自行调整。
public class JsonParseUtils<T> {
private int jsonlevel = 0;
* 递归解析json并对重复字段根据解析层级调
一点要注意点。
JSON字符串: var str1 = '{ "name": "cxh", "sex": "man" }';
JSON对象:var str2 = { "name": "cxh", "sex": "man" };
如果是字符串要转换，使用var obj = eval('(' + str + ')');
别的没什么直接上代码，如
IEC 60870-104是电力系统通信标准协议，以实现各种设备（如自动化设备和保护设备）之间的通信。Wireshark是一款网络协议分析软件。将它们结合起来，可以对IEC 60870-104报文进行详细解析。
首先，需要确定使用的IEC 60870-104版本和协议参数。接着，使用Wireshark进行网络抓包，然后筛选出IEC 60870-104协议。
对于iec60870-104报文解析，需要理解报文结构。报文结构包括报文头、应用服务数据单元（ASDU）和报文尾。报文头包含报文类型、起始字符和校验和等信息，ASDU则是报文的主体部分。ASDU的类型取决于具体的请求或响应，比如，遥信、遥测和遥控等。报文尾包含结束字符。
按字节对报文进行解析，可以将每个字节的十六进制代码与相应的含义进行比对，来理解报文的结构和内容。
例如，开始字符由一个固定的数值68H（十进制数为104）表示，接着是将主站地址、子站地址、APDU长度、控制域和数据先后加入CRC校验码中。在ASDU中，遥信的信息类型编号为01，具体值为01-FF；遥测的信息类型编号为09，包含遥测值和品质描述符；遥控的信息类型编号为0C，分为单点遥控和双点遥控。
解析完整个报文后，可以还原出完整的信息，从而实现互通性与自动化化。
CSDN-Ada助手:
nodejs+express实现数据库mysql的访问，并展示数据到页面上【文尾分享源码包】
拄杖盲学轻声码:
nodejs+express实现数据库mysql的访问，并展示数据到页面上【文尾分享源码包】
拄杖盲学轻声码:
nodejs+express实现数据库mysql的访问，并展示数据到页面上【文尾分享源码包】
-Winn.:
