zoukankan      html  css  js  c++  java
  • 从一个实例看javascript几种常用格式的转换

    要对如图一所示的左侧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="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

  • 相关阅读:
    javascript ajax 脚本跨域调用全解析
    [转载]linux sed命令详解
    perl随记(1)
    TCL随记(2)
    TCL随记(1)
    C Shell 中的特殊变量
    异步FIFO为什么用格雷码
    VMM学习-vmm_log
    UVM基础之---Command-line Processor
    Verification Mind Games---how to think like a verifier像验证工程师一样思考
  • 原文地址:https://www.cnblogs.com/phpgcs/p/json_object_array_string.html
Copyright © 2011-2022 走看看