1.前言

如下图所示的报表数据以文档的形式存储在MongoDB数据库中,需要通过浏览器JavaScript编程来解析数据库所返回的JSON数据。
这里写图片描述

Mongo DB 是一种非关系型数据库(NoSql),其数据存储方式灵活。Mongo DB很好的实现了面向对象的思想(OO思想)。在Mongo DB中 每一条记录都是一个Document对象。Mongo DB数据格式为BSON格式,BSON是一种类JSON的一种二进制形式的存储格式,简称Binary JSON,它和JSON一样,支持内嵌的文档对象和数组对象。
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。JSON 数据的书写格式是:名称/值对。
参考上图报表,有如下所示数据:

jsons = {"name":"安全生产检查","title":"安全生产组织保障","subtable":[{
        "fieldid":"机房安全防火","contentd":[{
                "fieldtype":"电源","fieldcode":"分值"
            },{
                "fieldtype":"计算机","fieldcode":"分值"
            },{
                "fieldtype":"空调","fieldcode":"分值"
            },{
                "fieldtype":"电视","fieldcode":"分值"
            }]
        },{
        "fieldid":"车辆安全","contentd":[{
                "fieldtype":"年限","fieldcode":"分值"
            },{
                "fieldtype":"保险","fieldcode":"分值"
            }]
        },{
        "fieldid":"其他安全","contentd":[{
                "fieldtype":"年限","fieldcode":"分值"
            }]
        }],"field":"等分"
    };  

此数据为上图表中一行数据的的存储。如想在客户端显示上图报表,需要对从MongoDB返回的JSON数据进行处理。

2. 分析JSON数据,获取单元格纵跨的行数

如果使用HTML中Table来展现报表,则需使用< TD >标签的 rowspan 属性,确定单元格可纵跨的行数。
如图中序号为1行数据,”安全生产组织保障“单元格纵跨的行数为4(rowspan =4)。
例如:针对”jsons “数据,取纵跨行数的设计代码如下:

//取嵌套JSON数据的行数
function getJSONRowNum(subobj){
    var n = 0,m = 0;

    //判断运算符是否定义
    if( typeof(subobj.length) != "undefined" ){
        n = subobj.length;
    }
    for(var tmp in subobj){
        if (typeof(subobj[tmp])=="object"){
            var subtmp_json = subobj[tmp];
            m = m + getJSONRowNum( subtmp_json);
        }   
    }
    if (m > 0){
        n = m;
    }

    return n;            
}

3. 分析JSON对象

在获取JSON数据过程中,通常采用遍历的方式,在遍历过程中需要识别子对象的类型。

    for(var tmp_obj in json_obj){
        //判读是否为字符串
        if (typeof(json_obj[tmp_obj])=="string"){
            //按字符串进行处理...
        }

        if (typeof(json_obj[tmp_obj])=="object"){
            tmp_json = json_obj[tmp_obj];
            //如果是对象,此节点是嵌套类型,需要进行进一步的处理...
            n = getJSONRowNum(tmp_json);
            alert(n);
        }
    }

整合验证代码如下所示:

function showAllElem(){
    var jsons = "";  //定义返回JSON数据字符串

    jsons = "{\"name\":\"安全生产检查\",\"title\":\"安全生产组织保障\",";
    jsons = jsons + "\"subtable\":[{\"fieldid\":\"机房安全防火\",\"contentd\":[{\"fieldtype\":\"电源\",\"fieldcode\":\"分值\"}";
    jsons = jsons + ",{\"fieldtype\":\"计算机\",\"fieldcode\":\"分值\"}";
    jsons = jsons + ",{\"fieldtype\":\"空调\",\"fieldcode\":\"分值\"}";
    jsons = jsons + ",{\"fieldtype\":\"电视\",\"fieldcode\":\"分值\"}]}";
    jsons = jsons + ",{\"fieldid\":\"车辆安全\",\"contentd\":[{\"fieldtype\":\"年限\",\"fieldcode\":\"分值\"}";
    jsons = jsons + ",{\"fieldtype\":\"保险\",\"fieldcode\":\"分值\"}]}";
    jsons = jsons + ",{\"fieldid\":\"其他安全\",\"contentd\":[{\"fieldtype\":\"年限\",\"fieldcode\":\"分值\"}]}]";
    jsons = jsons + ",\"field\":\"等分\"}";   

    //将 JavaScript 对象表示法 (JSON) 字符串转换为对象。
    json_obj = JSON.parse(jsons);
    var strtmp = new String("对象:");

    //var myRowdata = new RowData(1,json_obj);
    //myRowdata.init(json_obj);

    for(var tmp_obj in json_obj){

        if (typeof(json_obj[tmp_obj])=="string"){
            strtmp = strtmp + tmp_obj + ",";
        }

        //alert(strtmp);
        //alert(typeof(json_obj[tmp_obj]));
        if (typeof(json_obj[tmp_obj])=="object"){
            tmp_json = json_obj[tmp_obj];

            n = getJSONRowNum(tmp_json);

            alert(n);
        }
    }   
}

写代码过程中,获得一个小知识:
使用JavaScript运算符时,可以先判断他是否有定义,例如:

    //判断运算符是否定义
    if( typeof(subobj.length) != "undefined" ){
        n = subobj.length;
    }

请关注后续展现报表内容。

参考:
《用MongoDB数据库来管理办公系统中文档型的表单和信息——通用流程化应用审批单设计思路(二,续)》

GitHub 加速计划 / js / json
18
5
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支:2 个月前 )
960b763e 5 个月前
8c391e04 8 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐