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

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

Does this answer your question? how to pivot array javascript/react — Heretic Monkey
– Heretic Monkey, Commented Aug 17, 2023 at 16:29

trincot · Accepted Answer · 2023-08-17 16:44:52Z

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);

Collectives™ on Stack Overflow

How to create table dynamically from an array?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related