要對如圖一所示的左側(cè)table的數(shù)據(jù)按照“總量”進行排序

　　1，在前端實現(xiàn)

　　2，數(shù)據(jù)格式為object，如圖二

原創(chuàng)文章，轉(zhuǎn)載請注明：http://www.cnblogs.com/phpgcs

?

javascript中經(jīng)常操作就是json/object/array，它們之間也經(jīng)常需要轉(zhuǎn)換。

json/object沒有sort方法，array有；因此先將data轉(zhuǎn)換為array

不只是排序，其他很多操作如獲取長度，增加刪除元素，取最大最小值都需要轉(zhuǎn)換為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）

原創(chuàng)文章，轉(zhuǎn)載請注明：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中常用數(shù)據(jù)格式的轉(zhuǎn)換

• 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并不是規(guī)范的JSON格式的data = $.parseJSON(data);console.log(data); });
//這里如果直接用.getJSON方法獲取ajax數(shù)據(jù)則直接就是規(guī)范的JSON數(shù)據(jù)

• 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

轉(zhuǎn)載于:https://www.cnblogs.com/phpgcs/p/json_object_array_string.html

總結(jié)

以上是生活随笔為你收集整理的从一个实例看javascript几种常用格式的转换的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。