CODEWITHSUNDEEP
jsonreactjs
PremKumar
PremKumar

Reputation: 1354

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

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. Output

Upvotes: 0

Views: 40

Answers (1)

amoghesturi
amoghesturi

Reputation: 248

<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>

Upvotes: 1

Related Questions