觸電JavaScript-如何將json 二維數組轉換為 JSON object

本文轉載自查看原文 2019-10-09 10:32 435 json object/ 純前端/ json/ 數據庫轉json/ json array

最近因為項目中使用的是 ActiveReports .Net 產品，因為他們最近新出了 ActiveReports JS 版本，所以內心有點癢癢，想試試這個純前端版本報表控件到底如何，畢竟我們項目有一天也要從net 轉為 js版本。

但是奈何純前端的東西，json 是唯一通行的數據 DNA, 鄙人對前端也是一竅不通啊，代碼是可以看懂，但要真寫起來，可能每行都要Google 下。

這不剛試用了 ActiveReports js 就遇到難題了，她的數據類型僅支持 json，但我們原來的項目是 ActiveReports .net 開發的，都是連接的 DataTable 數據類型，我這邊又想急切使用，如何將數據庫的查詢結果轉換成 Json呢。

1. 使用 SQLITE 導出工具，導出JSON

就想到一個妙招，為何不將數據查詢的結果導出 json呢，我用sqlite 的導出工具，將數據查詢導出 Json 文件，

導出json 數據完成后，我就迫不及待，打開 ActiveReports JS 的Electron Designer 去設計報表了。

但奈何鏈接不成功，原來數據庫導出的json，將我的所有行數據變成了二維數組,格式如下。這就遇到了第二個難題

如何將 JSON 二維數組轉換為 JSON 對象

才能被 ActiveReports JS 所識別。

我就各種查資料問同事，雖然代碼簡單邏輯清楚，但對於不懂 JS 的人，真是每行代碼都需要搜呀，寫出來還被同事嘲笑很菜。經過他的改良后確實順眼很多

我寫的，有些錯誤信息：

var obj=require("../Data/ARDemo.json")
var pluginArrayArg = [];
for (i  in obj.rows.length)
{  

    var jsonArg0 = {};


    jsonArg0['O'] = rows[i][0];
    jsonArg0['A'] = rows[i][1];
    jsonArg0['B'] = rows[i][2];
    jsonArg0['C'] = rows[i][3];
    jsonArg0['D'] = rows[i][4];
  

pluginArrayArg.push(jsonArg0);

}
obj = JSON.stringify(pluginArrayArg)

同事改良后的最終版本最正確的版本：

<html>
    <script>
    window.onload = function(){
        

        var rows = json.rows;
        var columns = json.columns;
        var arrayData = [];

        for(var i = 0; i < rows.length; i++){
            var data = {};

            for(var j = 0; j < columns.length; j++){
                data[columns[j].displayName] = rows[i][j];
            }
            arrayData.push(data)
        }
        console.log(JSON.stringify(arrayData))
    }
    

    var json = {
    "type": "query results",
    "query": "SELECT t.*, 類別.類別名稱 FROM (\nSELECT strftime('%Y',訂單.訂購日期) AS 訂購年, strftime('%m',訂單.訂購日期) AS 訂購月,類別.類別ID,產品.產品名稱,訂單明細.數量, 訂單明細.單價, 訂單明細.折扣 FROM (( 訂單 \n INNER JOIN 訂單明細 ON 訂單.訂單ID = 訂單明細.訂單ID)\n INNER JOIN 產品 ON 訂單明細.產品ID = 產品.產品ID)\n INNER JOIN 類別 ON 產品.類別ID = 類別.類別ID where strftime('%Y',訂單.訂購日期) = '2011' ) as t\n INNER JOIN 類別 ON t.類別ID = 類別.類別ID\n ORDER BY 訂購年,訂購月",
    "columns": [
        {
            "displayName": "訂購年",
            "name": "strftime('%Y', 訂單.訂購日期)",
            "database": null,
            "table": null,
            "type": ""
        },
        {
            "displayName": "訂購月",
            "name": "strftime('%m', 訂單.訂購日期)",
            "database": null,
            "table": null,
            "type": ""
        },
        {
            "displayName": "類別ID",
            "name": "類別ID",
            "database": null,
            "table": "類別",
            "type": ""
        },
        {
            "displayName": "產品名稱",
            "name": "產品名稱",
            "database": null,
            "table": "產品",
            "type": ""
        },
        {
            "displayName": "數量",
            "name": "數量",
            "database": null,
            "table": "訂單明細",
            "type": ""
        },
        {
            "displayName": "單價",
            "name": "單價",
            "database": null,
            "table": "訂單明細",
            "type": ""
        },
        {
            "displayName": "折扣",
            "name": "折扣",
            "database": null,
            "table": "訂單明細",
            "type": ""
        },
        {
            "displayName": "類別名稱",
            "name": "類別名稱",
            "database": null,
            "table": "類別",
            "type": ""
        }
    ],
    "rows": [
        [
            "2011",
            "01",
            6,
            "鴨肉",
            21,
            99,
            0,
            "肉\/家禽"
        ],
        [
            "2011",
            "01",
            1,
            "蜜桃汁",
            35,
            14.4,
            0,
            "飲料"
        ],
        [
            "2011",
            "01",
            3,
            "薯條",
            30,
            16,
            0,
            "點心"
        ],
        [
            "2011",
            "01",
            8,
            "黃魚",
            18,
            20.7,
            0,
            "海鮮"
        ],
        
    ]
}
    </script>
</html>