Generating a table based on an array of objects












0












$begingroup$


I have a React component here that generates a table based on an array of objects, which gets populated with data in an object.



I'm trying to learn all I can about React.js / JavaScript. Could anyone with more experience in this area show me a way to simply the code that I have here? Or if there is any other 'fancy' ways of doing what is being done in the code?



App.js



import React, { Component } from 'react';
import Table from './Table';

//Columns defines table headings and properties to be placed into the body
let columns = [
{
heading: 'Name',
property: 'name'
},
{
heading: 'Age',
property: 'age'
},
{
heading: 'Sex',
property: 'sex'
},
{
heading: 'Breed',
property: 'breed'
},
]

//Data is the array of objects to be placed into the table
let data = [
{
name: 'Sabrina',
age: '6',
sex: 'Female',
breed: 'Staffordshire'
},
{
name: 'Max',
age: '2',
sex: 'Male',
breed: 'Boxer'
}
]

class App extends Component {

render() {
return (
<>
<Table
columns={columns}
data={data}
propertyAsKey='name' //The data property to be used as a key
/>
</>
);
}
}

export default App;


Table.js



import React, { Component } from 'react';

class Table extends Component {

buildTable = (columns, data, key) => {
let headerRow = ;
let dataRows = ;

//Build the table header
columns.forEach (col => {
headerRow.push(
<th key={`header-${col.heading}`}>{col.heading}</th>
);
});

//Build the rows
data.forEach(item => {
let dataCells = ;

//Build cells for this row
columns.forEach (col => {
dataCells.push(
<td key={`${item[key]}-${col.property}`}>{item[col.property]}</td>
);
});

//Push out row
dataRows.push(
<tr key={`${item[key]}-row`}>{dataCells}</tr>
)
});

return(
<>
<thead>
<tr>{headerRow}</tr>
</thead>
<tbody>
{dataRows}
</tbody>
</>
);
};

render() {
const {
columns,
data,
propertyAsKey
} = this.props;

return (
<table className='table'>
{this.buildTable(columns, data, propertyAsKey)}
</table>
);
}
}

export default Table;









share|improve this question









New contributor




Nate Thompson is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.







$endgroup$

















    0












    $begingroup$


    I have a React component here that generates a table based on an array of objects, which gets populated with data in an object.



    I'm trying to learn all I can about React.js / JavaScript. Could anyone with more experience in this area show me a way to simply the code that I have here? Or if there is any other 'fancy' ways of doing what is being done in the code?



    App.js



    import React, { Component } from 'react';
    import Table from './Table';

    //Columns defines table headings and properties to be placed into the body
    let columns = [
    {
    heading: 'Name',
    property: 'name'
    },
    {
    heading: 'Age',
    property: 'age'
    },
    {
    heading: 'Sex',
    property: 'sex'
    },
    {
    heading: 'Breed',
    property: 'breed'
    },
    ]

    //Data is the array of objects to be placed into the table
    let data = [
    {
    name: 'Sabrina',
    age: '6',
    sex: 'Female',
    breed: 'Staffordshire'
    },
    {
    name: 'Max',
    age: '2',
    sex: 'Male',
    breed: 'Boxer'
    }
    ]

    class App extends Component {

    render() {
    return (
    <>
    <Table
    columns={columns}
    data={data}
    propertyAsKey='name' //The data property to be used as a key
    />
    </>
    );
    }
    }

    export default App;


    Table.js



    import React, { Component } from 'react';

    class Table extends Component {

    buildTable = (columns, data, key) => {
    let headerRow = ;
    let dataRows = ;

    //Build the table header
    columns.forEach (col => {
    headerRow.push(
    <th key={`header-${col.heading}`}>{col.heading}</th>
    );
    });

    //Build the rows
    data.forEach(item => {
    let dataCells = ;

    //Build cells for this row
    columns.forEach (col => {
    dataCells.push(
    <td key={`${item[key]}-${col.property}`}>{item[col.property]}</td>
    );
    });

    //Push out row
    dataRows.push(
    <tr key={`${item[key]}-row`}>{dataCells}</tr>
    )
    });

    return(
    <>
    <thead>
    <tr>{headerRow}</tr>
    </thead>
    <tbody>
    {dataRows}
    </tbody>
    </>
    );
    };

    render() {
    const {
    columns,
    data,
    propertyAsKey
    } = this.props;

    return (
    <table className='table'>
    {this.buildTable(columns, data, propertyAsKey)}
    </table>
    );
    }
    }

    export default Table;









    share|improve this question









    New contributor




    Nate Thompson is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
    Check out our Code of Conduct.







    $endgroup$















      0












      0








      0





      $begingroup$


      I have a React component here that generates a table based on an array of objects, which gets populated with data in an object.



      I'm trying to learn all I can about React.js / JavaScript. Could anyone with more experience in this area show me a way to simply the code that I have here? Or if there is any other 'fancy' ways of doing what is being done in the code?



      App.js



      import React, { Component } from 'react';
      import Table from './Table';

      //Columns defines table headings and properties to be placed into the body
      let columns = [
      {
      heading: 'Name',
      property: 'name'
      },
      {
      heading: 'Age',
      property: 'age'
      },
      {
      heading: 'Sex',
      property: 'sex'
      },
      {
      heading: 'Breed',
      property: 'breed'
      },
      ]

      //Data is the array of objects to be placed into the table
      let data = [
      {
      name: 'Sabrina',
      age: '6',
      sex: 'Female',
      breed: 'Staffordshire'
      },
      {
      name: 'Max',
      age: '2',
      sex: 'Male',
      breed: 'Boxer'
      }
      ]

      class App extends Component {

      render() {
      return (
      <>
      <Table
      columns={columns}
      data={data}
      propertyAsKey='name' //The data property to be used as a key
      />
      </>
      );
      }
      }

      export default App;


      Table.js



      import React, { Component } from 'react';

      class Table extends Component {

      buildTable = (columns, data, key) => {
      let headerRow = ;
      let dataRows = ;

      //Build the table header
      columns.forEach (col => {
      headerRow.push(
      <th key={`header-${col.heading}`}>{col.heading}</th>
      );
      });

      //Build the rows
      data.forEach(item => {
      let dataCells = ;

      //Build cells for this row
      columns.forEach (col => {
      dataCells.push(
      <td key={`${item[key]}-${col.property}`}>{item[col.property]}</td>
      );
      });

      //Push out row
      dataRows.push(
      <tr key={`${item[key]}-row`}>{dataCells}</tr>
      )
      });

      return(
      <>
      <thead>
      <tr>{headerRow}</tr>
      </thead>
      <tbody>
      {dataRows}
      </tbody>
      </>
      );
      };

      render() {
      const {
      columns,
      data,
      propertyAsKey
      } = this.props;

      return (
      <table className='table'>
      {this.buildTable(columns, data, propertyAsKey)}
      </table>
      );
      }
      }

      export default Table;









      share|improve this question









      New contributor




      Nate Thompson is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.







      $endgroup$




      I have a React component here that generates a table based on an array of objects, which gets populated with data in an object.



      I'm trying to learn all I can about React.js / JavaScript. Could anyone with more experience in this area show me a way to simply the code that I have here? Or if there is any other 'fancy' ways of doing what is being done in the code?



      App.js



      import React, { Component } from 'react';
      import Table from './Table';

      //Columns defines table headings and properties to be placed into the body
      let columns = [
      {
      heading: 'Name',
      property: 'name'
      },
      {
      heading: 'Age',
      property: 'age'
      },
      {
      heading: 'Sex',
      property: 'sex'
      },
      {
      heading: 'Breed',
      property: 'breed'
      },
      ]

      //Data is the array of objects to be placed into the table
      let data = [
      {
      name: 'Sabrina',
      age: '6',
      sex: 'Female',
      breed: 'Staffordshire'
      },
      {
      name: 'Max',
      age: '2',
      sex: 'Male',
      breed: 'Boxer'
      }
      ]

      class App extends Component {

      render() {
      return (
      <>
      <Table
      columns={columns}
      data={data}
      propertyAsKey='name' //The data property to be used as a key
      />
      </>
      );
      }
      }

      export default App;


      Table.js



      import React, { Component } from 'react';

      class Table extends Component {

      buildTable = (columns, data, key) => {
      let headerRow = ;
      let dataRows = ;

      //Build the table header
      columns.forEach (col => {
      headerRow.push(
      <th key={`header-${col.heading}`}>{col.heading}</th>
      );
      });

      //Build the rows
      data.forEach(item => {
      let dataCells = ;

      //Build cells for this row
      columns.forEach (col => {
      dataCells.push(
      <td key={`${item[key]}-${col.property}`}>{item[col.property]}</td>
      );
      });

      //Push out row
      dataRows.push(
      <tr key={`${item[key]}-row`}>{dataCells}</tr>
      )
      });

      return(
      <>
      <thead>
      <tr>{headerRow}</tr>
      </thead>
      <tbody>
      {dataRows}
      </tbody>
      </>
      );
      };

      render() {
      const {
      columns,
      data,
      propertyAsKey
      } = this.props;

      return (
      <table className='table'>
      {this.buildTable(columns, data, propertyAsKey)}
      </table>
      );
      }
      }

      export default Table;






      javascript react.js






      share|improve this question









      New contributor




      Nate Thompson is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.











      share|improve this question









      New contributor




      Nate Thompson is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      share|improve this question




      share|improve this question








      edited 14 mins ago









      Jamal

      30.3k11116226




      30.3k11116226






      New contributor




      Nate Thompson is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      asked 2 hours ago









      Nate ThompsonNate Thompson

      1




      1




      New contributor




      Nate Thompson is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.





      New contributor





      Nate Thompson is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.






      Nate Thompson is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.






















          0






          active

          oldest

          votes











          Your Answer





          StackExchange.ifUsing("editor", function () {
          return StackExchange.using("mathjaxEditing", function () {
          StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix) {
          StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
          });
          });
          }, "mathjax-editing");

          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "196"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: false,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: null,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });






          Nate Thompson is a new contributor. Be nice, and check out our Code of Conduct.










          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f212250%2fgenerating-a-table-based-on-an-array-of-objects%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          0






          active

          oldest

          votes








          0






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          Nate Thompson is a new contributor. Be nice, and check out our Code of Conduct.










          draft saved

          draft discarded


















          Nate Thompson is a new contributor. Be nice, and check out our Code of Conduct.













          Nate Thompson is a new contributor. Be nice, and check out our Code of Conduct.












          Nate Thompson is a new contributor. Be nice, and check out our Code of Conduct.
















          Thanks for contributing an answer to Code Review Stack Exchange!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          Use MathJax to format equations. MathJax reference.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f212250%2fgenerating-a-table-based-on-an-array-of-objects%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          How to make a Squid Proxy server?

          Is this a new Fibonacci Identity?

          19世紀