springMVC如何利用json向前端传递一个集合

今天写了个js代码,需要遍历一个集合,但是程序执行到遍历的代码时就停止运行了,一度认为是js代码写错了,怎么改都不行,很是郁闷

springmvc代码:

 List<Nvr> nvrs = cameraService.findAllNvrByZoneName(zoneName);
 model.addAttribute("nvrs",nvrs);	 

js中代码如下:

var test = ${nvrs};
for(var i =0;i<test.length;i++){
	console.log(test[i]);
}

运行后在浏览器的源码是这样的:

vartest=[Nvr[nvr_id=1,nvr_name=test,nvr_ipv4=124.133.9.8,nvr_ipv6=null,nvr_port=809,nvr_username=admin,nvr_password=12345,zone_id=2]];

for(var i =0;i<test.length;i++){
	console.log(test[i]);
}

很显然在第一行中test的赋值是错误的,

然后把springmvc中的代码修改,把list结合转成jsonArray字符串,然后传递给前端,代码如下

List<Nvr> nvrs = cameraService.findAllNvrByZoneName(zoneName);
String nvrsjson = JSONArray.toJSONString(nvrs);
model.addAttribute("nvrsjson",nvrsjson);

用alibaba的JSONArray类处理成json字符串,然后传递给前端,再转成js对象,

在浏览器端查看源码如下:

var test = [{"nvr_id":1,"nvr_ipv4":"124.133.9.8","nvr_name":"test","nvr_password":"12345","nvr_port":809,"nvr_username":"admin","zone_id":2}];
for(var i =0;i<test.length;i++){
	console.log(test[i].nvr_ipv4);
}

这次test赋值就为json对象了

ps:以上代码中ip,port,username,password的值均已修改,切勿当真.

为什么会犯这个错误呢,

之前用springmvc很长时间没有显式的自己去转json字符串,慢慢把mvc的原理都忽略了;

现在解释一下为什么以前传递对象没有显示的转json字符串就没事.而这次就不行呢.

这要和springmvc的原理说起,el表达式取值是在springmvc的视图解析的时候取值的,以前传递的对象在视图解析器中就已经取出来具体的值了,然后再传给前端,前端接收到的就是具体的字符串或数字之类的值,并不存在json对象,

而这次需要把这个list集合传递给前端,然后让浏览器去解析这个list对象,这就需要转为json对象了,

比如下面的两个对比   (nvrs为前端的一个list集合,为java对象)

//js中代码如下: 
var test = "${nvrs[0].nvr_ipv4}";
//传递到浏览器中代码如下:
var test = "124.133.9.8 ";

ps:此处在给test赋值时必须在EL表达式上加引号,如有不懂请看本人的另一篇文章:http://blog.csdn.net/zlt_1222/article/details/78964408

//js中代码如下:
var test = ${nvrs};
//传递到浏览器中代码如下:
var test = [Nvr [nvr_id=1, nvr_name=test, nvr_ipv4=124.133.9.8 , nvr_ipv6=null, nvr_port=809,nvr_username=admin, nvr_password=12345, zone_id=2]];

/*
显然浏览器中的源码是错误的,所以必须把nvrs转成json字符串,浏览器才能正常解析
*/