Looping through table data React JS

Question

How can I loop through local JSON data in React JS and return data within the td tags?

Example from JSON file:

[
{
    "organize": true,
    "sender": "Dach Group",
    "domain": "godfrey.name",
    "email": "[email protected]",
    "folder": "Business"
},
{
    "organize": true,
    "sender": "Bernhard and Sons",
    "domain": "torey.net",
    "email": "[email protected]",
    "folder": "Home"
},
{
}

console log is logging all the data so it is definitely grabbing and showing the data with the for loop.

 import React, { Component } from 'react';
 import './TableHeader.css';
 import localdata from './data';

class TableHeader extends Component {
   render() {

   for(var i = 0; i < localdata.length; i++) {
   var obj = localdata[i];

   console.log(obj.organize + ", " + obj.sender + ", " + obj.domain + ", " + obj.email + ", " + obj.folder);
   }

return (
  <div className="container">

    <table className="table">
      <thead>
        <tr>
            <th style={{height: '50px'}}>Organize</th>
            <th style={{height: '50px'}}>Sender</th>
            <th style={{height: '50px'}}>Domain</th>
            <th style={{height: '50px'}}>Email</th>
            <th style={{height: '50px'}}>Folder</th>
        </tr>
      </thead>

      <tbody>
        <tr>
            <td>
              <input type="checkbox" name="" value="" />
            </td>

            <td style={{backgroundColor: 'white'}}>
              {obj.sender}
            </td>


            <td style={{backgroundColor: 'white'}}>{obj.domain}</td>
            <td style={{backgroundColor: 'white'}}>{obj.email}</td>
            <td style={{backgroundColor: 'white'}} className="bordercolor">
              <select style={{height: '30px', width: '100%'}}>
                <option>Travel</option>
                <option>Shopping</option>
                <option>Finance</option>
              </select>
            </td>
        </tr>
      </tbody>

    </table>
  </div>
);
}
}

export default TableHeader;

Tyler · Accepted Answer · 2017-04-05 21:11:34Z

2

Using map is an efficient way to do this:

var tableData = localdata.map(function(obj) {
 return <tr><td>{obj.organizer}</td><td>{obj.sender}</td></tr>
}

Then in your render function

<tbody>
  {tableData}
</tbody>

Although, a cleaner implementation would be to pull the row into its own component that takes an object and returns a row, then your map would just have to pass the "obj" into that component and it would return the and populated 's.

edited Apr 5, 2017 at 21:11

answered Apr 5, 2017 at 21:02

Tyler

5875 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fabian Schultz Over a year ago

Why are you using a template string for the HTML markup? OP is using JSX.

noveyak · Accepted Answer · 2017-04-05 20:59:45Z

You should put your render logic in a loop as well. I made an example with your data

class HelloWorld extends React.Component {
  render() {
    const data = [
      {
          "organize": true,
          "sender": "Dach Group",
          "domain": "godfrey.name",
          "email": "[email protected]",
          "folder": "Business"
      },
      {
          "organize": true,
          "sender": "Bernhard and Sons",
          "domain": "torey.net",
          "email": "[email protected]",
          "folder": "Home"
      },
    ];

    return (
      <div>
         <table className="table">
          <thead>
            <tr>
                <th style={{height: '50px'}}>Organize</th>
                <th style={{height: '50px'}}>Sender</th>
                <th style={{height: '50px'}}>Domain</th>
                <th style={{height: '50px'}}>Email</th>
                <th style={{height: '50px'}}>Folder</th>
            </tr>
          </thead>
          <tbody>
            {data.map(obj => {
              return (
                <tr>
                  <td>
                    <input type="checkbox" name="" value="" />
                  </td>
                  <td style={{backgroundColor: 'white'}}>
                    {obj.sender}
                  </td>
                  <td style={{backgroundColor: 'white'}}>{obj.domain}</td>
                  <td style={{backgroundColor: 'white'}}>{obj.email}</td>
                  <td style={{backgroundColor: 'white'}} className="bordercolor">
                    <select style={{height: '30px', width: '100%'}}>
                      <option>Travel</option>
                      <option>Shopping</option>
                      <option>Finance</option>
                    </select>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    );
  }
}
ReactDOM.render(<HelloWorld />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

It says TypeError: data.map is not a function, any suggestions please

Irvin Lim · Accepted Answer · 2017-04-05 21:08:33Z

0

The problem is that your obj variable is locally scoped to the for loop, and hence when you try and access obj.domain for example in the JSX, obj resolves to undefined.

I suppose you want to display a new <tr> for each item in the JSON, which you can do with Javascript's .map:

<tbody>
  { localdata.map(obj => {
      return (
        <tr key={ obj.domain }>
          <td>{ obj.domain }</td>
        </tr>
       );
     }) 
  }
</tbody>

Note that without the key prop at the top-level React element in the mapped array, React will throw a warning that all items in an array must have unique keys.

Do read React's documentation on Lists and Keys to get used to the usage of map() which is widely used in React, as well as the significance of unique keys for each element.

I also recommend reading React.js and Dynamic Children - Why the Keys are Important, which showcases an example of hidden bugs which can arise when your use case gets more complicated.

answered Apr 5, 2017 at 21:08

Irvin Lim

2,4511 gold badge19 silver badges20 bronze badges

1 Comment

MarkM Over a year ago

Thanks for the help!

Collectives™ on Stack Overflow

Looping through table data React JS

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related