eval解析json字符串

场景:在springMVC,手动拼接的list,转成本json字符串后,传到前台,

解决:需要解析成json对象,获取对象的属性,动态生成table。

首先,以下是后台准备好的list,list中有两条记录,每条记录有五个属性:

1 String json;
2 json = JSONArray.fromObject(list).toString();//什么需要转成json字符串,就将对应的list放进去进行转换
3 map.put("balanceList", json);
4 return map;

然后,前台通过Ajax进行接收:

/* 根据查询条件动态创建table */
  function test(){
  //清除div中之前的table
    $("#table_div").empty();
    var partVersion = '0';
    var containerIds = '0';
  	$.ajax({ //ajax取得相应的值
			type: "POST",
			url: "balance/banlanceList.do", 
			data: {'partVersion':partVersion,'containerIds':containerIds},
			success:function(data){
			  var obj=eval("("+data.balanceList+")");//将后台传过来的list进行解析
			  var j=0;
			  for(j=0;j<obj.length;j++){
			  	var balanceObj = obj[j];
			  	var table= $("<table />").addClass("table"+j).appendTo($("#table_div"));//list中有多少条记录,循环创建多少个table
				  	//每一条记录中有五个属性,创建完table后,继续创建五个行
				  	var row1 = $("<tr/>").appendTo(".table"+j);
				  	var row2 = $("<tr/>").appendTo(".table"+j);
				  	var row3 = $("<tr/>").appendTo(".table"+j);
				  	var row4 = $("<tr/>").appendTo(".table"+j);
				  	var row5 = $("<tr/>").appendTo(".table"+j);
                       //每一行的列是不固定的,通过遍历自动生成列
					  	for(var i=0;i<balanceObj.length;i++){
					  		var o1=balanceObj[i].week;
					  		var o2=balanceObj[i].stock;
					                var o3=balanceObj[i].demand;
						  		if(i==0){
						  			var td=$("<td />").css({ "border-right": "1px solid rgb(217,217,217)"});
						  			row1.append(td);
								   	td.text("编号"+balanceObj[i].containerId);
								   }else{
								    var td=$("<td />");
								    row1.append(td);
								    var week = o1.substring(4,6) + "w";
								    td.text(week);
								   }
								   if(i==0){
						  			var td=$("<td />").css({ "border-right": "1px solid rgb(217,217,217)"});
						  			row2.append(td);
								   	td.text("计划");
								   }else{
								    var td=$("<td />");
								    row2.append(td);
								    td.text(0);
								   }
								   if(i==0){
						  			var td=$("<td />").css({ "border-right": "1px solid rgb(217,217,217)"});
						  			row3.append(td);
								   	td.text("库存量");
								   }else{
								    var td=$("<td />");
								    row3.append(td);
								    td.text(o2);
								   }
								   if(i==0){
						  			var td=$("<td />").css({ "border-right": "1px solid rgb(217,217,217)"});
						  			row4.append(td);
								   	td.text("需求量");
								   }else{
								    var td=$("<td />");
								    row4.append(td);
								    td.text(o3);
								   }
								   if(i==0){
						  			var td=$("<td />").css({ "border-right": "1px solid rgb(217,217,217)"});
						  			row5.a ppend(td);
								   	td.text("库存-需求");
								   }else{
								    var td=$("<td />");
								    row5.append(td);
								    td.text(o2-o3);
								   }
					  	
				  	}
				  	
			  }
			  tableRenderer();
			}
			
		});
  }

//对table进行渲染,对第一列添加背景色,对选中添加背景色
function tableRenderer(){
	$(".baobiao_tab table tbody tr td:last-child").css('border-right','none');
			$(".baobiao_tab table tbody tr td:first-child").css('background','rgb(238,238,238)');
			$(".baobiao_tab table:last-child tr:last-child td").css('border-bottom','none');
			$(".baobiao_tab table:first-child").css('border-top','none');

			$(".baobiao_tab table tbody tr").click(function(){			
				$(".baobiao_tab table tbody tr").css("background","rgb(255,255,255)");
				$(this).css("background","rgb(223,232,246)");
			})
}

)

页面div用于显示table
<div class="baobiao_tab" id="table_div">
</div>

 小结:(1)List集合转换成JSON对象

用net.sf.json包下JSONArray的静态方法:fromObject(list) 这是网上大多是都是直接用此方法快捷转换JSON,但是对于Hibernate级联操作关联的对象,这个方法就会报错,如果将映射文件中的级联配置去掉就行了。

    解决方法就是:JSONArray subMsgs = JSONArray.fromObject(object, config);

//提供了一个过滤作用,如果遇到关联的对象时他会自动过滤掉,不去执行关联关联所关联的对象
JsonConfig config = new JsonConfig();
        config.setJsonPropertyFilter(new PropertyFilter() {
            public boolean apply(Object arg0, String arg1, Object arg2) {
                 if (arg1.equals("article") ||arg1.equals("fans")) {
                        return true;
                    } else {
                        return false;
                    }
            }
        });

(2)eval在JS中将JSON的字符串解析成JSON数据格式

var dataObj=eval("("+data+")");//转换为json对象

 (3)Jquery 操作dom

   第一次写,表示挺好用的,一些常用的方法,appendTo,remove,empty,attr,css等等,需要多加练习

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券