I've got an array of objects that I want to format in a way suitable for react-csv, specifically as a 2D array resembling a nested loop structure shown below:
https://i.sstatic.net/41cuj.png
The desired end result should look like this:
[
["Name", "Message", "Column", "configDataType","dbDataType"],
["STAGE", "Columns present in source config but not in the database.", "TEST", "", ""],
["", "", "TEST1", "", ""],
["", "", "TEST2", "", ""],
["", "Columns present in database but not in the source config.", "", "", ""],
["", "Columns with datatype mismatch.", "LAST_NAME", "varchar(50)", "varchar(40)"],
["", "", "FIRST_NAME", "varchar(50)", "varchar(40)"],
["RAW", "Column sets are identical.", "", "", ""],
["LAST", "Column sets are identical.", "", "", ""],
["HIST", "Column sets are identical.", "", "", ""],
["CORE", "Column sets are identical.", "", "", ""],
["ADDR", "Column sets are identical.", "", "", ""],
["CONFIG", "Column sets are identical.", "", "", ""],
["ACTION", "Column sets are identical.", "", "", ""]
]Although I have made some progress so far, I haven't been able to achieve the intended outcome. Any guidance on what might be missing would be greatly appreciated.
const data = {
// Object data content goes here
}
const res = _.flattenDeep(Object.keys(data).map(i => {
return data[i].map(j => {
return {
...j,
tableName: i
}
})
}))
console.log(res.map(i => {
return [
i.tableName,
i.message,
...((i.columns.length > 0 ? i.columns : i.columnsName).map(j => typeof j === 'string' ? j : j.name)),
..._.compact(((i.columns.length > 0 ? i.columns : i.columnsName).map(j => typeof j === 'string' ? '' : j.configDatatype)),
...(((i.columns.length > 0 ? i.columns : i.columnsName).map(j => typeof j === 'string' ? '' : j.dbDatatype))
]
}))<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>