欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 前端技术 > HTML >内容正文

HTML

如何解析json字符串及返回json数据到前端

发布时间:2024/1/17 HTML 49 豆豆
生活随笔 收集整理的这篇文章主要介绍了 如何解析json字符串及返回json数据到前端 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

前言:最近需要实现的任务是:写若干个接口,并且接口中的请求数据是json格式,然后按照请求参数读取前端提前整理好的json数据,并且将json数据返回到服务器端。

  • 主要的工具:Gson  2.8.2
  • 项目支撑:springboot
  • maven

0、前导——了解一下基本的json语法

 

JSON是一种类似 XML的语言,是用了存储和交换文本信息的语法。它的全称为JavaScript Object Notation(JavaScript 对象表示法)。与xml对比,它更小、更快,更易解析。

想要更好的解析JSON,必须能看懂JSON数据,这样就必须了解JSON语法,好在它的语法非常简单,规则如下:

JSON 语法是 JavaScript 对象表示法语法的子集。- 数据在名称/值对中:如 "firstName" : "John"- 数据由逗号分隔- 花括号保存对象- 方括号保存数组

而组成JSON的值可以为以下几种:

- 数字(整数或浮点数) - 字符串(在双引号中) - 逻辑值(truefalse- 数组(在方括号中) - 对象(在花括号中) - null

1、导入Gson jar包

<!-- https://mvnrepository.com/artifact/com.google.code.gson/gson --><dependency><groupId>com.google.code.gson</groupId><artifactId>gson</artifactId><version>2.8.2</version></dependency>

关于Gson的详细信息可以参考:JAVA解析JSON数据

Gson 是 Google 提供的用来在 Java 对象和 JSON 数据之间进行映射的 Java 类库。可以将一个 JSON 字符串转成一个 Java 对象,或者反过来。

这是关于GSON的介绍,相对于传统的json解析,使用GSON能够极大的简化了解析流程。

2、下面提供一小段提前整理好的json数据

[{"zone_id": 100001,"title": "围栏1","zone_geometry": {"type": "polygon","apex": [{"lng": "113.166096","lat": "31.727309"}, {"lng": "113.222498","lat": "31.689881"} ]}},{"zone_id": 100002,"title": "围栏2","zone_geometry": {"type": "polygon","apex": [{"lng": "113.462342","lat": "31.626034"},{"lng": "113.472525","lat": "31.538983"}]}}, ]

分析原始的json数据格式:原始的json数据整体是一个JsonArray,其次是JsonObject,内部包含有很多字段,里面再套有一层JsonObject,再往里面是JsonArray。

通常而言,遇到了一个[   ]  可以定义一个List,碰见一个{   } 可以定义一个实体类。

因此,我这里定义了三个实体类:

从外层往内层依次是:HerdCamera   ZoneGeometry    Apex

public class HerdCamera {private String zone_id;private String title;private ZoneGeometry zoneGeometry;public String getZone_id() {return zone_id;}public void setZone_id(String zone_id) {this.zone_id = zone_id;}public String getTitle() {return title;}public void setTitle(String title) {this.title = title;}public ZoneGeometry getZoneGeometry() {return zoneGeometry;}public void setZoneGeometry(ZoneGeometry zoneGeometry) {this.zoneGeometry = zoneGeometry;}}

 

import java.util.List;public class ZoneGeometry {private String type;private List<Locations> apex;public String getType() {return type;}public void setType(String type) {this.type = type;}public List<Locations> getApex() {return apex;}public void setApex(List<Locations> apex) {this.apex = apex;}}

 

public class Apex {private double lng;private double lat;public Apex(double lng, double lat) {super();this.lng = lng;this.lat = lat;}public double getLng() {return lng;}public void setLng(double lng) {this.lng = lng;}public double getLat() {return lat;}public void setLat(double lat) {this.lat = lat;}}

 

3、开始依次从外往内部解析数据源

public Map<String,Object> herdcameradata() throws Exception{String fileName = "fileName";JsonParser parser = new JsonParser(); // 创建JSON解析器JsonArray array = (JsonArray) parser.parse(new FileReader(fileName)); // 首先解析出来的是JsonArray Map< String, Object> result=new HashMap<>();List<Object> herdCameras = new ArrayList<Object>();for (int i = 0; i < array.size(); i++) {JsonObject subObject = array.get(i).getAsJsonObject();         // 第二步获得的是JsonObjectHerdCamera herd = new HerdCamera();herd.setZone_id(subObject.get("zone_id").getAsString());       //然后依次获取subObject中的每一个字段herd.setTitle(subObject.get("title").getAsString());ZoneGeometry zoneGeometry = new ZoneGeometry();JsonObject subObject2 = subObject.getAsJsonObject("zone_geometry");  //第四步又获得一个zone_geometry的JsonObjectzoneGeometry.setType(subObject2.get("type").getAsString());       //然后获取zone_geometry内部的type对象JsonArray array2 = subObject2.getAsJsonArray("apex");           //第五步中apex是一个jsonArrayList<Locations> locationList = new ArrayList<Locations>();for (int j = 0; j < array2.size(); j++) {Locations location = new Locations();JsonObject subObject3 = array2.get(j).getAsJsonObject();location.setLng(subObject3.get("lng").getAsString());location.setLat(subObject3.get("lat").getAsString());locationList.add(location);}zoneGeometry.setApex(locationList);herd.setZoneGeometry(zoneGeometry);herdCameras.add(herd);}result.put("cameras",herdCameras );return result;}

 

4、结束

到现在,所有的解析都已经基本完成,但配合着controller中的映射就可以在前端获取到相关的数据。

下面给出我获取到的情况:

 

  

 

转载于:https://www.cnblogs.com/xiaxj/p/9197496.html

创作挑战赛新人创作奖励来咯,坚持创作打卡瓜分现金大奖

总结

以上是生活随笔为你收集整理的如何解析json字符串及返回json数据到前端的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。