title: Is there a better/more efficient way to achieve this?
body: <p>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 &quot;slow&quot; 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.</p>
  <p>input:</p>
  <pre><code>const values = [
      {
          &quot;documentId&quot;: &quot;12345&quot;,
          &quot;documentDirectory&quot;: &quot;Canadian PnC&quot;,
          &quot;properties&quot;: [
              {
                  &quot;name&quot;: &quot;HoldingNumber&quot;,
                  &quot;type&quot;: &quot;STRING&quot;,
                  &quot;value&quot;: &quot;88888&quot;,
              },
              {
                  &quot;name&quot;: &quot;DocumentType&quot;,
                  &quot;type&quot;: &quot;STRING&quot;,
                  &quot;value&quot;: &quot;TAC&quot;,
              },
              {
                  &quot;name&quot;: &quot;DocumentName&quot;,
                  &quot;type&quot;: &quot;STRING&quot;,
                  &quot;value&quot;: &quot;Income&quot;,
              },
  
          ]
      },
      {
          &quot;documentId&quot;: &quot;54321&quot;,
          &quot;documentDirectory&quot;: &quot;Wealth&quot;,
          &quot;properties&quot;: [
              {
                  &quot;name&quot;: &quot;HoldingNumber&quot;,
                  &quot;type&quot;: &quot;STRING&quot;,
                  &quot;value&quot;: &quot;99999&quot;,
              },
              {
                  &quot;name&quot;: &quot;DocumentType&quot;,
                  &quot;type&quot;: &quot;STRING&quot;,
                  &quot;value&quot;: &quot;TAC&quot;,
              },
              {
                  &quot;name&quot;: &quot;DocumentName&quot;,
                  &quot;type&quot;: &quot;STRING&quot;,
                  &quot;value&quot;: &quot;Appraisal&quot;,
              },
          ]
      }
  ];
  </code></pre>
  <p>output:</p>
  <pre><code>//console.log(cols);
  
  
  [
    {
        field: &quot;DocumentDirectory&quot;, headerName: &quot;DocumentDirectory&quot;, width: 200
    },
    {
        field: &quot;DocumentId&quot;, headerName: &quot;DocumentId&quot;, width: 200
    },
    {
        field: &quot;HoldingNumber&quot;, headerName: &quot;HoldingNumber&quot;, width: 200
    },
    {
        field: &quot;DocumentType&quot;, headerName: &quot;DocumentType&quot;, width: 200
    },
    {
        field: &quot;DocumentName&quot;, headerName: &quot;DocumentName&quot;, width: 200
    }
  ]
  </code></pre>
  <p>//console.log(rows);</p>
  <pre><code>[
      {
        id: 0, 
        DocumentDirectory: &quot;Canadian PnC&quot;, 
        DocumentId: &quot;12345&quot;, 
        HoldingNumber: &quot;88888&quot;, 
        DocumentType: &quot;TAC&quot;, 
        DocumentName: &quot;Income&quot;},
      {
        id: 1, 
        DocumentDirectory: &quot;Wealth&quot;, 
        DocumentId: &quot;54321&quot;, 
        HoldingNumber: &quot;99999&quot;, 
        DocumentType: &quot;TAC&quot;, 
        DocumentName: &quot;Appraisal&quot;
      }
    ]
  </code></pre>
  <p>I'm currently achieving it the using the following:</p>
  <pre><code>        const docDirectory = values.map(result =&gt; result.documentDirectory);
          const docId = values.map(result =&gt; result.documentId);
          const docProperties = values.map(result =&gt; result.properties);
  
          let cols= [];
          let rows= [];
          for (let i = 0; i &lt; docProperties.length; i++) {
              const p = docProperties[i];
              let o = {};
              o[&quot;id&quot;] = i;
              o[&quot;DocumentDirectory&quot;] = docDirectory[i];
              o[&quot;DocumentId&quot;] = docId[i];
  
              if (i === 0) {
                  cols.push({ field: &quot;DocumentDirectory&quot;, headerName: &quot;DocumentDirectory&quot;, width: 200 });
                  cols.push({ field: &quot;DocumentId&quot;, headerName: &quot;DocumentId&quot;, width: 200 });
              }
  
              for (let j = 0; j &lt; p.length; j++) {
                  let nam = p[j].name;
                  let val = p[j].value;
                  o[nam.replace(/\s+/, &quot;&quot;)] = val;
                  if (i === 0) {
                      cols.push({ field: nam.replace(/\s+/, &quot;&quot;), headerName: nam, width: 200 });
                  }
              }
              rows.push(o);
          }
  
          console.log(cols);
          console.log(rows);
  </code></pre>