首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

jQuery+ajax读取json数据并按照价格排序示例

Posted in jQuery onMarch 28, 2018

本文实例讲述了jQuery+ajax读取json数据并按照价格排序。分享给大家供大家参考，具体如下：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title></title>
 <script src="jquery-1.9.1.js"></script>
 <script>
 $.ajax({
  url: 'data.json',//获取本地json数据，在同文件夹下
  type: "get",
  success: function(resp) {
  console.log(resp); //原始数据
  var data = resp;
  //原生javascript sort() 方法
  data.data.sort(function(good1, good2) {
   /* 用价格排序由小到大 */
   return good1.price1 > good2.price1;
  });
  console.log(data.data);//排序后的数据
  },
  error: function(resp) {
  alert("系统繁忙，请稍后再试...");
  }
 });
 </script>
</head>
<body>
</body>
</html>

json数据 data.json：

{
 "code": 0,
 "data": [{
  "id": 16,
  "title": "fiveplus棉质纯色拼接圆领连衣裙",
  "name": "FivePlus2017新品女夏装棉质纯色拼接圆领短袖连衣裙2JM2080240",
  "promotion": "促销活动",
  "size": "XXl;Xl;M;S;L",
  "color": "深蓝;深绿",
  "picMini": "",
  "pic": "/upload/20170826161653_20170823141557.jpg,/upload/20170826161653_20170823141625.jpg,/upload/20170826161653_20170823141803.jpg,/upload/20170826161653_20170823141857.jpg,/upload/20170826161653_20170823141925.jpg",
  "parameter": "材质成分:棉68%聚酯纤维29.5%聚氨酯弹性纤维(氨纶)2.5%;销售渠道类型:商场同款(线上线下都销售);货号:2JM2080240;裙长:短裙;品牌:FivePlus;适用年龄:25-29周岁;年份季节:2017年夏季;颜色分类:深蓝650米白010;尺码:X、S、M、L",
  "businessName": "北京房益宝",
  "typeName": "连衣裙",
  "businessId": 1,
  "status": 1,
  "typeId": 8,
  "brandId": null,
  "price1": 399.00,
  "price2": 799.00,
  "longPic": "/upload/20170828102154_haibao (1).png",
  "score": 20,
  "createDate": "2017-08-26 14:49:09",
  "updateDate": "2017-08-26 14:49:09"
 }, {
  "id": 18,
  "title": "MOCO高腰拼接无袖镂空蕾丝连衣裙",
  "name": "MOCO高腰拼接无袖镂空蕾丝连衣裙修身A字裙子MA162SKT106摩安珂",
  "promotion": null,
  "size": "S;M",
  "color": "白色;黑色",
  "picMini": "",
  "pic": "/upload/20170826161938_TB1BiAdOFXXXXaYXXXXXXXXXXXX_!!0-item_pic.jpg_430x430q90.jpg,/upload/20170826161938_TB2PwEAa30kpuFjSspdXXX4YXXa_!!1746622942.jpg_430x430q90.jpg,/upload/20170826161938_TB2uqPaaStkpuFjy0FhXXXQzFXa_!!1746622942.jpg_430x430q90.jpg,/upload/20170826161938_TB2ZW4HcR0kpuFjSsziXXa.oVXa_!!1746622942.jpg_430x430q90.jpg,/upload/20170826161938_TB22u2TaC0mpuFjSZPiXXbssVXa_!!1746622942.jpg_430x430q90.jpg",
  "parameter": "廓形:A型;材质成分:聚酯纤维94.4%聚氨酯弹性纤维(氨纶)5.6%;销售渠道类型:商场同款(线上线下都销售);货号:MA162SKT106;风格:街头;街头:欧美组合;形式:单件;裙长:短裙;款式:其他/other;袖长:无袖;领型:圆领;袖型:常规;腰型:高腰衣;门襟:拉链;裙型:A字裙;图案:花色;流行元素/工艺:镂空勾花镂空蕾丝;品牌:Mo＆Co．/摩安珂;适用年龄:25-29周岁;年份季节:2016年夏季",
  "businessName": "北京房益宝",
  "typeName": "连衣裙",
  "businessId": 1,
  "status": 1,
  "typeId": 8,
  "brandId": null,
  "price1": 300.00,
  "price2": 400.00,
  "longPic": null,
  "score": 20,
  "createDate": "2017-08-26 15:10:48",
  "updateDate": "2017-08-26 15:10:48"
 }, {
  "id": 20,
  "title": "CMissSixty夏装拼接露肩式牛仔连衣裙",
  "name": "CMissSixty夏装拼接露肩式牛仔连衣裙套装662DJ3220000",
  "promotion": null,
  "size": "XSML",
  "color": "深蓝;红色;白色",
  "picMini": "",
  "pic": "/upload/20170826162219_TB1F80hQXXXXXc8XXXXXXXXXXXX_!!0-item_pic.jpg_430x430q90.jpg,/upload/20170826162219_TB2jpAydDcCL1FjSZFPXXXZgpXa_!!1880906465.jpg_430x430q90.jpg,/upload/20170826162219_TB2NnpRi5pnpuFjSZFkXXc4ZpXa_!!1880906465.jpg_430x430q90.jpg,/upload/20170826162219_TB2UB4Wi98mpuFjSZFMXXaxpVXa_!!1880906465.jpg_430x430q90.jpg,/upload/20170826162219_TB2zhxMi.hnpuFjSZFEXXX0PFXa_!!1880906465.jpg_430x430q90.jpg",
  "parameter": "材质成分:棉98.4%聚氨酯弹性纤维(氨纶)1.6%;销售渠道类型:商场同款(线上线下都销售);货号:662DJ3220000;裙长:中裙;品牌:Misssixty;适用年龄:25-29周岁;年份季节:2016年夏季;颜色分类:深蓝F58;尺码:XS、S、M、L",
  "businessName": "测试111",
  "typeName": "连衣裙",
  "businessId": 3,
  "status": 1,
  "typeId": 8,
  "brandId": null,
  "price1": 800.00,
  "price2": 1000.00,
  "longPic": "",
  "score": 30,
  "createDate": "2017-08-26 16:21:49",
  "updateDate": "2017-08-26 16:21:49"
 }, {
  "id": 45,
  "title": "雪纺连衣裙2017新款秋装七分袖气质时尚女装碎花修身连衣裙春秋",
  "name": "气质女神，春秋必备",
  "promotion": null,
  "size": "SMLXL",
  "color": "白色;粉色;兰色;黑色",
  "picMini": "",
  "pic": "/upload/20170828111058_TB1vZ7MQFXXXXaLXVXXXXXXXXXX_!!0-item_pic.jpg_430x430q90.jpg,/upload/20170828111058_TB2Dtj2hw0kpuFjSspdXXX4YXXa_!!729863055.jpg_430x430q90.jpg,/upload/20170828111058_TB2off_hB0kpuFjSsziXXa.oVXa_!!729863055.jpg_430x430q90.jpg,/upload/20170828111058_TB2pOW1hylnpuFjSZFgXXbi7FXa_!!729863055.jpg_430x430q90.jpg,/upload/20170828111058_TB2SRuLgmxjpuFjSszeXXaeMVXa_!!729863055.jpg_430x430q90.jpg",
  "parameter": "廓形:A型;材质成分:其他100%;销售渠道类型:纯电商(只在线上销售);货号:AF5130;风格:通勤;通勤:韩版组合形式:单件;裙长:中裙;款式:其他/other;袖长:七分袖;领型:圆领;袖型:常规;腰型:中腰;衣门襟:拉链;裙型:A字裙;图案:花色;流行元素/工艺:绣花拼接螺纹拉链;品牌:芳香之城;面料:雪纺;适用年龄:25-29周岁;年份季节:2017年夏季;颜色分类:白色、粉色、兰色、黑色;尺码:S、M、L、XL",
  "businessName": "北京房益宝",
  "typeName": "连衣裙",
  "businessId": 1,
  "status": 1,
  "typeId": 8,
  "brandId": null,
  "price1": 139.00,
  "price2": 259.00,
  "longPic": "",
  "score": 13,
  "createDate": "2017-08-28 11:10:41",
  "updateDate": "2017-08-28 11:10:41"
 }, {
  "id": 46,
  "title": "韩版女装2017夏季新款冰丝针织小黑裙连衣裙中裙女夏装露肩a字裙",
  "name": "新款冰丝针织小黑裙",
  "promotion": null,
  "size": "SMLXL",
  "color": "黑色",
  "picMini": "",
  "pic": "/upload/20170828111250_TB1pFJsPFXXXXbUXVXXXXXXXXXX_!!0-item_pic.jpg_430x430q90.jpg,/upload/20170828111250_TB2aHefXxRDOuFjSZFzXXcIipXa_!!2923124116.jpg_430x430q90.jpg,/upload/20170828111250_TB2CBbAeB0kpuFjSsziXXa.oVXa_!!2923124116.jpg_430x430q90.jpg,/upload/20170828111250_TB2wbcahCJjpuFjy0FdXXXmoFXa_!!2923124116.jpg_430x430q90.jpg,/upload/20170828111250_TB21GzPeB8lpuFjSspaXXXJKpXa_!!2923124116.jpg_430x430q90.jpg",
  "parameter": "廓形:A型;材质成分:其他100%;销售渠道类型:纯电商(只在线上销售);货号:AF5130;风格:通勤;通勤:韩版组合形式:单件;裙长:中裙;款式:其他/other;袖长:七分袖;领型:圆领;袖型:常规;腰型:中腰;衣门襟:拉链;裙型:A字裙;图案:花色;流行元素/工艺:绣花拼接螺纹拉链;品牌:芳香之城;面料:雪纺;适用年龄:25-29周岁;年份季节:2017年夏季;颜色分类:白色、粉色、兰色、黑色;尺码:S、M、L、XL",
  "businessName": "北京房益宝",
  "typeName": "连衣裙",
  "businessId": 1,
  "status": 1,
  "typeId": 8,
  "brandId": null,
  "price1": 158.00,
  "price2": 188.00,
  "longPic": "",
  "score": 15,
  "createDate": "2017-08-28 11:15:09",
  "updateDate": "2017-08-28 11:15:09"
 }, {
  "id": 47,
  "title": "吊带露背沙滩裙女夏2017新款海边度假性感波西米亚长裙显瘦连衣裙",
  "name": "吊带露背沙滩裙",
  "promotion": null,
  "size": "LSM",
  "color": "094花俏",
  "picMini": "",
  "pic": "/upload/20170828111644_TB1CbX8RVXXXXaqXVXXXXXXXXXX_!!0-item_pic.jpg_430x430q90.jpg,/upload/20170828111644_TB2e5Yfp0RopuFjSZFtXXcanpXa_!!1969979810.jpg_430x430q90.jpg,/upload/20170828111644_TB2Q0ZZvNXkpuFjy0FiXXbUfFXa_!!1969979810.jpg_430x430q90.jpg,/upload/20170828111644_TB2qXsqvSBjpuFjSsplXXa5MVXa_!!1969979810.jpg_430x430q90.jpg,/upload/20170828111644_TB2twgOkutTMeFjSZFOXXaTiVXa_!!1969979810.jpg_430x430q90.jpg",
  "parameter": "廓形:A型;材质成分:其他100%;销售渠道类型:纯电商(只在线上销售);货号:AF5130;风格:通勤;通勤:韩版组合形式:单件;裙长:中裙;款式:其他/other;袖长:七分袖;领型:圆领;袖型:常规;腰型:中腰;衣门襟:拉链;裙型:A字裙;图案:花色;流行元素/工艺:绣花拼接螺纹拉链;品牌:芳香之城;面料:雪纺;适用年龄:25-29周岁;年份季节:2017年夏季;颜色分类:白色、粉色、兰色、黑色;尺码:S、M、L、XL",
  "businessName": "北京房益宝",
  "typeName": "连衣裙",
  "businessId": 1,
  "status": 1,
  "typeId": 8,
  "brandId": null,
  "price1": 148.00,
  "price2": 248.00,
  "longPic": "",
  "score": 14,
  "createDate": "2017-08-28 11:17:44",
  "updateDate": "2017-08-28 11:17:44"
 }, {
  "id": 49,
  "title": "Palglg裙子女2017新款夏季女装韩版宽松挂脖a字网纱连衣裙3353",
  "name": "精致绣花宽松显瘦减龄蝴蝶结系带",
  "promotion": null,
  "size": "SML",
  "color": "藕粉色;白色;浅绿色",
  "picMini": "",
  "pic": "/upload/20170828111920_TB1HTyLX0.LL1JjSZFEXXcVmXXa_!!0-item_pic.jpg_430x430q90.jpg,/upload/20170828111920_TB2BAcZubVkpuFjSspcXXbSMVXa_!!2456840063.jpg_430x430q90.jpg,/upload/20170828111920_TB2cnK7gH0kpuFjy0FjXXcBbVXa_!!2456840063.jpg_430x430q90.jpg,/upload/20170828111920_TB2rm4utMxlpuFjy0FoXXa.lXXa_!!2456840063.jpg_430x430q90.jpg,/upload/20170828111920_TB2xLw0hYxmpuFjSZJiXXXauVXa_!!2456840063.jpg_430x430q90.jpg",
  "parameter": "廓形:A型;材质成分:其他100%;销售渠道类型:纯电商(只在线上销售);货号:AF5130;风格:通勤;通勤:韩版组合形式:单件;裙长:中裙;款式:其他/other;袖长:七分袖;领型:圆领;袖型:常规;腰型:中腰;衣门襟:拉链;裙型:A字裙;图案:花色;流行元素/工艺:绣花拼接螺纹拉链;品牌:芳香之城;面料:雪纺;适用年龄:25-29周岁;年份季节:2017年夏季;颜色分类:白色、粉色、兰色、黑色;尺码:S、M、L、XL",
  "businessName": "北京房益宝",
  "typeName": "连衣裙",
  "businessId": 1,
  "status": 1,
  "typeId": 8,
  "brandId": null,
  "price1": 169.00,
  "price2": 369.00,
  "longPic": "",
  "score": 16,
  "createDate": "2017-08-28 11:20:06",
  "updateDate": "2017-08-28 11:20:06"
 }, {
  "id": 50,
  "title": "拉夏贝尔2017夏季新款bf风韩版气质潮裙子学生衬衫式连衣裙衣女",
  "name": "bf风韩版气质潮裙子",
  "promotion": null,
  "size": "SML",
  "color": "粉红;白色;浅蓝",
  "picMini": "",
  "pic": "/upload/20170828112125_TB1J2CUXo4WMKJjSspmXXcznpXa_!!0-item_pic.jpg_430x430q90.jpg,/upload/20170828112125_TB2K_FOiYXlpuFjSszfXXcSGXXa_!!2146742267.jpg_430x430q90.jpg,/upload/20170828112125_TB2nL6ht3JkpuFjSszcXXXfsFXa_!!2146742267.jpg_430x430q90.jpg,/upload/20170828112125_TB2Skz0dlU4h1JjSZFLXXaFMpXa_!!2146742267.jpg_430x430q90.jpg,/upload/20170828112125_TB2WEVJi9hlpuFjSspkXXa1ApXa_!!2146742267.jpg_430x430q90.jpg",
  "parameter": "廓形:A型;材质成分:其他100%;销售渠道类型:纯电商(只在线上销售);货号:AF5130;风格:通勤;通勤:韩版组合形式:单件;裙长:中裙;款式:其他/other;袖长:七分袖;领型:圆领;袖型:常规;腰型:中腰;衣门襟:拉链;裙型:A字裙;图案:花色;流行元素/工艺:绣花拼接螺纹拉链;品牌:芳香之城;面料:雪纺;适用年龄:25-29周岁;年份季节:2017年夏季;颜色分类:白色、粉色、兰色、黑色;尺码:S、M、L、XL",
  "businessName": "北京房益宝",
  "typeName": "连衣裙",
  "businessId": 1,
  "status": 1,
  "typeId": 8,
  "brandId": null,
  "price1": 199.00,
  "price2": 399.00,
  "longPic": "",
  "score": 19,
  "createDate": "2017-08-28 11:21:49",
  "updateDate": "2017-08-28 11:21:49"
 }
 ]
}

jQuery+ajax读取json数据并按照价格排序示例

- Author -

郭浩326

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 #jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 #jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 #jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 #jQuery
jquery的 filter()方法使用教程
Mar 22 #jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 #jQuery
jQuery替换节点元素的操作方法
Mar 18 #jQuery
SQLite3(1) Tsmoothie(1) openEuler(1) reduce(2) filter(1) TextInputLayout(1) Selenium(1) dockerfile(1) EditText(1) Django(9)
You might like
PHP解析目录路径的3个函数总结
2014/11/18 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
javascript淡入淡出效果的实现思路
2012/03/31 Javascript
JS弹出层的显示与隐藏示例代码
2013/12/27 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
js随机生成26个大小写字母
2016/02/12 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
react以create-react-app为基础创建项目
2018/03/14 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
vue实现购物车小案例
2019/09/27 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
sqlalchemy对象转dict的示例
2014/04/22 Python
连接Python程序与MySQL的教程
2015/04/29 Python
python数据结构之链表详解
2017/09/12 Python
Python中join函数简单代码示例
2018/01/09 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
使用Python实现牛顿法求极值
2020/02/10 Python
Python使用urlretrieve实现直接远程下载图片的示例代码
2020/08/17 Python
canvas简易绘图的实现（海绵宝宝篇）
2018/07/04 HTML / CSS
应届生求职推荐信
2013/10/28 职场文书
企业节能减排实施方案
2014/03/19 职场文书
村抢险救灾方案
2014/05/09 职场文书
源码解读Spring-Integration执行过程
2021/06/11 Java/Android
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server