js解析后端传递过来json格式的list
一、json格式的list为:是一个具有温度、湿度、时间三个属性的json格式的list数据。二.java后端代码如代码所示:创建一个具有三属性的list对象并转化为json格式,准备传递给前端。@RequestMapping(value = "/getData", method = RequestMethod.POST)@ResponseBodypublic...
·
一、json格式的list为:


是一个具有温度、湿度、时间三个属性的json格式的list数据。
二.java后端代码
如代码所示:创建一个具有三属性的list对象并转化为json格式,准备传递给前端。
@RequestMapping(value = "/getData", method = RequestMethod.POST)
@ResponseBody
public String getData() {
logger.info("设置图表数据显示!");
//从数据库中查询到所有数据对象
List<BaseAdminChart> resultList = baseAdminChartMapper.selectAll();
List list = new ArrayList();
for (int i=0;i<resultList.size();i++) {
//ChartRequest 为具有此三个属性的对象,插入到list中
ChartRequest chart = new ChartRequest(resultList.get(i).getTemperature(),resultList.get(i).getHumilevel(),resultList.get(i).getRegTime());
list.add(chart);
}
String data = JsonUtils.objectToJson(list);
System.out.println("data数据为:"+data);
return data;
}
三、前端的ajax请求格式
1.此处result为从后端接收过来的json格式数据
2.下面的转换之后可以获取数据中的指定属性
$.ajax({
type: "POST",
url: "/chart/getData",
async: true,
dataType: "json",
success: function (result) {
console.log("获取的result信息:"+result);
/*将json数据转换为对象*/
var obj = eval(result);
var humilevel = new Array();
var temperature = new Array();
var regTime = new Array();
for(var i in obj)
{
console.log("对象的温度"+obj[i].temperature);
temperature[i] = obj[i].temperature;
console.log("对象的湿度"+obj[i].humilevel);
humilevel[i] = obj[i].humilevel;
console.log("对象的时间"+obj[i].regTime);
regTime[i] = obj[i].regTime;
}
}
};
四、(echarts部分,无关)可以根据三个属性进行echarts列表属性的填写
//提交表单
window.onload = function (){
//指定图表的配置项和数据
var myChart2 = echarts.init(document.getElementById('chartmain'));
myChart2.showLoading();
$.ajax({
type: "POST",
url: "/chart/getData",
async: true,
dataType: "json",
success: function (result) {
console.log("获取的result信息:"+result);
/*将json数据转换为对象*/
var obj = eval(result);
var humilevel = new Array();
var temperature = new Array();
var regTime = new Array();
for(var i in obj)
{
console.log("对象的温度"+obj[i].temperature);
temperature[i] = obj[i].temperature;
console.log("对象的湿度"+obj[i].humilevel);
humilevel[i] = obj[i].humilevel;
console.log("对象的时间"+obj[i].regTime);
regTime[i] = obj[i].regTime;
}
for (var j=0;j<humilevel.length;j++)
{
console.log("humilevel数组值为:"+humilevel[j]);
}
myChart2.hideLoading();//隐藏加载
myChart2.setOption({
title: {
text: '温湿度数据分析'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['期望温度', '温度', '期望湿度', '湿度']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
//data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
data: regTime
},
yAxis: {
type: 'value'
},
series: [
{
name: '期望温度',
type: 'line',
stack: '总量',
data: [25,27,23,20,26,24,28]
},
{
name: '温度',
type: 'line',
stack: '总量',
//data: [20,22,16,14,13,12,11]
data: temperature
},
{
name: '期望湿度',
type: 'line',
stack: '总量',
data: [30,32,29,35,27,38,34]
},
{
name: '湿度',
type: 'line',
stack: '总量',
data: humilevel
}
]
});
/*刷新页面*/
//location.reload();
}
});
}
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐

所有评论(0)