2014-06-20 59 views
0

一個新的JSON對象的foreach項目我有很大的JSON文件,通過這種結構,只多不少的圖表在每一個:試圖創建陣列

{ 
    "Name": "test", 
    "Charts": [ 
    { 
     "chartName": "Idle Times", 
     "disk": 0, 
     "OpCode": "Read", 
     "xAxis": [0,100,200,300,400,500], 
     "yAxis": [337487,8565,11419,9704,7598] 
    }, 
    { 
     "chartName": "Idle Times", 
     "disk": 0, 
     "OpCode": "Read", 
     "xAxis": [0,100,200,300,400,500], 
     "yAxis": [337487,8565,11419,9704,7598] 
    }] 
} 

的問題是,所有的圖表數據,在xy數據,是在陣列和JavaScript的圖表工具,我使用的需求JSON看起來像這樣:

{"chartName":"Idle Times", "disk":0, "OpCode":"Read","xAxis":0, "yAxis":1234}, 
{"chartName":"Idle Times", "disk":0, "OpCode":"Read","xAxis":100, "yAxis":1234}, 
{"chartName":"Idle Times", "disk":0, "OpCode":"Read","xAxis":200, "yAxis":1234}, 
{"chartName":"Idle Times", "disk":0, "OpCode":"Read","xAxis":300, "yAxis":1234}, 
{"chartName":"Idle Times", "disk":0, "OpCode":"Read","xAxis":400, "yAxis":1234}, 
{"chartName":"Idle Times", "disk":0, "OpCode":"Read","xAxis":500, "yAxis":1234}, 
{"chartName":"Idle Times", "disk":0, "OpCode":"Read","xAxis":600, "yAxis":1234} 

我的應用程序使用AngularJS,目前JSLINQ,D3JS和DimpleJS。如果有一種方法可以用這些理想的工具來實現這一點。我也是開到另一個開源庫,我只是希望我沒有在整個JSON文件的讀取和右回用的複雜的一堆for循環基本上建設由線手線新的JSON 。

我也開來,如果有東西,將讀取JSON數據我現在有它的方式切換到另一個圖表工具,DimpleJS只是很容易使用和看起來很銳利。

在此先感謝您的幫助!

+0

當你與'xAxis'相關時,你的'yAxis'值應該是什麼? 1234隻字未提它不幸;) – Ingmars

+0

是啊,我剛纔扔在一些值顯示,他們應該是。每個y值總是有一個x值。每個圖 –

+1

X-Y對變化找到你的數據格式相匹配的圖表庫的量可能是一個艱鉅的任務。我認爲將數據保存爲適合您選擇的圖表庫的格式或「用一堆複雜的循環遍歷現有數據」更實用。 :)(不是那麼複雜。) – bloodyKnuckles

回答

3

所以,如果我理解正確的話,你要擴大各xy座標轉換成單獨的點? 嘗試是這樣的:

var source = { 
    "Name": "test", 
    "Charts": [ 
    { 
     "chartName": "Idle Times", 
     "disk": 0, 
     "OpCode": "Read", 
     "xAxis": [0,100,200,300,400,500], 
     "yAxis": [337487,8565,11419,9704,7598] 
    }, 
    { 
     "chartName": "Idle Times", 
     "disk": 0, 
     "OpCode": "Read", 
     "xAxis": [0,100,200,300,400,500], 
     "yAxis": [337487,8565,11419,9704,7598] 
    }] 
}; 

var data = source.Charts.reduce(function(prev, now) { 
    var target = []; 
    for(var i = 0, len = now.yAxis.length; i < len; i++) { 
    target.push({ 
     "chartName": now.chartName, 
     "disk": now.disk, 
     "OpCode": now.OpCode, 
     "xAxis": now.xAxis[i], 
     "yAxis": now.yAxis[i] 
    }) 
    } 
    return prev.concat(target) 
}, []) 

這應該工作,只要你有個相同數量的。

+1

感謝大家的幫助!這兩個答案都應該起作用,BloodyKnuckles是對的,它並不像我想的那麼複雜。我把Andrei Nemes的答案貼上了標籤,只是因爲我無法將兩者都貼上標籤。再次感謝! –

+1

這往往比您想象的要容易。在我們的頭腦中抽象出事物並將它們包裝在圖書館中很容易,但實際上有很多可以用簡單的控制結構來完成。無論如何,看看[數組原型](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype)以及所有你可以做的有趣的事情用它。它非常強大:) –

2

看來你需要按摩輸入到符合您所在的圖表庫所需的格式。這是一個片段,顯示你如何做到這一點。

對於給定的輸入:

var obj = { 
    "chartName": "Idle Times", 
    "disk": 0, 
    "OpCode": "Read", 
    "xAxis": [0,100,200,300,400], 
    "yAxis": [337487,8565,11419,9704,7598] 
}; 

遍歷x軸值:

var results = []; 
for (var i = 0; i < obj.xAxis.length; i++) { 
    results.push({ 
    "chartName":obj.chartName, 
    "disk":obj.disk, 
    "OpCode":obj.OpCode, 
    "xAxis":obj.xAxis[i], 
    "yAxis":obj.yAxis[i] 
    }); 
} 
+0

請注意,您要添加一些錯誤辦案x和y的值不匹配之類的東西的數量。這應該讓你走上正軌。 – matt