How to display json data in a reactjs component

Question

I'm new to react. I dont know how to import json data in one of my component.

This is my json data:

[
    {
        "id": 1,
        "firstname": "abc",
        "lastname": "xyz",
        "phone": "+91 789654123",
        "email": "[email protected]"
    },
    {
        "id": 2,
        "firstname": "def",
        "lastname": "uvz",
        "phone": "+91 123456987",
        "email": "[email protected]"
    }
]

Here is list Component :

<Container>
  <Grid>
    <Grid.Row>
      <Grid.Column>
        <Header>List</Header>
        <List>
          <List.Item block>
            <List.Content>FirstName and Last Name</List.Content>
            <List.Content>Phone</List.Content>
          </List.Item>
        </List>
      </Grid.Column>
    </Grid.Row>
  </Grid>
</Container>

Can anyone help me in displaying the list? Thanks in advance

Answer 1

You can import contacts from your data.json, and use the map() to iterate and display contacts.

import React, { Component } from "react";
import { Container, Grid, Header, List } from "semantic-ui-react";
import contacts from './data.json';

class App extends Component {

  render() {
    return (
      <Container>
        <Grid>
          <Grid.Row>
            <Grid.Column>
              <Header>List</Header>
              <List>
                {contacts.map(el => {
                  return (
                    <List.Item  key={el.id}>
                      <List.Content>
                        {el.firstname} {el.lastname}
                      </List.Content>
                      <List.Content>{el.phone}</List.Content>
                    </List.Item>
                  );
                })}
              </List>
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </Container>
    );
  }
}

export default App;

Playground:

https://codesandbox.io/s/so-semantic-ui-jfobr

But I think using Table component from semantic-ui-react would be a better for this.

import React, { Component } from "react";
import {  Table } from "semantic-ui-react";
import contacts from './data.json';

class App extends Component {

  render() {
    return (
      <Table singleLine>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell>Id</Table.HeaderCell>
            <Table.HeaderCell>Fullname</Table.HeaderCell>
            <Table.HeaderCell>Phone</Table.HeaderCell>
            <Table.HeaderCell>Email</Table.HeaderCell>
          </Table.Row>
        </Table.Header>

        <Table.Body>
          {contacts.map(el => {
            return (
              <Table.Row key={el.id}>
                <Table.Cell>{el.id}</Table.Cell>
                <Table.Cell>
                  {el.firstname} {el.lastname}
                </Table.Cell>
                <Table.Cell>{el.phone}</Table.Cell>
                <Table.Cell>{el.email}</Table.Cell>
              </Table.Row>
            );
          })}
        </Table.Body>
      </Table>
    );
  }
}

export default App;

Playground for Table version:

https://codesandbox.io/s/so-semantic-ui-28rq9

Docs:

https://reactjs.org/docs/lists-and-keys.html

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Answer 2

If you want to import that data to your component from another file you can basically export the object where the data exists.

data.js

export default [
    {
        "id": 1,
        "firstName": "abc",
        "lastName": "xyz",
    },

    {
        "id": 2,
        "firstName": "def",
        "lastName": "uvz",
    }
]

In your react component you can then import your json data by doing

import data from './data.js'

You will need to iterate over your json data to pass necessary information to your component

{data.map(person => {
   return (
    <List.Item block key={person.id}>
       <List.Content>
         {person.firstName} and {person.lastName} 
       </List.Content>
     <List.Content>{person.phone}</List.Content>
    </List.Item>
   )
})}

Heads up! List elements need a key property as well otherwise react wil throw an error

This will create a List.Item component for each data entry you have regarding the people and then by accessing the firstName, lastName, phoneon person object you will be able to pass that data to your component.

Example

https://codesandbox.io/s/angry-chebyshev-djxq0?fontsize=14