• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

140
Views
Render JSON in a HTML table in react js

I'm writing a code in react, where in I want to display the json data in HTML table. I want this to be dynamic. i.e. irrespective of the type of json data I'm using, it should render in tabular format.

Here is my code with sample data.

const jsArray =  [{"Model":"Mazda RX4","mpg":21,"cyl":6},{"Model":"Mazda RX4 Wag","mpg":21,"cyl":6},{"Model":"Datsun 710","mpg":22.8,"cyl":""},{"Model":"Hornet 4 Drive","mpg":21.4,"cyl":""},{"Model":"Hornet Sportabout","mpg":18.7,"cyl":8},{"Model":"Valiant","mpg":18.1,"cyl":6}];

 {jsArray.length > 0 && (
        <table>
          <thead>
            {jsArray.map((item, idx) =>
              idx === 0 ? (
                <th key={idx}>
                  {Object.values(item).forEach((val) => (
                    <td>{val}</td>
                  ))}
                </th>
              ) : (
                <tr key={idx}>
                  {Object.values(item).forEach((val) => (
                    <td>{val}</td>
                  ))}
                </tr>
              )
            )}
          </thead>
        </table>
      )}

When I run this code, nothing is getting rendered. When I replace <tr key={idx}>{Object.values(item).forEach((val)=> (<td>{val}</td>))}</tr> with null, In my output I see null printed in my front end. Please let me know where I'm going wrong.

about 3 years ago · Santiago Gelvez
2 answers
Answer question

0

You can do it like this:

  const data = JSON.parse(jsArray);
  const keys = Object.keys(data.length ? data[0] : {});
  return (
    <div className="App">
      {jsArray.length > 0 && (
        <table>
         <thead>
            <tr>
              {keys.map((item, idx) => (
                <th key={idx}>{item}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {data.map((item, idx) => (
              <tr key={idx}>
                {keys.map((key, idx) => (
                  <td>{item[key]}</td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
about 3 years ago · Santiago Gelvez Report

0

It might make it easier if you broke all that logic down into more helpful functions.

  1. getHeadings maps over the first object and grabs its keys.

  2. getRows maps over all the data, and calls getCells with each object's data.

  3. getCells maps over the object and uses Object.values to get the information for each cell.

This way your component is a lot cleaner.

// `map` over the first object in the array
// and get an array of keys and add them
// to TH elements
function getHeadings(data) {
  return Object.keys(data[0]).map(key => {
    return <th>{key}</th>;
  });
}

// `map` over the data to return
// row data, passing in each mapped object
// to `getCells`
function getRows(data) {
  return data.map(obj => {
    return <tr>{getCells(obj)}</tr>;
  });
}

// Return an array of cell data using the
// values of each object
function getCells(obj) {
  return Object.values(obj).map(value => {
    return <td>{value}</td>;
  });
}

// Simple component that gets the
// headers and then the rows
function Example({ data }) {
  return (
    <table>
      <thead>{getHeadings(data)}</thead>
      <tbody>{getRows(data)}</tbody>
    </table>
  );
}

const data = [{"Model":"Mazda RX4","mpg":21,"cyl":6},{"Model":"Mazda RX4 Wag","mpg":21,"cyl":6},{"Model":"Datsun 710","mpg":22.8,"cyl":""},{"Model":"Hornet 4 Drive","mpg":21.4,"cyl":""},{"Model":"Hornet Sportabout","mpg":18.7,"cyl":8},{"Model":"Valiant","mpg":18.1,"cyl":6}];

ReactDOM.render(
  <Example data={data} />,
  document.getElementById('react')
);
table { border: 1px solid #dfdfdf; border-collapse: collapse; }
th { background-color: #efefef; text-align: left; text-transform: uppercase; }
td { border: 1px solid #efefef; }
td, th { padding: 0.4em; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

about 3 years ago · Santiago Gelvez Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error