jQuery解析后台传递到前端的json

后台传递给前端部分的json代码

import org.springframework.messaging.simp.SimpMessagingTemplate;

//messagingTemplate对象的创建
@Autowired(required = false)
private SimpMessagingTemplate messagingTemplate;

//创建需要传递的对象，使用messagingTemplate发送至前端
CallBackMessage message = new CallBackMessage();
message.setDate(LocalTime.now());
message.setTitle(liveBroadcast.getTitle());
				
List<PictureContent> pictures = new ArrayList<PictureContent>();
for(LiveBroadcastPicture pic : prictures){
	PictureContent content = new PictureContent();
	content.setPicture(pic.getImgUrl());
	content.setLink(pic.getContentUrl());
	pictures.add(content);
}
message.setPictures(pictures);
messagingTemplate.convertAndSend("/topic/send/"+form.getProductLineId(), message);
           

前端接收到的数据（字符型）

{   "title":"直播介绍",
    "date":"17:13",
    "pictures":
    [{"picture":"/uploadImage/ot/ji/fhoiqc1t.png","link":"http://323/adfsafwe/qe"},
     {"picture":"/uploadImage/8h/d2/crgq0g4r.png","link":"http://323/adfsafwe/qe"},
     {"picture":"/uploadImage/jh/lt/w7ivrukb.jpg","link":"http://323"}
    ]
}
           

解析json格式的字符串

      方法1

var msg = '{   "title":"直播介绍",
    "date":"17:13",
    "pictures":
    [{"picture":"/uploadImage/ot/ji/fhoiqc1t.png","link":"http://323/adfsafwe/qe"},
     {"picture":"/uploadImage/8h/d2/crgq0g4r.png","link":"http://323/adfsafwe/qe"},
     {"picture":"/uploadImage/jh/lt/w7ivrukb.jpg","link":"http://323"}
    ]
}' ;

JSON.parse(msg,function(key,value){    
 ergodicJson(key,value) 
});   
           

  方法2

//JSON.stringify( ) —— 将对象序列化为JSON字符串
           

//JSON.parse(  )用于将一个 JSON 字符串转换为对象  推荐使用JSON.parse方法
var val = JSON.parse(msg); 
$.each(val, function(item) {
   var jValue=val[item];//key所对应的value
   ergodicJson(item,jValue)
});
           

    方法3

//$.parseJSON() 函数用于将符合标准格式的的JSON字符串转为与之对应的JavaScript对象。
var val = $.parseJSON(msg); 
for(var item in val){
  var jValue=val[item];//key所对应的value
  ergodicJson(item,jValue)
} 
           

解析json对象并添加到ul后面

function ergodicJson(key,val){
        var keypictures ="pictures";

        if(key == "date"){
		datehtml ="<tt>"+value+"</tt>";
	}
	if(key == "title"){
		titlehtml ="<p>"+value+"<p>";
	}
        //遍历json对象里面数组
        if(keypictures == key && value.length>0){
		var length = value.length;
		for(var j = 0;j<length;j++) {
			var info = value[j];
			 imghtml = imghtml+"<a href='"+info.link+"'> <img src='"+info.picture+"'/></a>";
	        }
        }
			
	var htmlval = "<li>"+datehtml+titlehtml+imghtml+"</p></p></li>";
	$("#noLi").remove();
	$("#liveBroadcastUl").append(htmlval);
}