要对如图一所示的左侧table的数据按照“总量”进行排序

  1,在前端实现

  2,数据格式为object,如图二

原创文章,转载请注明:http://www.cnblogs.com/phpgcs

javascript中经常操作就是json/object/array,它们之间也经常需要转换。

json/object没有sort方法,array有;因此先将data转换为array

不只是排序,其他很多操作如获取长度,增加删除元素,取最大最小值都需要转换为Array

var proarray = [];
for(x in data['province']) {proarray.push([x, data['province'][x]]);
}
proarray.sort(function(b,a){//因为是对总量进行排序,所以要对正面、中性、负面的总和进行比较return a[1]['zm']-b[1]['zm']+a[1]['zx']-b[1]['zx']+a[1]['fm']-b[1]['fm'];
});

  

再打印以下 排序之后的 proarray变量(array)

原创文章,转载请注明:http://www.cnblogs.com/phpgcs

完整的源码如下:

console.log(data['province']);
console.log(typeof(data['province']));var counter = 1;
var tbody = '';
tbody +=' <table class="table table-striped table-bordered table-hover" id="weiboprovince_table"> <thead> <tr> <th style="width:8px;">#</th> <th>省份</t    h> <th>总量</th> <th>正面</th> <th>负面</th> </tr> </thead> <tbody>';
var proarray = [];
for(x in data['province']) {proarray.push([x, data['province'][x]]);
}
proarray.sort(function(b,a){return a[1]['zm']-b[1]['zm']+a[1]['zx']-b[1]['zx']+a[1]['fm']-b[1]['fm'];
});
for(x in proarray) {tbody += '<tr>';tbody += '<td>';tbody += '<div class="label label-success" style="color:white;">'+(counter++)+'</div>';tbody += '</td>';tbody += '<td>';tbody += proarray[x][0];tbody += '</td>';tbody += '<td>';tbody += parseInt(proarray[x][1]['zm']+ proarray[x][1]['zx'] + proarray[x][1]['fm']);tbody += '</td>';tbody += '<td>';tbody += proarray[x][1]['zm'];tbody += '</td>';tbody += '<td>';tbody += proarray[x][1]['fm'];tbody += '</td>';tbody += '</tr>';
}
tbody += '</tbody>';
tbody += '</table>';
$('#map_list').html(tbody);

  

延伸:

javascript中常用数据格式的转换

  • json->array
function json2array(json){var result = [];var keys = Object.keys(json);keys.forEach(function(key){result.push(json[key]);});return result;
}
//example
json2array({a:1,b:2});
[1, 2]
//more complex example
json2array({20131013: 66, 20131014: 198, 20131015: 253, 20131016: 352, 20131017: 293, 20131018: 277, 20131019: 111, 20131020: 91, 20131021: 255, 20131022: 256, 20131023: 293, 20131024: 390, 20131025: 401, 20131026: 117, 20131027: 45, 20131028: 54, 20131029: 59, 20131030: 66, 20131031: 109, 20131101: 32});
[66, 198, 253, 352, 293, 277, 111, 91, 255, 256, 293, 390, 401, 117, 45, 54, 59, 66, 109, 32]

  

  • array->string
var a = [{"obj1":"phpgcs"}, {"obj2":"ganiks"}]
console.log(a);
//[Object, Object]
JSON.stringify(a)
//"[{"obj1":"phpgcs"},{"obj2":"ganiks"}]"

  

  • string->array
"1,2".split(",").map(Number);
[1, 2]
"1,2".split(",");
["1", "2"]
JSON.parse("["+"1,2"+"]");
[1, 2]

  

  • object->json
//php print_r($response);.post(url, params, function(data){console.log(data);//data并不是规范的JSON格式的data = $.parseJSON(data);console.log(data);
});//这里如果直接用.getJSON方法获取ajax数据则直接就是规范的JSON数据

  • array->object
function toObject(arr) {var rv = {};for (var i = 0; i < arr.length; ++i)rv[i] = arr[i];return rv;
}
Your array already is more-or-less just an object, but arrays do have some "interesting" and special behavior with respect to integer-named properties. The above will give you a plain object.
edit oh also you might want to account for "holes" in the array:function toObject(arr) {var rv = {};for (var i = 0; i < arr.length; ++i)if (arr[i] !== undefined) rv[i] = arr[i];return rv;
}

  

参考:

http://phpgcs.com/2013/10/31/javascript-tricks-collection.html

http://stackoverflow.com/questions/17684921/sort-json-object-in-javascript

http://stackoverflow.com/questions/1069666/sorting-javascript-object-by-property-value

http://stackoverflow.com/questions/4215737/convert-array-to-object

转载于:https://www.cnblogs.com/phpgcs/p/json_object_array_string.html

从一个实例看javascript几种常用格式的转换相关推荐

  1. 【FlexSim2019】自学笔记:一个实例看何为A连接?何为S连接?其意义的深入探讨

    A.S连接是仿真软件FlexSim 2019中常用的两种连接.那么,二者有什么区别?笔者在这篇文章里以实例,进行了讨论.了解二者意义,才能以不变应万变,具备独立处理问题的能力. 了解连接之前,先看看什 ...

  2. 查询优化器内核剖析第四篇:从一个实例看执行计划

    查询优化器内核剖析第四篇:从一个实例看执行计划 系列文章索引: 查询优化器内核剖析第一篇 查询优化器内核剖析第二篇:产生候选执行计划&执行计划成本估算 查询优化器内核剖析第三篇:查询的执行与计 ...

  3. 几种常用的电平转换方案

    前段时间在设计NB-IOT模块与STM32的硬件通讯时用到了电平转换.当主控芯片引脚电平与外部连接器件电平不匹配的时候就需要用电平转换电路来进行转换.这几乎是每一个电子工程师都会遇到的一个问题.今天我 ...

  4. JavaScript对象与JSON格式的转换

    在Web开发中,JavaScript和JSON是两个经常用到的概念.JavaScript是一种脚本语言,可以用来操作网页的内容和行为,而JSON是一种轻量级的数据交换格式,通常用于在客户端和服务器之间 ...

  5. 突击计划——两种温度格式的转换

    题目:两种温度格式的转换 #include <stdio.h> //两种温度格式的转换 /* 根据华氏和摄氏温度定义,利用转换公式如下: C=(F-32)/1.8 F=C*1.8+32 * ...

  6. 从一个实例看jaxb的强大

    http://zyl.iteye.com/blog/33729 读取xml对于应用软件来说是一个必不可少的工作,当然现在的jdk也提供了很好的处理xml方式,读写xml的库也挺多,包括有名的dom4j ...

  7. JAVA中方法的类型转换_Java中几种常用数据类型之间转换的方法

    Java中几种常用的数据类型之间转换方法: 1. short-->int 转换 exp: short shortvar=0; int intvar=0; shortvar= (short) in ...

  8. 从一个实例看编程水平的步步提高

    很久很久前就想写这个话题的文章了,但是,总是找不到合适的例子.例子简单不足于说明问题,例子复杂可读性就会降低,就会达不到文章的目的.两难总让人激发解决问题的斗志,于是乎自己试着写写这个例子吧.这个例子 ...

  9. 【C/C++】一个实例看 回调函数 / 函数指针 应用与原理

    前言:笔者在学习数据结构经典问题"四种方法求解最大子列和"时,遇到了一个需求:计时是重复动作,因此想创建一个可以为算法运行时间计时的函数.由于计时的特殊性(被计时的函数要被掐头又掐 ...

最新文章

  1. python 随机打乱样本
  2. 用 .Net WebBrowser 控件获取POST数据
  3. Android中的AsyncTask异步任务的简单介绍
  4. 特洛伊木马脚本linux,手动查杀特洛伊木马
  5. nginx访问目录是没加/的重定向控制
  6. 下列哪个适合做链栈_朋友圈人格图鉴:三天可见 vs 全部可见,哪个更适合做恋人?...
  7. SourceTree windows版本免注册免登陆使用方法
  8. 接口参数,get和post
  9. intellij idea 和 maven的自己的理解和安装配置
  10. 全国DNS服务器IP地址【电信、网通、铁通】
  11. 主板检测卡c5_主板诊断卡怎么使用 主板诊断卡代码含义及处理方法
  12. 鼠标右键发现“新建功能菜单”不见了的解决方案
  13. excel选择符合条件的行
  14. Prometheus 四种metric类型
  15. 太阳系八大行星直径、质量、与太阳距离参数
  16. EPSON TM U220串口打印机乱码
  17. 国际上炒黄金平台有哪些
  18. 机器学习特征工程--标准化和归一化
  19. python快速实现简易贪吃蛇小游戏
  20. 漫画:程序员对马老师退休生活的祝福

热门文章

  1. 央行“意外“降息 专家称贷款买房者首先受益
  2. WPF combox二级联动
  3. web默认字体最佳实践
  4. VC中怎么读取.txt文件
  5. linux 串口控制read()的说明
  6. cdev linux_Linux设备管理(二)_从cdev_add说起
  7. github 开源项目 java_2019 年 GitHub 上最热门的 Java 开源项目
  8. mysql 事件计划区别_MySQL 计划事件
  9. AIoT让一个屏有了100种用法
  10. RISC-V应用创新大赛开放报名啦!