JS利用for循环画表格解析json字符串数据写入表格

背景：因为工作需要，需要讲数据拆分之后放入表格中，一共需要64行8列，总不能手动搞吧，于是便想先获取行数，再根据行数决定画多少行，但是数据获取有问题，暂时这块没有解决，只利用for循环画了64行，然后通过shell获取数据，生成json格式的文本，利用js获取json字符串，根据行数决定循环多少次讲其写入表格内。

<body><div class="Tab_title2"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span>
</div><div id="demo"></div>
<script>  var text = "" ;for (var i=1;i<64;i++){text += "<div class=\"Tab_body\"><span id=\"id_sid"+i+"\"></span><span id\=\"id_sn"+i+"\"></span><span id=\"id_data"+i+"\"></span><span id=\"id_dev"+i+"\"></span><span id=\"id_senf"+i+"\"></span><span id=\"id_senl"+i+"\"></span><span id=\"id_rssi"+i+"\"></span><span class=\"TB_last"+i+"\" id=\"id_onl"+i+"\"></span></div>";}document.getElementById("demo").innerHTML = text;
</script>
</body>

只贴出来部分较为重要的代码，在text主要是把一些需要的双引号进行转义，然后利用。innerHTML讲text的内容放到demo里，需要注意一点的是，demo的div标签需要加在script的前面否则因为加在顺序，这块会出错。

表格如上所示，下面利用shell脚本，nvram获取数据库内容，利用echo将其输出。

funWithParam(){NUM=`/bin/nvram get NUM`
for ((i=1; i<=$NUM; i++))
doa=`/bin/nvram get INFO${i} | awk -F "," '{print $1}'`b=`/bin/nvram get INFO${i} | awk -F "," '{print $2}'`c=`/bin/nvram get INFO${i} | awk -F "," '{print $3}'`d=`/bin/nvram get INFO${i} | awk -F "," '{print $4}'`e=`/bin/nvram get INFO${i} | awk -F "," '{print $5}'`f=`/bin/nvram get INFO${i} | awk -F "," '{print $6}'`g=`/bin/nvram get INFO${i} | awk -F "," '{print $7}'`h=`/bin/nvram get INFO${i} | awk -F "," '{print $8}'`echo ""echo -n \"id_sid${i}\":\"$id_sid${a}\",\"id_sn${i}\":\"$id_sn${b}\",\"id_data${i}\":\"$id_data${c}\", \"id_dev${i}\":\"$id_dev${d}\",\"id_senf${i}\":\"$id_senf${e}\",\"id_senl${i}\":\"$id_senl${f}\",\"id_rssi${i}\":\"$id_rssi${g}\",\"id_onl${i}\":\"$id_onl${h}\",done
}
echo '{'
funWithParamNUM=`/bin/nvram get NUM`
echo -n \"NUM\":\"$NUM\"
echo '}'

通过定义funWithParam 函数将每次获取到的内容打印出来，需要注意的几点小细节：
1.注意json要求格式很严格，必须要在执行函数之前先echo出 { 在输出内容完输出}
2.由于我最后还有一个数据因此在我这里格式是完全没问题的但是我测试过最后一个}前的逗号会自动忽略，echo出的内容也不包括逗号
3.注意一定要是用 echo -n 它的意思是不换行输出，这样组成的json串比较完美，换行可能导致问题。

下一步就是通过前端js获取数据，并将其写入表格了，这里使用的是ajax的函数JSON.parse(this.responseText)，这块我也不是很懂-.-

 var json_str = JSON.parse(xmlhttp.responseText);num_json = json_str.NUM;for (var i = 1; i <= num_json; i++){document.getElementById("id_sid"+i).innerHTML = json_str['id_sid'+i];document.getElementById("id_sn"+i).innerHTML = json_str['id_sn'+i];document.getElementById("id_data"+i).innerHTML = json_str['id_data'+i];document.getElementById("id_dev"+i).innerHTML = json_str['id_dev'+i];document.getElementById("id_senf"+i).innerHTML = json_str['id_senf'+i];document.getElementById("id_senl"+i).innerHTML = json_str['id_senl'+i];document.getElementById("id_rssi"+i).innerHTML = json_str['id_rssi'+i];document.getElementById("id_onl"+i).innerHTML = json_str['id_onl'+i];}

这里很简单，就不多说了。
字符串拼接这里，大都说的比较简单，我这种乱七八糟的操作可能很少会有人用，也是捣鼓好几天整出来的。。。。。还是我菜哈哈哈

JS利用for循环画表格解析json字符串数据写入表格相关推荐

js读取解析JSON类型数据【申明：来源于网络】
js读取解析JSON类型数据[申明:来源于网络] 地址:http://blog.csdn.net/sunhuaqiang1/article/details/47026841 转载于:https://w ...
js简单遍历解析json字符串
js简单遍历解析json字符串前两天接触到前台的json字符串遍历拼接于是就翻了一些资料总结了一下遍历取值的方法,如有不对请指正,感谢阅读!! 先上json串 { "list": ...
js解析json字符串、对象与json之间的转换
前言在数据传输流程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键. js解析json字符串 // JSON字符串 'v ...
js读取解析JSON类型数据
2019独角兽企业重金招聘Python工程师标准>>> 一.什么是JSON? JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独 ...
php使用 js格式解析,JavaScript解析JSON格式数据的方法示例
本文实例讲述了JavaScript解析JSON格式数据的方法.分享给大家供大家参考,具体如下: 1.使用JavaScript提供的eval()函数function JsonText1() { var ...
JavaScript解析json格式数据简单示例
JavaScript解析json格式数据简单示例本文通过for循环来获取json结点数据,需要的朋友可以参考以下这串json数据用来存储预加载的图片路径: 代码如下: var imgData = [ ...
【Python使用】Python解析JSON数据的基本方法/用MATLAB解析json格式数据
一 JSON数据格式介绍 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. JSON建构于两种结构:json是Javascript中的对象和数组中的对象, ...
spark- PySparkSQL之PySpark解析Json集合数据
PySparkSQL之PySpark解析Json集合数据数据样本 12341234123412342|asefr-3423|[{"name":"spark", ...
c#解析json字符串处理清晰易懂的方法
JSON文件读取到内存中就是字符串,.NET操作JSON就是生成与解析JSON字符串. 操作JSON通常有以下几种方式: 1. 原始方式:按照JSON字符串自己来解析. 2. 通用方式[★★★★★]: ...

JS利用for循环画表格解析json字符串数据写入表格

JS利用for循环画表格解析json字符串数据写入表格相关推荐

最新文章

热门文章

JS利用for循环 画表格 解析json字符串数据 写入表格

JS利用for循环 画表格 解析json字符串数据 写入表格相关推荐

最新文章

热门文章

JS利用for循环画表格解析json字符串数据写入表格

JS利用for循环画表格解析json字符串数据写入表格相关推荐