あるデータ構造を別のデータ構造に変換する

Question

こんにちは私は、いくつかの構造を解析して、一部のデータを折れ線グラフで表示する必要があります。私は、このデータ構造を持っている、と私は配列example_outputのためにそれを変換する必要があります。

data = { 
    "el1": [{ 
     "date": "2017.01", 
     "data1": { 
      "series_1": { 
       "a": 10, 
       "b": 20, 
       "c": 50, 
       "d": 15, 
       "e": 8 
      }, 
      "Series_2": { 
       "yes": 5, 
       "no": 3 
      }, 
      "Series_3": { 
       "s": 2, 
       "n": 9 
      } 
     }, 
     "text": [{ 
      "t": "header", 
      "c": "text" 
     }, { 
      "t": "header2", 
      "c": "text2" 
     }] 
    }, { 
     "date": "2017.02", 
     "data1": { 
      "series_1": { 
       "a": 56, 
       "b": 23, 
       "c": 45, 
       "d": 69, 
       "e": 14 
      }, 
      "Series_2": { 
       "yes": 2, 
       "no": 1 
      }, 
      "Series_3": { 
       "s": 6, 
       "n": 4 
      } 
     }, 
     "text": [{ 
      "t": "header", 
      "c": "text" 
     }, { 
      "t": "header2", 
      "c": "text2" 
     }] 
    }, { 
     "date": "2017.03", 
     "data1": { 
      "series_1": { 
       "a": 15, 
       "b": 12, 
       "c": 10, 
       "d": 54, 
       "e": 4 
      }, 
      "Series_2": { 
       "yes": 20, 
       "no": 16 
      }, 
      "Series_3": { 
       "s": 9, 
       "n": 7 
      } 
     }, 
     "text": [{ 
      "t": "header", 
      "c": "text" 
     }, { 
      "t": "header2", 
      "c": "text2" 
     }] 
    } 
    ] 
}; 

と私はchartist.js

var example_output = [{ 
labels: ['2017.01', '2017.02', '2017.03'], 
series: { 
    [10, 56, 15], 
    [20, 23, 12], 
    [50, 45, 10], 
    [15, 69, 54], 
    [8, 14, 4] 
}, 
labels: ['2017.01', '2017.02', '2017.03'], 
series: { 
    [5, 2, 20], 
    [3, 1, 16] 
}, 
labels: ['2017.01', '2017.02', '2017.03'], 
series: { 
    [2, 6, 9], 
    [9, 4, 7] 
},}] ; 

のために、このような出力を必要とする元とexample_outputから数字を比較してください。これがどのように見えるかをよく理解する。私はこれを解析するためのコードを使用しますが、いろいろ書いがうまくいかない：

function parseData(data) { 
    var _newData = {}; 
    var allSeries = []; 
    data.elements.forEach(function(el){ 
    _newData[el.date] = el.info 
    if(allSeries.length==0) 
     allSeries = Object.keys(el.info); 
    }); 

    return allSeries.map(function(el) { 
    var obj = { 
     labels: [], 
     series: [] 
    }; 
    obj.labels = Object.keys(_newData); 
    Object.keys(_newData).forEach(function(_el) { 
     obj.series.push(Object.values(_newData[_el][el])); 
    }); 
    var _newSeries = []; 
    obj.series[0].forEach(function(el, i){ 
     _newSeries.push([el, obj.series[1][i]]); 
    }); 
    obj.series = _newSeries; 
    return obj; 
    }); 
} 

Answer 1

あなたがarray#forEachとarray#reduceを使用することができます。最初のループを使用してel1を反復してから、seriesキーにreduceを使用し、結果をoutput_exampleに累積します。

注：出力のseriesが正しくありません。オブジェクトではなく配列でなければなりません。

const data = {"el1": [{"date": "2017.01","data1": {"series_1": {"a": 10,"b": 20,"c": 50,"d": 15,"e": 8},"Series_2": {"yes": 5,"no": 3},"Series_3": {"s": 2,"n": 9}},"text": [{"t": "header","c": "text"}, {"t": "header2","c": "text2"}]}, {"date": "2017.02","data1": {"series_1": {"a": 56,"b": 23,"c": 45,"d": 69,"e": 14},"Series_2": {"yes": 2,"no": 1},"Series_3": { "s": 6,"n": 4 }},"text": [{"t": "header","c": "text"}, {"t": "header2","c": "text2"}]}, {"date": "2017.03","data1": {"series_1": {"a": 15,"b": 12,"c": 10,"d": 54,"e": 4},"Series_2": {"yes": 20, "no": 16},"Series_3": {"s": 9, "n": 7}},"text": [{"t": "header","c": "text"}, {"t": "header2","c": "text2" }]}]}; 
 
     transpose = (arr) => arr.reduce((r,v,i) => { 
 
     (r[i] = r[i] || []).push(v); 
 
     return r; 
 
     },[]); 
 

 
let example_output = []; 
 

 
data.el1.forEach((o) => { 
 
    
 
    Object.keys(o.data1).reduce((r, k, i) => { 
 
    r[i] = r[i] || {}; 
 

 
    if('labels' in r[i]) 
 
     r[i]['labels'].push(o.date); 
 
    else 
 
     r[i]['labels'] = [o.date]; 
 

 
    if('series' in r[i]) 
 
     Object.values(o.data1[k]).forEach((v,j) => r[i]['series'][j].push(v)); 
 
    else 
 
     r[i]['series'] = transpose(Object.values(o.data1[k])); 
 
    
 
    return r; 
 
    },example_output); 
 
    
 
},[]); 
 

 
console.log(example_output);

.as-console-wrapper { max-height: 100% !important; top: 0; }