使用js接收ajax解析的json再拼成一个自己想要的json
//ajax解析的json
{
"status": 1,
"content": {
"pathsInfo": [
{
"id": 1055,
"stoplineLat": 39.073574,
"beginpiontLon": 117.091149,
"roadBh": null,
"onroadName": "海泰南道",
"stoplineLon": 117.096723,
"beginpiontLat": 39.073537,
"createDate": "2018-04-17T18:09:10",
"piontGroup": "117.091156:39.073532,117.092285:39.073532,117.095398:39.073536,117.096649:39.073536",
"tpCrossroadInfo": {
"id": 1309,
"cityCode": "022",
"crossroadType": 0,
"stoplineNum": 0,
"stateCode": 1,
"crssroadName": "海泰南道,海泰发展二路",
"createDate": "2018-04-12T18:37:40",
"centerpointLat": 39.073574,
"centerpointLon": 117.096723
}
},
{
"id": 1318,
"stoplineLat": 39.073574,
"beginpiontLon": 117.096708,
"roadBh": null,
"onroadName": "海泰发展二路",
"stoplineLon": 117.096723,
"beginpiontLat": 39.077368,
"createDate": "2018-04-19T16:24:12",
"piontGroup": "117.096718:39.077366,117.096718:39.076599,117.09671:39.076092,117.09671:39.075436,117.096703:39.074348,117.096695:39.073627",
"tpCrossroadInfo": {
"id": 1309,
"cityCode": "022",
"crossroadType": 0,
"stoplineNum": 0,
"stateCode": 1,
"crssroadName": "海泰南道,海泰发展二路",
"createDate": "2018-04-12T18:37:40",
"centerpointLat": 39.073574,
"centerpointLon": 117.096723
}
},
{
"id": 1319,
"stoplineLat": 39.073574,
"beginpiontLon": 117.103589,
"roadBh": null,
"onroadName": "海泰南道",
"stoplineLon": 117.096723,
"beginpiontLat": 39.073689,
"createDate": "2018-04-19T16:24:27",
"piontGroup": "117.103584:39.073692,117.101616:39.073681,117.100128:39.073666,117.096741:39.073627",
"tpCrossroadInfo": {
"id": 1309,
"cityCode": "022",
"crossroadType": 0,
"stoplineNum": 0,
"stateCode": 1,
"crssroadName": "海泰南道,海泰发展二路",
"createDate": "2018-04-12T18:37:40",
"centerpointLat": 39.073574,
"centerpointLon": 117.096723
}
},
{
"id": 1320,
"stoplineLat": 39.073574,
"beginpiontLon": 117.096837,
"roadBh": null,
"onroadName": "",
"stoplineLon": 117.096723,
"beginpiontLat": 39.067214,
"createDate": "2018-04-19T16:24:38",
"piontGroup": "117.096863:39.067215,117.096863:39.067383,117.096848:39.069035,117.096825:39.070984,117.096825:39.071037,117.096817:39.071354,117.096809:39.071671,117.096809:39.072071,117.096794:39.073536",
"tpCrossroadInfo": {
"id": 1309,
"cityCode": "022",
"crossroadType": 0,
"stoplineNum": 0,
"stateCode": 1,
"crssroadName": "海泰南道,海泰发展二路",
"createDate": "2018-04-12T18:37:40",
"centerpointLat": 39.073574,
"centerpointLon": 117.096723
}
}
]
}
}
获取到id和piontGroup自己拼装
$.ajax({
url : '/trajectory/findByCrossId',
type : 'POST',
data : {
CrossId : clickCrossRoadId
},
dataType : 'json',
success : function(data) {
if (data.status == 1) {
var len = data.content.pathsInfo.length;
var pointsInfo = data.content.pathsInfo;
var arr = new Array();
var pointArr = new Array();
var str,strs;
for(var k=0; k<len; k++){
pointArr = [];
var obj = {};
strs = pointsInfo[k].piontGroup.split(',');
for(var i=0; i<strs.length; i++){
str = [JSON.parse(strs[i].split(':')[0]),JSON.parse(strs[i].split(':')[1])];
pointArr.push(str);
}
obj.nameId = pointsInfo[k].id;
obj.path = pointArr;
arr.push(obj);
}
在高德显示轨迹
<!-- 重点参数：renderOptions -->
<!doctype html>
<html lang="zh-CN"> <head>
<!-- 原始地址：//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/adjust-style.html -->
<base href="//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/" />
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>调整线、点样式</title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0px;
} #outer-box {
height: 100%; } #container {
height: 100%;
width: 100%;
} .hide {
display: none;
} </style>
</head> <body>
<div id="outer-box">
<div id="container">
</div> </div>
<script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.5&key=ae37cf587f29134e49985c880a7228ae&plugin=AMap.Driving'></script>
<script src="../../../../plug/ext/dat.gui.min.js?v=1.0.11"></script>
<!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript">
//创建地图
var map = new AMap.Map('container', {
zoom: 13
}); AMapUI.load(['ui/misc/PathSimplifier', 'lib/$', 'lib/utils'], function(PathSimplifier, $, utils) { if (!PathSimplifier.supportCanvas) {
alert('当前环境不支持 Canvas！');
return;
} var defaultRenderOptions = {
renderAllPointsIfNumberBelow: -1,
pathTolerance: 2,
keyPointTolerance: 0,
pathLineStyle: {
lineWidth: 4,
strokeStyle: '#C11534',
borderWidth: 1,
borderStyle: '#cccccc',
dirArrowStyle: true
},
pathLineHoverStyle: {
lineWidth: 4,
strokeStyle: 'rgba(204, 63, 88,1)',
borderWidth: 1,
borderStyle: '#cccccc',
dirArrowStyle: true
}
}; var pathSimplifierIns = new PathSimplifier({ zIndex: 100, map: map, getPath: function(pathData, pathIndex) { return pathData.path;
},
getHoverTitle: function(pathData, pathIndex, pointIndex) { if (pointIndex >= 0) {
//point
return pathData.name + '，点:' + pointIndex + '/' + pathData.path.length;
} return pathData.name + '，点数量' + pathData.path.length;
},
renderOptions: defaultRenderOptions
}); window.pathSimplifierIns = pathSimplifierIns;
var jsonObj = [{"name":1072,"path":[[117.070396,39.088734],[117.070389,39.088299],[117.070419,39.08532],[117.070435,39.084965],[117.070526,39.084377],[117.070694,39.083584],[117.070946,39.082802],[117.071281,39.082077],[117.071457,39.08176],[117.071732,39.08131],[117.071915,39.08107],[117.072189,39.08073],[117.072594,39.080257],[117.072914,39.079926],[117.073196,39.079655],[117.074005,39.078991],[117.074532,39.078636],[117.074936,39.078392],[117.074966,39.078369],[117.075325,39.078163],[117.075867,39.077885],[117.076569,39.077557],[117.076851,39.077377],[117.077003,39.077236],[117.077049,39.077126],[117.077065,39.077042],[117.077057,39.075539],[117.077103,39.073601]]},{"name":1073,"path":[[117.065384,39.07346],[117.066666,39.073486],[117.068321,39.073486],[117.069626,39.07349],[117.070312,39.07349],[117.070747,39.07349],[117.072044,39.073494],[117.072815,39.073494],[117.075508,39.073502],[117.076248,39.073505],[117.076569,39.073505],[117.077164,39.073505]]},{"name":1074,"path":[[117.077248,39.072186],[117.077179,39.072395],[117.077179,39.072937],[117.077171,39.073505]]},{"name":1075,"path":[[117.090767,39.073624],[117.088593,39.073616],[117.084396,39.073608],[117.082283,39.073605],[117.082039,39.073605],[117.079918,39.073601],[117.079308,39.073601],[117.078094,39.073601],[117.077225,39.073597]]}] // $.getJSON(jsonObj, function(d) { pathSimplifierIns.setData(jsonObj); //pathSimplifierIns.setSelectedPathIndex(); //}); }); </script>
</body> </html>
解析的数据放进table
//动态的创建一个table，同时将后台获取的数据动态的填充到相应的单元格
function createShowingTable(data){
var len = data.content.pathsInfo.length;
var pointsInfo = data.content.pathsInfo;
//此处需要让其动态的生成一个table并填充数据
var tableStr = "<div id='seePointTable'><button type='button' class='close' onclick='Iclose1()' title='close it'>×</button><table>";
tableStr = tableStr + "<thead><td>ID</td><td>所属路口</td><td>起点坐标</td><td>操作</td></thead>";
for(var i=0 ;i<len ; i++){
tableStr = tableStr + "<tr><td>"+ pointsInfo[i].id +"</td>"+"<td>"+pointsInfo[i].tpCrossroadInfo.crssroadName + "</td>"+"<td>"+pointsInfo[i].beginpiontLon+","+pointsInfo[i].beginpiontLat +"</td>"+"<td><a href='javascript:deletePointPath("+pointsInfo[i].id+")'>"+"删除"+"</a></td></tr>";
}
tableStr = tableStr + "</table></div>";
//将动态生成的table添加的事先隐藏的div中.
$("#dataTable").html(tableStr);
}
遇到一个错误：
window.pathSimplifierIns = pathSimplifierIns;
pathSimplifierIns.setData(arr);//这里要求传的是一个json对象
//pathSimplifierIns.setData(JSON.stringify(arr))；//最开始我是这么传的，一直不出路径，后来鑫哥告诉我，arr本身就是对象，JSON.stringify(arr)这样就是字符串了，所以出不来路径。
console.log(JSON.stringify(arr));//我一直从这看结果，以为是一个对象，其实是字符串,只是没显示出“”才让我一直以为是个对象，注意：如果是对象console.log会显示Object[...........]
使用js接收ajax解析的json再拼成一个自己想要的json的更多相关文章
- 原生js 以ajax（post）的方式传json至php，并让php解析为数组
如题. 比如要把一个json,如 json= {name:"John Rambo", time:"3pm"},,通过js ,传到一个php服务器 fwq.php ...
- js中eval详解，用Js的eval解析JSON中的注意点
先来说eval的用法,内容比较简单,熟悉的可以跳过eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值,则返回此值,否则返回undefined. 需要 ...
- 原生js实现ajax与jquery的ajax库，及json
这是一篇笔记博客, Ajax: 和服务器进行数据交换(异步) 用js实现复杂的原理:用于发送请求的对象在不同的浏览器中是不同的 同源策略:ajax发送请求的url地址与服务器地址必须是同一域名,协议, ...
- 问题集录--JS如何处理和解析Json数据
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族 ...
- 使用ajax解析后台json数据时：Unexpected token o in JSON at position 1
json数据解析异常 今天在做json数据的时候,出现了如下错误,说是解析异常. VM1584:1 Uncaught SyntaxError: Unexpected token o in JSON a ...
- @RequestBody接收ajax的json字符串
在使用ajax进行请求,并传递参数时,偶尔需要把数组作为传递参数,这是就要使用@RequestBody来解决这个问题 在页面端的处理: (1)利用JSON.stringify(arr)需要把json对 ...
- 用Js的eval解析JSON中的注意点
在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 使用eval函数来解析,并且使用jquery的ea ...
- ASP.NET MVC Controller接收ajax post方式发送过来的json对象或数组数据
本例旨在说明我的一种Controller接收ajax提交(POST)过来的json对象或数组信息的方式,感觉应该有更好的方式,欢迎提出宝贵意见. JSON.stringify(jsonObj)不支持I ...
- spring mvc接收ajax提交的JSON数据，并反序列化为对象
需求:spring mvc接收ajax提交的JSON数据,并反序列化为对象,代码如下: 前台JS代码: //属性要与带转化的对象属性对应 var param={name:'语文',price:16}; ...
随机推荐
- SpringMVC 工作流程
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/baidu_36697353/article/details/64444147 SpringMVC 工 ...
- https、公钥、私钥白话解说
原文 摘要:本文尝试一步步还原HTTPS的设计过程,以理解为什么HTTPS最终会是这副模样.但是这并不代表HTTPS的真实设计过程.在阅读本文时,你可以尝试放下已有的对HTTPS的理解,这样更利于“还 ...
- Hql语句转化为sql语句中文乱码问题
刚刚学习Hql语句就出现这一的问题,百度半天终于解决了,总结一下解决的方案: 出现中文乱码最可能的原因是hibernate配置文件配置的问题 1.检查url路径是否指定字符集为UTF-8 <pr ...
- 读ios开发有感——建立APP开发体系
前言:ios开发和现在的大前端.跨端开发在底层上的道理是相通的,因此通过学习ios开发,可以形成对APP开发体系的理解. 一.app开发的知识体系 基础 应用开发 原理 原生与前端 二.基础模块 按照 ...
- Hibernate 脏检查和刷新缓存机制
刷新缓存: Session是Hibernate向应用程序提供的操作数据库的主要接口,它提供了基本的保存,更新,删除和加载java对象的方法,Session具有一个缓存,可以管理和追踪所有持久化对象,对 ...
- 11.7NOIP模拟赛解题报告
心路历程 预计得分:\(50 + 100 + 100\) 实际得分:\(50 + 100 +100\) T2 T3两道数据结构题美滋滋,然而写完就过去\(3h\)美滋滋 T1数学题学弟们都会做Orzz ...
- Scrapy爬虫requests
requests 模块 模块的由来: 浏览器可以浏览网站, 是由于浏览器发送了requests , 各种请求.打开一个网站可能有几十到几百个请求. 从而服务器端会反馈各种因应不同请求生成的数据. 我们 ...
- Java 多线程使用
工作中遇到的问题,记录下解决的思路 问题: 对磁盘进行碎片化测试(比如说,磁盘空间是16G),从64K开始写文件,写满后删除一半,然后写32K 的数据,写满后删除一半...直到4K写满删除一般算是结束 ...
- 1.初次运行git前的配置
在系统上安装了 Git后,你会想要做几件事来定制你的 Git 环境. 每台计算机上只需要配置一次,程序升级时会保留配置信息. 你可以在任何时候再次通过运行命令来修改它们. Git 自带一个 git c ...
- Android学习——ListView的缓存机制
在使用ListView的时候,需要加载适配器和数据源,这篇文章主要介绍一下ListView的使用以及利用ListView的缓存机制来减少系统的初始化时间. ListView的使用 ListView和V ...