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

最新推荐文章于 2024-06-20 23:49:55 发布

Assg444

最新推荐文章于 2024-06-20 23:49:55 发布

阅读量926

点赞数 1

文章标签：字符串 shell javascript

本文链接：https://blog.csdn.net/Assg444/article/details/118675892

版权

背景：因为工作需要，需要讲数据拆分之后放入表格中，一共需要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++))
do
	a=`/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 '{'
funWithParam

NUM=`/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];
	}

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

Assg444

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS利用for循环画表格解析json字符串数据写入表格

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

扫一扫