Mapping nested arrays

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Press F12 and check the console in the development tools!</h1>
  </body>

</html>

// Original Data
var orig_data = [{
    "x": "2015-06-15T20:31:12.210Z",
    "count": 12256,
    "timer": 57.46,
    "trendTimer": 57,
    "trendCount": 12256,
    "xCountCounter": 1,
    "xTimerCounter": 1,
    "shifts": [{
        "count": 2902,
        "timer": 61633.33,
        "trendTimer": null,
        "trendCount": null,
        "shiftCounter": 1,
        "startDate": 1434366000,
        "endDate": 1434384000
    }, {
        "count": 2902,
        "timer": 61633.33,
        "trendTimer": null,
        "trendCount": null,
        "shiftCounter": 2,
        "startDate": 1434366000,
        "endDate": 1434384000
    }, {
        "count": 2902,
        "timer": 61633.33,
        "trendTimer": null,
        "trendCount": null,
        "shiftCounter": 3,
        "startDate": 1434366000,
        "endDate": 1434384000
    }],
    "countRegLine": 13103,
    "timerRegLine": 59.67333333333333
}, {
    "x": "2015-06-16T20:31:12.210Z",
    "count": 11866,
    "timer": 52.5,
    "trendTimer": 55,
    "trendCount": 12061,
    "xCountCounter": 2,
    "xTimerCounter": 2,
    "shifts": [{
        "count": 2764,
        "timer": 56738.89,
        "trendTimer": null,
        "trendCount": null,
        "shiftCounter": 4,
        "startDate": 1434452400,
        "endDate": 1434470400
    }, {
        "count": 2764,
        "timer": 56738.89,
        "trendTimer": null,
        "trendCount": null,
        "shiftCounter": 5,
        "startDate": 1434452400,
        "endDate": 1434470400
    }, {
        "count": 2764,
        "timer": 56738.89,
        "trendTimer": null,
        "trendCount": null,
        "shiftCounter": 6,
        "startDate": 1434452400,
        "endDate": 1434470400
    }],
    "countRegLine": 11346.464285714286,
    "timerRegLine": 51.58130952380952
}];

// Map the original data to a flat data structure
// -> this runs the mapping function on each element d
// in the array orig_data and returns a value
// https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/map
var flat_data = orig_data.map(function(d){
  
  // Here we have access to every element of the array orig_data
  console.log('orig elements', d);
  
  // And also the nested values
  console.log('shift elements', d.shifts);
  
  // If we would return every element from the original array
  // we would get the same array as before
  // return d;
  
  // But we want to create a flat array, so we return aggregated values
  return {
    // here we just use the values from the array
    x: d.x,
    count: d.count,
    timer: d.timer,
    trendCount: d.trendCount,
    trendTimer: d.trendTimer,
    
    // here we access the values from the nested shifts elements
    // actually we return values from the first element of each shifts
    // elements
    shiftCount1: d.shifts[0].count,
    shiftTimer1: d.shifts[0].timer,
    shiftTrendCount1: d.shifts[0].trendCount,
    shiftTrendTimer1: d.shifts[0].trendTimer,
    
    // Actually we could also provide sane default values
    // that we don't have to deal with Null values
    shiftCount1Sane: d.shifts[0].count || 0,
    shiftTimer1Sane: d.shifts[0].timer || 0,
    shiftTrendCount1Sane: d.shifts[0].trendCount || 0,
    shiftTrendTimer1Sane: d.shifts[0].trendTimer || 0
  };
});

// Now let's look at the flat data file
console.log('flat array', flat_data);

/* Styles go here */