Pivot-Daten mit lodash

Question

Ich muss das Init-Array in End-Array vorzugsweise mit Lodash konvertieren.

initArray = [ 
    { 
     "date":"2017-08-15", 
     "data":[ 
     { 
      "color":"orange", 
      "count":100 
     }, 
     { 
      "color":"green", 
      "count":101 
     } 
     ] 
    }, 
    { 
     "date":"2017-08-14", 
     "data":[ 
     { 
      "color":"orange", 
      "count":102 
     }, 
     { 
      "color":"green", 
      "count":103 
     } 
     ] 
    } 
] 

finalArray = [ 
    { 
     "color":"orange", 
     "data":[ 
     100, 
     102 
     ] 
    }, 
    { 
     "color":"green", 
     "data":[ 
     101, 
     103 
     ] 
    } 
] 

Answer 1

können Sie reduce verwenden, um die Original-Array zu glätten, so dass alle Datenfelder auf der gleichen Ebene sind. Verwenden Sie dann _.transform, um ein temporäres Objekt zu erhalten, das Farben auf das Array ihrer Zählwerte abbildet. und dann können Sie Dinge mit forEach zu finalArray schieben.

var initArray = [ 
 
    { 
 
    "date":"2017-08-15", 
 
    "data":[ 
 
    { 
 
     "color":"orange", 
 
     "count":100 
 
    }, 
 
    { 
 
     "color":"green", 
 
     "count":101 
 
    } 
 
    ] 
 
    }, 
 
    { 
 
    "date":"2017-08-14", 
 
    "data":[ 
 
    { 
 
     "color":"orange", 
 
     "count":102 
 
    }, 
 
    { 
 
     "color":"green", 
 
     "count":103 
 
    } 
 
    ] 
 
    } 
 
]; 
 
var finalArray = []; 
 
var temp = _.transform(initArray.reduce((a,b) => a.data.concat(b.data)), 
 
         (r, v) => (r[v.color] || (r[v.color] = [])).push(v.count), {}); 
 

 
_.forEach(temp, (v,k) => finalArray.push({color:k, count:v})); 
 

 
console.log(finalArray);

<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>

Answer 2

Auf diese Weise scheint, wie die lodash Anrufe machen Sinn für mich.

// var _ = require('lodash') 
 

 
initArray = [ 
 
    { 
 
     "date":"2017-08-15", 
 
     "data":[ 
 
     { 
 
      "color":"orange", 
 
      "count":100 
 
     }, 
 
     { 
 
      "color":"green", 
 
      "count":101 
 
     } 
 
     ] 
 
    }, 
 
    { 
 
     "date":"2017-08-14", 
 
     "data":[ 
 
     { 
 
      "color":"orange", 
 
      "count":102 
 
     }, 
 
     { 
 
      "color":"green", 
 
      "count":103 
 
     } 
 
     ] 
 
    } 
 
] 
 

 
result = _(initArray) 
 
    //.map('data') 
 
    //.flatten() 
 
    .flatMap('data') // instead of .map('data').flatten() 
 
    .groupBy('color') 
 
    .map((item, key) => ({ 
 
     color: key, 
 
     count: _.map(item, 'count') 
 
    })) 
 
    .value() 
 

 
console.log(result)

<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>