How do I display data from JSON into a table in Reactjs

Question

I have JSON structure like below:

const villages = 
{
"lossesOccured":
    [
        {
            "type": "destroyed",
            "affectedOn": "humans",
            "quantity": 120,
            "reliefFund": 100000,
            "location": {
                "district": "thanjavur",
                "villageName": "madukkur",
                "pincode": "614903"
            }
        },
        {
            "type": "physicalDamage",
            "affectedOn": "humans",
            "quantity": 250,
            "reliefFund": 50000,
            "location": {
                "district": "thanjavur",
                "villageName": "madukkur",
                "pincode": "614903"
            }
        },
    ]
}

I need help in displaying the JSON data in the form of table like below Using React. Also, need the table row to be added automatically whenever a new element is added in JSON.

amoghesturi · Accepted Answer · 2018-12-04 08:56:03Z

1

<table>
  <thead>
    <tr>
      <th>AffectedOn</th>
      <th>Type</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    {
      villages.lossesOccured.map(loss => (
        <tr>
          <td>{loss.affectedOn}</td>
          <td>{loss.type}</td>
          <td>{loss.quantity}</td>
        </tr>
      )
     }
  </tbody>
</table>

answered Dec 4, 2018 at 8:56

amoghesturi

2481 gold badge3 silver badges15 bronze badges

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

1 Comment

PremKumar Over a year ago

Great. Thank you :)

Collectives™ on Stack Overflow

How do I display data from JSON into a table in Reactjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related