【详解】JS中JSON对象的使用解析

本例，我们要做的事情是将数据后台中所有的金额数据改为保留两位小数。

即，修改图表显示数据。我们需要先去分析一下，图表显示数据的逻辑。

【ECharts画图逻辑】

本例我们画统计图采用的是ECharts，每次画图都是接收了Controller传过来的JSON数据。然后进行解析才成功将JSON数据成功的画图显示出来。

即，整体逻辑是：Controller中使用SQL将数据取出来，然后组合成为JSON数据。然后传送到JSP中的JS函数，然后进行解析，传递到ECharts画图函数中去。

这里以tenpay_wap为例进行举例说明。

Controller中，SQL取数据，并组合出JSON数据。return一个jsonView。

    @RequestMapping("/finance_tenpay_wap_info.json")    public String finance_tenpay_wap_info(String dateStr, ModelMap modelMap) throws MyException, ParseException {        if(dateStr == null || dateStr.trim().length() == 0) {            dateStr=dateUtil.getString(new Date(), "yyyy-MM");        }        ParamMap paramMap=new ParamMap();        paramMap.put("dateStr", dateStr);        String[] dayLabels=LabelUtil.getLabelByIntBegin_01(31);        ChartData[] chartDatas=new ChartData[2];        ChartData chartData=null;        DrawData drawData=null;        String sqlStr="";        List<Map<String, Object>> valuesList=null;        int[][] valuesArray=null;        String[] queryNames=null;        String[] drawNames=null;        chartData=new ChartData();        chartData.setParamMap(paramMap);        chartData.setLabels(dayLabels);        chartData.setTitle("月度财付通WAP数据");        queryNames=new String[]{"ARRIVED_AMOUNT", "RECEIVABLE_FEE", "REAL_FEE", "COST", "PROMOTION_FEE", "MARGIN"};        drawNames=new String[]{"到账金额", "应收手续费", "实收手续费", "成本", "推广费", "毛利"};        sqlStr=            stringUtil                .formatMsg(                    "SELECT DATE_FORMAT(CREATED_DATE, '%d') AS label, ARRIVED_AMOUNT AS ARRIVED_AMOUNT, RECEIVABLE_FEE AS RECEIVABLE_FEE, REAL_FEE AS REAL_FEE, COST AS COST, (RECEIVABLE_FEE - COST) AS MARGIN, (RECEIVABLE_FEE - REAL_FEE) AS PROMOTION_FEE FROM moyoyo_stat.FINANCE_TENPAY_WAP_DAY WHERE DATE_FORMAT(CREATED_DATE, '%Y-%m') = '{0}';",                    new Object[]{dateStr});        valuesList=chartDataService.getChartList2(sqlStr);        valuesArray=LabelUtil.getValuesData(valuesList, dayLabels, "label", queryNames);        for(int i=0; i < drawNames.length; i++) {            drawData=new DrawData();            drawData.setColor(ColorUtil.COLORS[i]);            drawData.setName(drawNames[i]);            drawData.setValue(valuesArray[i]);            chartData.add(drawData);        }        chartDatas[0]=chartData;        chartData=new ChartData();        chartData.setParamMap(paramMap);        chartData.setLabels(dayLabels);        chartData.setTitle("月度财付通WAP(购买中充值)数据");        queryNames=new String[]{"ARRIVED_AMOUNT", "REFUND_AMOUNT", "COST"};        drawNames=new String[]{"到账", "退款", "成本"};        sqlStr=            stringUtil                .formatMsg(                    "SELECT DATE_FORMAT(WI.CREATED_DATE, '%d') AS label, WI.ARRIVED_AMOUNT AS ARRIVED_AMOUNT, WI.REFUND_AMOUNT AS REFUND_AMOUNT, FLOOR( FLOOR( 1.2 * ( W.ARRIVED_AMOUNT + W.REAL_FEE + WI.ARRIVED_AMOUNT - WI.REFUND_AMOUNT ) / 100 ) - W.COST ) AS COST FROM moyoyo_stat.FINANCE_TENPAY_WAP_IN_BUYING_DAY WI INNER JOIN moyoyo_stat.FINANCE_TENPAY_WAP_DAY W ON WI.CREATED_DATE = W.CREATED_DATE WHERE DATE_FORMAT(WI.CREATED_DATE, '%Y-%m') = '{0}';",                    new Object[]{dateStr});        valuesList=chartDataService.getChartList2(sqlStr);        valuesArray=LabelUtil.getValuesData(valuesList, dayLabels, "label", queryNames);        for(int i=0; i < drawNames.length; i++) {            drawData=new DrawData();            drawData.setColor(ColorUtil.COLORS[i]);            drawData.setName(drawNames[i]);            drawData.setValue(valuesArray[i]);            chartData.add(drawData);        }        chartDatas[1]=chartData;        modelMap.put("chartDatas", chartDatas);        return "jsonView";    }

JSP中ECharts的画图相关的JS函数

<script type="text/javascript">var finance_tenpay_wap_info_url = "chart/finance_tenpay_wap_info.json";function finance_tenpay_wap_info_toSubmit(form){var paramdata = $(form).serializeArray();finance_tenpay_wap_info_genJson(paramdata);return false;}function finance_tenpay_wap_info_genJson(paramdata){$.getJSON(finance_tenpay_wap_info_url, paramdata, function (data) {DWZ.ajaxDone(data);if (data.statusCode == undefined){var jsonObj= data.chartDatas;//金额单位变换,保留两位小数for(k=0;k<6;k++){tempDrawData = jsonObj[0].drawData[k];values = tempDrawData.value;tempValues = [];for(j=0;j<values.length;j++){tempValues[j] = values[j]/100;}jsonObj[0].drawData[k].value = tempValues;}for(k=0;k<3;k++){tempDrawData = jsonObj[1].drawData[k];values = tempDrawData.value;tempValues = [];for(j=0;j<values.length;j++){tempValues[j] = values[j]/100;}jsonObj[1].drawData[k].value = tempValues;}finance_tenpay_wap_info_doChart(jsonObj);}});}finance_tenpay_wap_info_genJson(null);            flag = [];function finance_tenpay_wap_info_doChart(data){            $("input#finance_tenpay_wap_info_dateStr").val(data[0].paramMap['dateStr']);                for(var i=0;i<2;i++){                flag[i]=-1;                finance_tenpay_wap_info_doChart2(data, -1, i);                }            }function finance_tenpay_wap_info_doChart2(data,legend_index,i){titile = data[i].title;                labels = data[i].labels;                legendData = data[i].drawData;                render = 'finance_tenpay_wap_info_canvasDiv'+i;                drawData = data[i].drawData;if(legend_index!=-1){if(flag[i]==-1){drawData = [drawData[legend_index]];flag[i] = legend_index;}else if(flag[i]==legend_index){flag[i] = -1;}else{drawData = [drawData[legend_index]];flag[i] = legend_index;}}var chart = new iChart.LineBasic2D({                    render : render,                    data: drawData,                    align:'center',                    title : titile,                    width : 1000,                    height : 280,                    tip:{                        enable:true,                        shadow:true,                        move_duration:400,                        border:{                            enable:true,                            radius : 5,                            width:2,                            color:'#3f8695'                        },

最主要是ECharts的函数接收到了JSON数据，可以方便的进行画图。

【保留两位小数】

保留两位小数实质上是将数据原封不动取出来，然后在JS中进行保留小数的处理而已。金额单位原来是分，变为元而已。

所以关键是，解析JSON数据中的金额，只将其中金额部分数据进行保留小数的处理即可。

最核心代码如下：

var jsonObj= data.chartDatas;//金额单位变换,保留两位小数for(k=0;k<6;k++){tempDrawData = jsonObj[0].drawData[k];values = tempDrawData.value;tempValues = [];for(j=0;j<values.length;j++){tempValues[j] = values[j]/100;}jsonObj[0].drawData[k].value = tempValues;}for(k=0;k<3;k++){tempDrawData = jsonObj[1].drawData[k];values = tempDrawData.value;tempValues = [];for(j=0;j<values.length;j++){tempValues[j] = values[j]/100;}jsonObj[1].drawData[k].value = tempValues;}finance_tenpay_wap_info_doChart(jsonObj);

这部分代码准确拿到了JSON数据中的金额value，并全部进行了保留小数的处理。

关键在于解析JSON数据。如何解析？

【JS解析JSON数据】

我们最开始采用的方法是去分析JSON数据的构成过程。即，去了解这个数据是怎么组成的。

但，其实并没有必要这么复杂。我们只需要借助浏览器F12控制台，去看一下传过来的JSON数据结构是什么样的就可以了。

在这个界面，JSON数据的结构相当清晰。

清晰了结构，如何解析，也就很清楚了。

该在哪里解开，该在哪里循环都很清楚了。

其实和Python解析JSON数据是类似的，只不过没有json.loads这一步而已。都是一层一层剥开寻找而已。

所以，本例实质上也就是解析JSON数据的问题！

从中，我们也能看出，JSON数据的方便性。那JAVA是如何构建JSON数据的呢？

我们随后研究。

【Echarts画图的data】

这里单独声明一点，在网页上画图的数据来源，必须是数，而不是字符串。

不是整数，不是小数，而是数，只要是数就可以。如果是字符串，如何画图。

其实。。只要分析下画图时的F12控制台的画图数据来源，发现画图的数据比如ECharts的数据来源时JSON数据。可以看到里面都是数字。

记住画数据图的数据是基于数据就可！

【round函数】

我们想要保留N位小数的结果时，需要用到round函数。

这里注意：round（小数，0）生成的结果是最接近该小数的整数数字！

可是JAVA是怎么构建JSON数据的呢？啊啊啊不懂！

后话：

可以确定的一点是，如果我想构建一个自己的数据后台，是需要理解JSON数据的。

起码要知道JAVA怎么生成JSON数据的。因为画图需要JSON数据啊~~~