I have data coming from DB layer in the below form:

[{"Account":"0011x000020Ni","Permission_level":"Standard","Account_Child": {"External_Reference":"GB42305","Point_of_Sale":"United Kingdom","Id":"0011x000020Ni6GAAS","Name":"Some Name"}, "Id":"a041x0000092u","Name":"CCR-000081862","Role__c":"Reporting User"}]

In order to display it to the UI properly, I need to have it flattened in one row rather than the hierarchical structure it currently has.
So, I have created a JS function but getting the error

Uncaught TypeError: items.map is not a function

Below is the code

JSFiddle

let data = [{"Account":"0011x000020Ni","Permission_level":"Standard","Account_Child":
{"External_Reference":"GB42305","Point_of_Sale":"United Kingdom","Id":"0011x000020Ni6GAAS","Name":"Some Name"},
"Id":"a041x0000092u","Name":"CCR-000081862","Role__c":"Reporting User"}];

var result = [];
for(var i in data)
    result.push([data[i]]);

if (data) {
  this.allRows = data.map((row) => {
    row = { ...row }; // copy row object
    const items = row.Account_Child; // Save items
    console.log('items:', items);
    delete row.Account_Child; // remove from row
    row._children = items.map((item) => flattenObject(item)); // flatten item
    return row;
  });
}
function flattenObject(object, result = {}, path = []) {
  for (const [key, value] of Object.entries(object)) {
    if (typeof value === "object") {
      flattenObject(value, result, [...path, key]);
    } else {
      result[`${path.join(".")}${path.length ? "." : ""}${key}`] = value;
    }
  }
  return result;
}