How to create table dynamically from an array?

Question

I have a use case to create a table with dynamic data including the header name. I have tried in many ways to reconstruct the array from the API response, But still unable to develop it.

Receiving Array from Response as below

[
 {
 "category": "Emergency services",
 "code": "RMY 90",
 "limit": "9032",
 "OT": "4124"
 },
 {
 "category": "Pediatrician",
 "code": "RMY 80",
 "limit": "1232",
 "OT": "9412"
 },
 {
 "category": "Neurology",
 "code": "RMY 70",
 "limit": "6423",
 "OT": "7312"
 }
]

Grid Expected array

[
 {
 "item": "Block Code",
 "Emergency services": "RMY 90",
 "Pediatrician": "RMY 80",
 "Neurology": "RMY 70"
 },
 {
 "item": "Total Capacity",
 "Emergency services": "9032",
 "Pediatrician": "1232",
 "Neurology": "6423"
 },
 {
 "item": "OT Capacity",
 "Emergency services": "4124",
 "Pediatrician": "9412",
 "Neurology": "7312"
 }
]

Table sample enter image description here

I have tried with Object.keys() and map but couldn't properly construct the array. since the code is in the client system I couldn't share it. Please help me on reconstruct the array.

My code is

const rowList = ["Block Code", "Total Capacity", "OT Capacity"];
 let arr = [];
 const dumming = rowList?.forEach(item => {
 for (const [key, object] of Object.entries(responseData)) {
 let x = [];
 Object.keys(object)?.forEach(item => {
 x.push(object[item]);
 });
 // console.log('rrrr', x);
 }
 let val = responseData.map((ned, index) => {
 let x = {};
 Object.keys(object)?.forEach(item => {
 x = ned[item]
 });
 // let cor = Object.entries(ned).map(([key, leaf]) => key+leaf);
 return {
 id: `${ index }-${ item }`,
 name: item, ...x
 };
 });
 arr.push(val);
 });
 console.log(arr);

Im not sure this is correct. Got stuck in something

• Heretic Monkey: Does this answer your question? how to pivot array javascript/react

Answer 1

The idea to use rowList is fine, but it assumes some key order in the input objects (when you later would need to associate the data with each label), and it is generally a bad idea to rely on some order in plain objects.

However, your rowList serves no purpose: although you iterate it, your code never uses item (it defines other item variables).

Secondly, you have an unknown variable object in the .map callback.

I didn't understand why you generate an object with id and name keys, and produce strings formatted as ${ index }-${ item } as this does not match anything in your question.

Here is how I would propose to do it:

const responseData = [{"category": "Emergency services","code": "RMY 90","limit": "9032","OT": "4124"},{"category": "Pediatrician","code": "RMY 80","limit": "1232","OT": "9412"},{"category": "Neurology","code": "RMY 70","limit": "6423","OT": "7312"}];
const rowList = [["code", "Block Code"], ["limit", "Total Capacity"], ["OT", "OT Capacity"]];
const result = rowList.map(([key, item]) => ({
 item,
 ...Object.fromEntries(responseData.map((obj) => [obj.category, obj[key]]))
}));
console.log(result);