当前开发的程序中.因为抛弃了jsp的渲染,改为thymeleaf,并在比较厉害的前端进行数据json的渲染无误后,得出此json数据返回.

以往的Map<String,Object>返回json只是键值对,即使使用Map<String,Map<Object,Object>>此类的有整体name值的json还是有点不尽人意.

所以这里使用了JSONObject和JSONArray的组合形式:

首先看返回的json格式:

{
"totalData": 2,
"data": [{
"arr": [{
"update_time": 1553976471000,
"create_time": 1553850399000,
"province_a": "山东",
"user_id": 17,
"wl_id": 2,
"porcince_b": "山西"
}, {
"update_time": 1553976475000,
"create_time": 1553850399000,
"province_a": "东北",
"user_id": 17,
"wl_id": 4,
"porcince_b": "桂林"
}],
"name": "zq"
}, {
"arr": [{
"update_time": 1553976468000,
"create_time": 1553850399000,
"province_a": "济南",
"user_id": 18,
"wl_id": 1,
"porcince_b": "河南"
}, {
"update_time": 1553976473000,
"create_time": 1553850399000,
"province_a": "湖北",
"user_id": 18,
"wl_id": 3,
"porcince_b": "武汉"
}],
"name": "wang"
}],
"rows": [{
"u_id": 17,
"tel": 13439222875,
"password": "7251f35e038a777037ce0f80d420cde4",
"salt": "Lm/Gp+J2dyTrLLmCNaoq1Q==",
"name": "zq",
"role_id": 2,
"way_type": 0,
"create_time": "2019-03-30 08:52:24",
"update_time": "2019-03-30 08:52:24",
"lastlogin_time": "2019-03-30 08:52:24"
}, {
"u_id": 18,
"tel": 17310208735,
"password": "7248bfaaa6c1d33340c9b3176f59f925",
"salt": "qBjovbk4f21pcBJJcRU7oA==",
"name": "wang",
"role_id": 2,
"way_type": 0,
"create_time": "2019-03-30 15:31:07",
"update_time": "2019-03-30 15:31:07",
"lastlogin_time": "2019-03-30 15:31:07"
}]
}

前端根据key value的格式获取到每一个键中的value或是数组

这里可以使用之前的EChartsFormatter组件中的getParamValues方法.

/**
* 根据传入name和json数据获取指定name的value值数组
* "create_time"为时间节点,即该条数据时间key字段名(可扩展)
*
* @param name 要获取的其中某一个json的key的value数组
* @param json 控制层返回的json数据如thisData:[{"id":33,"province":"山东","company":"A公司0","s_company":"公司0","softening_point":0.1,"toluene":1,"quinoline":1,"beta_resin":1,"coking_value":1,"ash":1,"today_price":123,"remarks":"备注0","reporter":"张","create_time":"2019-02-20 13:47:52","update_time":"2019-02-20 13:47:52","b_time":null,"e_time":null,"order":null},
* @returns {Array} 假设传入("company",thisDate),则会获取数组[A公司0,B公司1,C公司2,D公司3] 注意这里的company的数组还不能用于ECharts的维度,因为要设置
*/
function getParamValues(name, json) {
console.log("name:"+name);
var ret = [];
var len = Object.keys(json).length;
for (var i = 0; i < len; i++) {
if (name == "create_time") {
var aDate = formatDateUntilDay(json[i][name]);
ret.push(aDate);
}else{
ret.push(json[i][name]);
}
// console.log("json[i][name]:"+json[i][name]);
}
return ret;
}

上面的进行改善后:

/**
* 根据传入name和json数据获取指定name的value值数组
* "create_time"为时间节点,即该条数据时间key字段名(可扩展)
*
* @param name 要获取的其中某一个json的key的value数组
* @param json 控制层返回的json数据如thisData:[{"id":33,"province":"山东","company":"A公司0","s_company":"公司0","softening_point":0.1,"toluene":1,"quinoline":1,"beta_resin":1,"coking_value":1,"ash":1,"today_price":123,"remarks":"备注0","reporter":"张","create_time":"2019-02-20 13:47:52","update_time":"2019-02-20 13:47:52","b_time":null,"e_time":null,"order":null},
* @returns {Array} 假设传入("company",thisDate),则会获取数组[A公司0,B公司1,C公司2,D公司3] 注意这里的company的数组还不能用于ECharts的维度,因为要设置
*/
function getParamValues(name, json,timeName) {
console.log("name:"+name);
var ret = [];
var len = Object.keys(json).length;
for (var i = 0; i < len; i++) {
if (name == timeName) {
var aDate = formatDateUntilDay(json[i][name]);
ret.push(aDate);
}else{
ret.push(json[i][name]);
}
// console.log("json[i][name]:"+json[i][name]);
}
return ret;
}

所调用的时间格式化方法, 因为json中的时间是精确到秒的,也就是 yyyy-MM-dd hh:mm:ss

这里因为echarts组件要展示时间间隔用于在下方展示,所以如果是秒的话就过多了,这里使用时间格式化,只获取json中的时间到天为止.

如下:

/**
* 将时间格式转换到直到天 省去时分秒
* @param date
*/
function formatDateUntilDay(date) {
var date = new Date(date);
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var formatDate = year + "-" + month + "-" + day;
return formatDate;
// console.log(format);
}

这里继续先看下JSON数据.

最上面的json数据我们看到,最外层的key有3个, totalData(分页用到),data(总数据list),rows(分页用展示数据)

单看data的数据格式:

"data": [{
"arr": [{
"update_time": 1553976471000,
"create_time": 1553850399000,
"province_a": "山东",
"user_id": 17,
"wl_id": 2,
"porcince_b": "山西"
}, {
"update_time": 1553976475000,
"create_time": 1553850399000,
"province_a": "东北",
"user_id": 17,
"wl_id": 4,
"porcince_b": "桂林"
}],
"name": "zq"
}, {
"arr": [{
"update_time": 1553976468000,
"create_time": 1553850399000,
"province_a": "济南",
"user_id": 18,
"wl_id": 1,
"porcince_b": "河南"
}, {
"update_time": 1553976473000,
"create_time": 1553850399000,
"province_a": "湖北",
"user_id": 18,
"wl_id": 3,
"porcince_b": "武汉"
}],
"name": "wang"
}],

data中存放了json数组,其中一个的key是arr,另一个key是name, arr对应的value是另外的数组,各自存放不同的数据.,name对应的只是一个名称.

在java代码中,首先要声明出用于返回的JSONObject.

JSONObject resultJsonObj = new JSONObject();

JSONObject的存放形式是key value,也可以先理解为Map集合. 方法同样也是put方法.

这里的key放入的是上文提到的 totalData(分页用到),data(总数据list),rows(分页用展示数据)

对于rows的value,也就是下面的数据,是两组对象,也就是获取的如"学生数据集合","老师数据集合",就是说白了是数据库里好几条的数据元组回来的List集合:

"rows": [{
"u_id": 17,
"tel": 13439222875,
"password": "7251f35e038a777037ce0f80d420cde4",
"salt": "Lm/Gp+J2dyTrLLmCNaoq1Q==",
"name": "zq",
"role_id": 2,
"way_type": 0,
"create_time": "2019-03-30 08:52:24",
"update_time": "2019-03-30 08:52:24",
"lastlogin_time": "2019-03-30 08:52:24"
}, {
"u_id": 18,
"tel": 17310208735,
"password": "7248bfaaa6c1d33340c9b3176f59f925",
"salt": "qBjovbk4f21pcBJJcRU7oA==",
"name": "wang",
"role_id": 2,
"way_type": 0,
"create_time": "2019-03-30 15:31:07",
"update_time": "2019-03-30 15:31:07",
"lastlogin_time": "2019-03-30 15:31:07"
}]

rows的put

    ArrayList<User> userList = (ArrayList) userService.getSalasmanListAll();
PageInfo<User> pageInfo = new PageInfo<User>(userList);
JSONObject resultJsonObj = new JSONObject();
resultJsonObj.put("rows", pageInfo.getList());//展示的当前也的数据list

下面重点说明key为data的数据格式:

    List list = new ArrayList();
for (User user : pageInfo.getList()) {
JSONObject linkJsonObj = new JSONObject();
JSONObject uNameJsonObj = new JSONObject(); //name 键值对
JSONObject wlJsonObj = new JSONObject(); //wayline 键值对
// JSONArray wlJsonArray = new JSONArray(); //wayline 数组集合
// "name": "yyy"
uNameJsonObj.put("name", user.getName());
//获取该用户的线路集合
ArrayList<Way_Line> wayLineByUserIdList = (ArrayList) way_lineService.getWayLineByUserId(user.getU_id());
// wlJsonArray.add(wayLineByUserIdList);
// "arr": [{"pro": "aa"}, {"pro": "aa"}]
wlJsonObj.put("arr", wayLineByUserIdList);
linkJsonObj.putAll(uNameJsonObj);
linkJsonObj.putAll(wlJsonObj);
JSONObject jsonObject = JSONObject.parseObject(linkJsonObj.toString());
list.add(jsonObject);
}

经过组员whc简化后:

    List list = new ArrayList();
for (User user : pageInfo.getList()) {
JSONObject linkJsonObj = new JSONObject();
// "name": "yyy"
// uNameJsonObj.put("name", user.getName());
linkJsonObj.put("name", user.getName());
//获取该用户的线路集合
ArrayList<Way_Line> wayLineByUserIdList = (ArrayList) way_lineService.getWayLineByUserId(user.getU_id());
// wlJsonArray.add(wayLineByUserIdList);
// "arr": [{"pro": "aa"}, {"pro": "aa"}]
linkJsonObj.put("arr", wayLineByUserIdList);
list.add(linkJsonObj);
}

1. 首先的list声明,和上面rows一样,是为了放置整体的对象.

2. 因为"学生对象"/or"用户对象"的不同,其对应的关联表的数据也是不同的,这里所有的JSONObject声明都是在for循环里面.

(如果在for循环外层,使用put,put相同的名称,则会被后put的给覆盖掉,因为Map,以及JSONObject放置的数据key必须是唯一的,不可重复)

3. 因为在data这个数据中,除了有arr,还有name,所以首先声明 wlJsonObj 和 uNameJsonObj ,而作为合并,声明使用 linkJsonObj 用于对之前的arr和name的简单合并.

4. 使用putAll方法,分别放入上面的两个键值对数据,并且使用 JSONObject.parseObject(linkJsonObj.toString()) 合并为 JSONObject 对象.

5. for循环第一次,放置list一个合并后的JSONObject对象:

{
"arr": [{
"update_time": 1553976471000,
"create_time": 1553850399000,
"province_a": "山东",
"user_id": 17,
"wl_id": 2,
"porcince_b": "山西"
}, {
"update_time": 1553976475000,
"create_time": 1553850399000,
"province_a": "东北",
"user_id": 17,
"wl_id": 4,
"porcince_b": "桂林"
}],
"name": "zq"
}

同样,此时list有了这条数据,之后通过for循环又获取了不同的user.getName和对应的数据list,再次放入for循环外层声明的List集合.

这里其实更改下名称就更好理解了:

for循环里的jsonObject改为 mergeObject :

JSONObject mergeObject= JSONObject.parseObject(linkJsonObj.toString());

for循环外层的List声明改为 dataList :

List dataList = new ArrayList();

最后,该获取到的数据已经获取到,

在for循环外面将添加了数据的list, put到resultJsonObj中进行返回,就可以获取文章开头的json数据格式了.

resultJsonObj.put("data",list);

return resultJsonObj;

[JSONObject/JSONArray] - 定制的JSON格式返回的更多相关文章

  1. jsonObject jsonArray jsonTokener jsonStringer,json解析以及http请求获取josn数据并加以解析

    JSON的定义: 一 种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性.业内主流技术为其提供了完整的解决方案(有点类似于正则表达式 ,获得了当今大部分语言的 支持),从而可以在不同平台间进行 ...

  2. 如何解决jersey框架中以json格式返回数组,当数组中元素一个时json格式不对

    原文地址:http://www.cnblogs.com/swpk/p/3566536.html?utm_source=tuicool jersey 是oracle 出的一个较好的REST框架.使用此框 ...

  3. ajax post json格式返回

    Ajax.aspx: Response.ContentType = "application/json"; Response.Write("{result: '" ...

  4. php get接口,并在浏览器中以json格式返回查找到的数据

    php查询数据有6个步骤,分别为: 连接数据库服务器,使用的命令为:mysql_connect("服务器名称","用户名","密码") 选择 ...

  5. ECharts访问后台,JSON格式返回数据实例

    完成图 一.页面代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pa ...

  6. 返回参数去掉xml格式,以纯json格式返回(转)

    Json 格式显示public static void Register(HttpConfiguration config) { //////////////设置不以xml格式返回 config.Fo ...

  7. 使用JSONObject类来生成json格式的数据

    JSONObject类不支持javabean转json 生成json格式数据的方式有: 1.使用JSONObject原生的来生成 2.使用map构建json格式的数据 3.使用javabean来构建j ...

  8. Spring Boot 无侵入式 实现RESTful API接口统一JSON格式返回

    前言 现在我们做项目基本上中大型项目都是选择前后端分离,前后端分离已经成了一个趋势了,所以总这样·我们就要和前端约定统一的api 接口返回json 格式, 这样我们需要封装一个统一通用全局 模版api ...

  9. spring mvc接收参数方式,json格式返回请求数据

    1 使用方法形参使用变量接收提交的数据 2 在方法的形参中使用模型接收数据 3 如果在提交的表单中有多个数据模型,需要创建一个新的Bean,里面的属性是要接收的对象变量. 4 接收提交的日期字符串,转 ...

随机推荐

  1. Web前端攻击方式及防御措施

    一.XSS [Cross Site Script]跨站脚本攻击 恶意攻击者往Web页面里插入恶意Script代码,当用户浏览该页之时,嵌入其中Web里面的Script代码会被执行,从而达到恶意攻击用户 ...

  2. js中的值类型和引用类型的区别

    1.JavaScript中的变量类型有哪些? (1)值类型(基本类型):字符串(String).数值(Number).布尔值(Boolean).Undefined.Null  (这5种基本数据类型是按 ...

  3. Bash 脚本 去除注释

    sed -i "/^#/d;/^ *$/d" /etc/squid/squid.conf

  4. padding 和 float属性

    padding = {上内,右内,下内,左内} 内边距 padding:"10, 5,15,20" float = "true"  控件固定住.

  5. vscode添加vue格式化插件

    1.安装Vetur插件 2.ctrl+,打开用户设置,找到"vetur.format.defaultFormatter.html": "none",

  6. js中级小知识2

    1.面向对象 js一开始就是写网页特效,面向过程的,作者发现这样写不好,代码重复利用率太高,计算机内存消耗太大,网页性能很差.所以作者就收到java和c的影响,往面向对象靠齐.js天生有一个Objec ...

  7. Gym 101775A - Chat Group - [简单数学题][2017 EC-Final Problem A]

    题目链接:http://codeforces.com/gym/101775/problem/A It is said that a dormitory with 6 persons has 7 cha ...

  8. MongoDB复制集原理、环境配置及基本测试详解

    一.MongoDB复制集概述 MongoDB复制集实现了冗余备份和故障转移两大功能,这样能保证数据库的高可用性.在生产环境,复制集至少包括三个节点,其中一个必须为主节点,一个从节点,一个仲裁节点.其中 ...

  9. mac安装gcc

    xcode-select --install安装命令行工具 安装完毕后,可能报错 xcrun: error: active developer path ("/Applications/Xc ...

  10. Golang--选择、循环语法总结

    1.判断语句if 条件表达式没有括号 支持初始化表达式 初始化语句的变量自在本block内有效 if a,b,c := 1,2,3;a+b+c>6 { fmt.Println("hah ...