Comparison between an array and array of arrays to insert missing keys

Question

I'm trying to create a comparison between an array of keys and an array of arrays. The array of array contains the data as the follwing:

const data = [
  [["id", 1], ["name", "somethign"], ["age", 20]],
  [["id", 20], ["name", "somethign"]],
  [["id", 9], ["age", 10]]
]

An the array with keys, that will always have all the keys I need.

const keys = [
  "id",
  "name",
  "age",
  "nothing"
]

But as you can see in data array, not always all the keys come in the array, what I was attempting to do was, make a comparison between both arrays an add that key that is missing into the data array (in order) as undefined, for example (final result):

const data = [
  [["id", 1], ["name", "somethign"], ["age", 20], ["nothing", undefined]],
  [["id", 20], ["name", "somethign"],["age", undefined] ["nothing", undefined]],
  [["id", 9], ["name", undefined], ["age", 10], ["nothing", undefined]]
]

Answer 1

The following method takes these steps:

1. Loops over the data in the given order i.e. it will maintain the order of the data.
2. For each row of the data, it loops over the keys in the order of keys. So within each row, it will keep the order of the keys and keys will be consistent on top of each other.

I prefer null over undefined here but you are free to change it to undefined.

const data = [
  [
    ['id', 1],
    ['name', 'somethign'],
    ['age', 20],
  ],
  [
    ['id', 20],
    ['name', 'somethign'],
  ],
  [
    ['id', 9],
    ['age', 10],
  ],
];

const keys = ['id', 'name', 'age', 'nothing'];

const dataWithMissingKeys = data.map(row =>
  keys.map(key => {
    const foundItem = row.find(element => element[0] === key);
    if (foundItem) {
      return foundItem;
    }
    return [key, null];
  })
);

console.log(dataWithMissingKeys);

Answer 2

1. Use map() to get a list of existing keys (index 0: d.map(x => x[0]))
2. Use filter() to get the diff between keys and existing keys
3. Loop over the missing keys
4. Add the desired array to the data array for each missing key

const data = [
    [["id", 1], ["name", "somethign"], ["age", 20]],
    [["id", 20], ["name", "somethign"]],
    [["id", 9], ["age", 10]]
];
const keys = [ "id", "name", "age", "nothing" ];

const fixed = data.map(d => {
    const existing = d.map(x => x[0]);
    const missing = keys.filter(k => !existing.includes(k));

    missing.forEach(m => d.push([ m, undefined ]));
    
    return d;
});

console.log(fixed);

Answer 3

Here's an approach relying on Object.fromEntries and Object.entries:

• Create an empty base object from your keys,
• Loop over your data,
• For each entry, create an object using Object.fromEntries
• Combine that object with the empty base
• Use Object.entries to transform back to an array of key-value-pairs

const data = [
  [["id", 1], ["name", "somethign"], ["age", 20]],
  [["id", 20], ["name", "somethign"]],
  [["id", 9], ["age", 10]]
];

const keys = [
  "id",
  "name",
  "age",
  "nothing"
];

const base = Object.fromEntries(keys.map(k => [k, undefined]));

console.log(
  data.map(d => Object.entries({ ...base, ...Object.fromEntries(d) }))
)