Is there a better/more efficient way to achieve this?

Question

I'm learning Javascript and getting started with React. I'm attempting to build a Materials-UI's DataGrid and need to structure my data accordingly. I have the following piece of code that prepares the Rows and Columns for DataGrid but I feel it may be "slow" and wondering if I can get the community's input on how it can be written more efficiently. Any ideas/solutions would be appreciated. Thanks.

input:

const values = [
    {
        "documentId": "12345",
        "documentDirectory": "Canadian PnC",
        "properties": [
            {
                "name": "HoldingNumber",
                "type": "STRING",
                "value": "88888",
            },
            {
                "name": "DocumentType",
                "type": "STRING",
                "value": "TAC",
            },
            {
                "name": "DocumentName",
                "type": "STRING",
                "value": "Income",
            },

        ]
    },
    {
        "documentId": "54321",
        "documentDirectory": "Wealth",
        "properties": [
            {
                "name": "HoldingNumber",
                "type": "STRING",
                "value": "99999",
            },
            {
                "name": "DocumentType",
                "type": "STRING",
                "value": "TAC",
            },
            {
                "name": "DocumentName",
                "type": "STRING",
                "value": "Appraisal",
            },
        ]
    }
];

output:

//console.log(cols);


[
  {
      field: "DocumentDirectory", headerName: "DocumentDirectory", width: 200
  },
  {
      field: "DocumentId", headerName: "DocumentId", width: 200
  },
  {
      field: "HoldingNumber", headerName: "HoldingNumber", width: 200
  },
  {
      field: "DocumentType", headerName: "DocumentType", width: 200
  },
  {
      field: "DocumentName", headerName: "DocumentName", width: 200
  }
]

//console.log(rows);

[
    {
      id: 0, 
      DocumentDirectory: "Canadian PnC", 
      DocumentId: "12345", 
      HoldingNumber: "88888", 
      DocumentType: "TAC", 
      DocumentName: "Income"},
    {
      id: 1, 
      DocumentDirectory: "Wealth", 
      DocumentId: "54321", 
      HoldingNumber: "99999", 
      DocumentType: "TAC", 
      DocumentName: "Appraisal"
    }
  ]

I'm currently achieving it the using the following:

        const docDirectory = values.map(result => result.documentDirectory);
        const docId = values.map(result => result.documentId);
        const docProperties = values.map(result => result.properties);

        let cols= [];
        let rows= [];
        for (let i = 0; i < docProperties.length; i++) {
            const p = docProperties[i];
            let o = {};
            o["id"] = i;
            o["DocumentDirectory"] = docDirectory[i];
            o["DocumentId"] = docId[i];

            if (i === 0) {
                cols.push({ field: "DocumentDirectory", headerName: "DocumentDirectory", width: 200 });
                cols.push({ field: "DocumentId", headerName: "DocumentId", width: 200 });
            }

            for (let j = 0; j < p.length; j++) {
                let nam = p[j].name;
                let val = p[j].value;
                o[nam.replace(/\s+/, "")] = val;
                if (i === 0) {
                    cols.push({ field: nam.replace(/\s+/, ""), headerName: nam, width: 200 });
                }
            }
            rows.push(o);
        }

        console.log(cols);
        console.log(rows);

Answer 1

const values = [{
    "documentId": "12345",
    "documentDirectory": "Canadian PnC",
    "properties": [{
        "name": "HoldingNumber",
        "type": "STRING",
        "value": "88888",
      },
      {
        "name": "DocumentType",
        "type": "STRING",
        "value": "TAC",
      },
      {
        "name": "DocumentName",
        "type": "STRING",
        "value": "Income",
      },

    ]
  },
  {
    "documentId": "54321",
    "documentDirectory": "Wealth",
    "properties": [{
        "name": "HoldingNumber",
        "type": "STRING",
        "value": "99999",
      },
      {
        "name": "DocumentType",
        "type": "STRING",
        "value": "TAC",
      },
      {
        "name": "DocumentName",
        "type": "STRING",
        "value": "Appraisal",
      },
    ]
  }
];

const allCols = values.reduce((prev, { documentDirectory, properties }) => ([
   ...prev, 
   { field: documentDirectory, headerName: documentDirectory, width: 200 }, 
   ...properties.map(({name: field, name: headerName}) => ({field, headerName, width: 200}))
 ]), [])

   const cols = [...new Set(allCols.map(JSON.stringify))].map(JSON.parse)

   console.log(cols)
   
   const rows = values.reduce((prev, next) => ([
 ...prev,
 ...next.properties.map(property => ({
  DocumentDirectory: next.DocumentDirectory, 
  DocumentId: next.DocumentId, 
  ...property
 }))
   ]), []).map((row, key) => ({id: key, ...row}))

   console.log(rows)

Answer 2

const values = [
  {
    documentId: '12345',
    documentDirectory: 'Canadian PnC',
    properties: [
      {
        name: 'HoldingNumber',
        type: 'STRING',
        value: '88888'
      },
      {
        name: 'DocumentType',
        type: 'STRING',
        value: 'TAC'
      },
      {
        name: 'DocumentName',
        type: 'STRING',
        value: 'Income'
      }
    ]
  },
  {
    documentId: '54321',
    documentDirectory: 'Wealth',
    properties: [
      {
        name: 'HoldingNumber',
        type: 'STRING',
        value: '99999'
      },
      {
        name: 'DocumentType',
        type: 'STRING',
        value: 'TAC'
      },
      {
        name: 'DocumentName',
        type: 'STRING',
        value: 'Appraisal'
      }
    ]
  }
];

const cols = [
  {
    field: 'DocumentDirectory',
    headerName: 'DocumentDirectory',
    width: 200
  },
  {
    field: 'DocumentId',
    headerName: 'DocumentId',
    width: 200
  },
  ...values[0].properties.map(p => ({
    field: p.name,
    headerName: p.name,
    width: 200
  }))
];

const rows = values.map((value, index) => {
  return {
    id: index,
    DocumentDirectory: value.documentDirectory,
    DocumentId: value.documentId,
    ...value.properties.reduce(
      (val, cur) => ({
        ...val,
        [cur.name]: cur.value
      }),
      {}
    )
  };
});

console.log(cols);
console.log(rows);