D3.js以及通用JS（JavaScript）讀取並解析伺服器端JSON的注意事項

標籤：

這個需求其實挺明確的，但是網上搜出來的教程都亂七八糟，覺得實在需要自己總結一下。

D3.js目前已經被廣泛使用在資料視覺效果領域，隨著大資料的持續發展，這個架構估計會在今後更加流行（據說其作者Mike Bostock開始全職開發了，之前是負責紐約時報資料視覺效果的工程師，他本人也從紐約搬家到了舊金山……）。按照這裡的介紹：https://github.com/mbostock/d3/wiki/API-Reference，D3.js實際上有專門讀取JSON資料的API，所以其實D3.js讀伺服器端發布的JSON是非常簡單的事情，這裡我給出一段範例程式碼：

d3.json("http://localhost:8080/XXXX/datasource/HTTP",    function handle_json_data(data){        console.log(data)        console.log(data.results[0]);        var series=data.results[0].series;        var contents=series[0];        var values=contents.values        console.log(values);    });

後面這些語句是我在測試過程中用來調試用的，因為實在對JS不瞭解，所以用這種方法稍微深入瞭解一下。下面針對後面這些語句進行一些討論：

按照網上各種教程的介紹，從伺服器端取到的JSON字串應該先使用eval函數轉成JS能夠處理的JSON對象，如下面幾篇部落格：http://blog.csdn.net/beyond0851/article/details/9285771 以及 http://www.cnblogs.com/fishtreeyu/archive/2011/11/05/2237190.html ，其中第一篇部落格最後的結論看得我也是醉了。

但是我們看到上面的代碼中並沒有轉換的過程，可以認為D3.js已經封裝了上述處理過程。另外，對於一些複雜的JSON結構，應該怎麼樣進行處理呢？我上面代碼中處理的JSON資料如下所示：

{    "results": [        {            "series": [                {                    "name": "HTTP",                    "columns": [                        "time",                        "durationTime"                    ],                    "values": [                        [                            "2015-06-18T07:31:44.514Z",                            23137050                        ],                        [                            "2015-06-18T07:31:46Z",                            200                        ],                        [                            "2015-06-18T07:31:46.123Z",                            300                        ],                        [                            "2015-08-08T18:33:50.61Z",                            763                        ],                        [                            "2015-08-08T18:33:51.505Z",                            10628                        ],                        [                            "2015-08-08T18:33:53.31Z",                            43                        ],                        [                            "2015-08-08T18:34:00.223Z",                            285                        ],                        [                            "2015-08-08T18:34:02.184Z",                            1491                        ],                        [                            "2015-08-08T18:34:02.295Z",                            43                        ],                        [                            "2015-08-08T18:34:03.839Z",                            36                        ],                        [                            "2015-08-08T18:34:04.179Z",                            1174                        ],                        [                            "2015-08-09T06:33:51.622Z",                            768                        ],                        [                            "2015-08-09T06:33:52.511Z",                            11371                        ],                        [                            "2015-08-09T06:33:54.721Z",                            42                        ],                        [                            "2015-08-09T06:33:56.031Z",                            98                        ],                        [                            "2015-08-09T06:33:57.969Z",                            33                        ],                        [                            "2015-08-09T06:34:03.951Z",                            1376                        ]                    ]                }            ]        }    ]}

大家可以結合我上面的代碼看一下處理過程，實際上記住一條原則就可以：欄位名前面是大括弧的，直接用“.”號取，有中括弧的情況下，要用[0],[1]這種數組操作首先把大括弧或者欄位名先取出來。

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

D3.js以及通用JS（JavaScript）讀取並解析伺服器端JSON的注意事項