How to pad and normalize variable length arrays

Question

I have the following chart array which contains the foo, bar and baz objects, each object contains a values array with the data points.

The problem is that from my API endpoint I get a variable amount of data points.
And I need to normalize my objects so they:

• The datapoints need to be sorted by the label acending (eg. a, b, c..)

• If the data point does not exist, in a particular object but exists, in any other array of data points, it's generated with a value of zero

• At the end, the number of data points in each object must be the same.

Here's an example of the code:

var r = function() { return Math.random() * 10; };

var chart = [
    {key:'foo', values: [['a', r()], ['b', r()], ['c', r()], ['d', r()]]},
    {key:'bar', values: [['b', r()], ['c', r()], ['d', r()], ['e', r()]]},
    {key:'baz', values: [['c', r()], ['d', r()], ['e', r()], ['f', r()]]}
];

// desired output, where x is the random value returned by r()
// any values that are unavailable must be 0
chart = [
    {key:'foo', values: [['a', x], ['b', x], ['c', x], ['d', x], ['e', 0], ['f', 0]]},
    {key:'bar', values: [['a', 0], ['b', x], ['c', x], ['d', x], ['e', x], ['f', 0]]},
    {key:'baz', values: [['a', 0], ['b', 0], ['c', x], ['d', x], ['e', x], ['f', x]]}
];

Answer 1

Your letter–number pairs might be better represented by objects rather than arrays, but nevertheless I believe this solves the question as stated.

var datapointLabels = {};                                 // Create object to record which labels exist. 
for(var i = 0; i < chart.length; i++) {                   // Iterate through `chart` items.
  for(var j = 0; j < chart[i].values.length; j++) {       // Iterate through `values` items.
    var datapointLabel = chart[i].values[j][0];
    datapointLabels[datapointLabel] = true;
  }
}
// Skip nested loops above if datapoint labels are pre-known; construct `datapointsLabels` object with one loop, or manually without looping, instead.

var newChart = [];                                        // Must create a new array to hold the padded data (will need to refer to old array throughout process).
for(var i = 0; i < chart.length; i++) {
  newChart[i] = {};
  newChart[i].key = chart[i].key;
  newChart[i].values = [];
  for(var datapointLabel in datapointLabels) {            // Iterate through all datapoint labels in our records object.
    var datapoint = 0;                                    // Set default datapoint as zero.
    for(var j = 0; j < chart[i].values.length; j++) {     // Look at each `value` pair to see if it matches the current datapoint label.
      if(chart[i].values[j][0] === datapointLabel) {
        datapoint = chart[i].values[j][1];                // Overwrite default if found.
        j = chart[i].values.length;                       // Skip further checks (optional, minor efficiency increase).
      }
    }
    newChart[i].values.push([datapointLabel, datapoint]); // Push found or default data to new array.
  }  
}

If you are able to redefine your data structure, here's a way to cut a for-loop, using object-key lookup:

var chart = [
  { key: 'foo', values: { a: r(), b: r(), c: r(), d: r() } },
  { key: 'bar', values: { b: r(), c: r(), d: r(), e: r() } },
  { key: 'baz', values: { c: r(), d: r(), e: r(), f: r() } }
];

var datapointLabels = {};                                 // Create object to record which labels exist. 
for(var i = 0; i < chart.length; i++) {                   // Iterate through `chart` items.
  for(var datapointLabel in chart[i].values){             // Iterate through `values` items.
    datapointLabels[datapointLabel] = true;
  }
}
// Skip nested loops above if datapoint labels are pre-known; construct `datapointsLabels` object with one loop, or manually without looping, instead.

var newChart = [];                                        // Must create a new array to hold the padded data (will need to refer to old array throughout process).
for(var i = 0; i < chart.length; i++) {
  newChart[i] = {};
  newChart[i].key = chart[i].key;
  newChart[i].values = {};
  for(var datapointLabel in datapointLabels) {            // Iterate through all datapoint labels in records object.
    var datapoint = chart[i].values[datapointLabel] || 0;
    newChart[i].values[datapointLabel] = datapoint;
  }
}

Answer 2

My solution using Array.map().

var temp = ["a","b","c","d","e","f"];

var newchart = chart.map(function (obj) {
    var objValKeys = obj.values.map(function (objVal) {
        return objVal[0];
    });
    return {
        key: obj.key,
        values: temp.map(function (thisval) {
            var index = objValKeys.indexOf(thisval);
            var actlVal = (index+1) ? obj.values[index][1] : 0;
            return [thisval, actlVal];
        })
    };
});

Check it on my JSFiddle