有没有更好/更有效的方法来实现这一目标？

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

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