(记录贴)后端返回的Json转成前端需要的json格式

Posted 小样5411

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了(记录贴)后端返回的Json转成前端需要的json格式相关的知识,希望对你有一定的参考价值。

记录贴

进一个公司实习快一个月了,也是个小白,今天把我这两天遇到的一个实际问题记录一下,这个问题我解决了很久,一般容易点接口都可以直接查询一下数据库就能实现,然而这次的不一样。需求是实现这个功能的接口,就是给折线图的json数据。
在这里插入图片描述
下面是我查出的json格式,type表示是道路类型(2-省道,3-县道,4-乡道),time就是对道路进行养护的时间,maintainCount就是这个月对这个道路养护的次数,养护就是比如地面出现大的裂缝和坑就要派相关人来养护。下面数据就是数据库查出的一条一条数据,数据库字段year_month在mybatis中映射property为time,road_level映射property为type,maintain_count映射为maintainCount
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
查出来一开始后端返回的json如下,和数据库对应,一个json数据对应数据库一行数据,但前端不是要这种格式,后面会贴出来

{[
	{
	"type":"2",
	"time":"2021-04",
	"maintainCount":"1"
	},
	{
	"type":"2",
	"time":"2021-05",
	"maintainCount":"1"
	}
],
[	
	{
	"type":"3",
	"time":"2021-02",
	"maintainCount":"1"
	},
	{
	"type":"3",
	"time":"2021-03",
	"maintainCount":"2"
	},
	{
	"type":"3",
	"time":"2021-06",
	"maintainCount":"1"
	}
],
[
{
	"type":"4",
	"time":"2021-05",
	"maintainCount":"1"
	},
	{
	"type":"4",
	"time":"2021-06",
	"maintainCount":"1"
	}
]}

而前端要的格式呢,就是下面的,前端可以根据最近半年时间作为横坐标,data作为纵坐标,从而形成折线图,三条折线对应省道县道乡道

{
	time:['202102','202103','202104','202105','202106','202107'],
	roadData:[
		{
			type:'省道',
			data:[0,0,0,1,1,0]
		},
		{
			type:'乡道',
			data:[1,0,2,0,0,1]
		},
		{
			type:'县道',
			data:[0,0,0,0,1,1]
		}
	]
}

在这里插入图片描述
如何做呢,这里主要用到万能的Map进行转化,就是对象和Map之间的转化。这面给出我写的实现代码,期望对你有一定启发,刚实习不久小白代码写的有点烂,别喷哈,业务逻辑想了挺久,还有Map和对象之间转换很关键,各种类型之间的转换可以看下面文章,当然fastjson有很多转换的方法,可以直接导入用,我这里还是用别人文章发的方法调用。

https://blog.csdn.net/qq_42734243/article/details/90382348

我这里就用了getObjectToMap方法,就是对象转Map,Mybatis会将数据库查询出的数据根据对应的对象映射关系,转换成对象,打印可以得出如Student(id=1,name=“zhangsan”,age=18),转成Map,就变成 {{id:1,name:“zhangsan”,age:18}},实现核心代码如下,因为业务不一样,可能和你想要的业务逻辑不一样,但是思路可以借鉴看看

public ResultMsg<RoadMaintainRecordVO> queryRoadMainRecordInfo() throws IllegalAccessException {

        //月份列表
        List<TimeData> timeDatas = roadMaintainRecordService.queryNearSixMonth();
        List<String> time = new ArrayList<>();
        for (TimeData timeData : timeDatas) {
            time.add(timeData.getTime());
        }
        //roadData数据:包括type(街道)和data(每个月的养护数据),
        List<Map<String,Object>> list = new ArrayList<>();
        for (int i = 2; i <= 4; i++) {
            List<RoadMaintainRecordVO> roadDatas = roadMaintainRecordService.queryRoadMaintainRecordInfo(i);
            for (RoadMaintainRecordVO roadMaintainRecordVO : roadDatas){
                Map<String, Object> objectToMap = getObjectToMap(roadMaintainRecordVO);
                list.add(objectToMap);
            }
        }

        ArrayList<String> a = new ArrayList<>();//省道每月养护数据
        ArrayList<String> b = new ArrayList<>();//县道每月养护数据
        ArrayList<String> c = new ArrayList<>();//乡道每月养护数据

        for (int i = 0; i < 6; i++) {
            a.add("0");
            b.add("0");
            c.add("0");
        }

        String mCount = null;
        String mTime = null;
        String mTtype = null;

        for (Map<String, Object> map : list) {

            mCount = String.valueOf(map.get("maintainCount"));
            mTime = (String) map.get("time");
            mTtype =(String) map.get("type");

            if (mTtype.equals("2")) {
                a.set(getDate(mTime,time), mCount);
            } else if (mTtype.equals("3")) {
                b.set(getDate(mTime,time), mCount);
            } else {
                c.set(getDate(mTime,time), mCount);
            }
        }

        List<Map<String, Object>> roadDataList = new ArrayList<>();
        Map<String, Object> M1 = new LinkedHashMap<String, Object>();
        M1.put("type","省道");
        M1.put("data",a);
        Map<String, Object> M2 = new LinkedHashMap<String, Object>();
        M2.put("type","县道");
        M2.put("data",b);
        Map<String, Object> M3 = new LinkedHashMap<String, Object>();
        M3.put("type","乡道");
        M3.put("data",c);
        roadDataList.add(M1);
        roadDataList.add(M2);
        roadDataList.add(M3);

        Map<String, Object> maintain = new LinkedHashMap<String, Object>();
        maintain.put("time",time);
        maintain.put("roadDataList",roadDataList);

        return ResultMsg.success(maintain);
    }

    public int getDate(String str,List<String> time){
        if(str.equals(time.get(0))){
            return 0;
        }
        else if(str.equals(time.get(1))){
            return 1;
        }
        else if(str.equals(time.get(2))){
            return 2;
        }
        else if(str.equals(time.get(3))){
            return 3;
        }
        else if(str.equals(time.get(4))){
            return 4;
        } else{
            return 5;
        }
    }

    //Object转Map
    public static Map<String, Object> getObjectToMap(Object obj) throws IllegalAccessException {
        Map<String, Object> map = new LinkedHashMap<String, Object>();
        Class<?> clazz = obj.getClass();
//            System.out.println(clazz);
        for (Field field : clazz.getDeclaredFields()) {
            field.setAccessible(true);
            String fieldName = field.getName();
            Object value = field.get(obj);
            if (value == null){
                value = "";
            }
            map.put(fieldName, value);
        }
        return map;
    }

上面代码执行后,我就将数据库查出的json,转成前端需要的进行返回啦
在这里插入图片描述

以上是关于(记录贴)后端返回的Json转成前端需要的json格式的主要内容,如果未能解决你的问题,请参考以下文章

前端向后端传一个json数组对象

json前后台数据交互 java后端怎么实现

Layui的数据表格增删改,后端回传json格式封装

前端向后端发送请求(FormData)

Java后台的BigDecimal类型转为json返回前端时,原本为null的到了前端却变成

前端与后端的数据交互(jquery ajax+python flask)