web-dev-qa-db-fra.com

Comment afficher les données json dans un composant reactjs

Je suis nouveau pour réagir. Je ne sais pas comment importer des données json dans l'un de mes composants.

Voici mes données json:

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

Voici la liste des composants:

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

Quelqu'un peut-il m'aider à afficher la liste? Merci d'avance

reactjssemantic-ui-react
3
Sanjana

Si vous souhaitez importer ces données dans votre composant à partir d'un autre fichier, vous pouvez essentiellement exporter l'objet où les données existent.

data.js

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

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

Dans votre composant React, vous pouvez ensuite importer vos données JSON en faisant

import data from './data.js'

Vous devrez parcourir vos données json pour transmettre les informations nécessaires à votre composant

{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>
   )
})}

Attention! Les éléments de la liste ont également besoin d'une propriété de clé, sinon réagir réagirait avec une erreur

Cela va créer un List.Item composant pour chaque entrée de données que vous avez concernant les personnes, puis en accédant aux objets firstName, lastName, phone sur une personne, vous pourrez transmettre ces données à votre composant.

Exemple

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

1
Ozan
constructor(props) {
super(props);
this.state = {
  loadedList: [],
  lists: [],
};
  }

componentDidMount() {
  
  // after 3001/ write your .json file directory
  
  axios.get('http://localhost:3001/../static/data/terrifdata.json')
      .then(response => {
       this.setState({
         lists: response.data,
         loadedList: response.data,
         isLoading: false
        })
    })
 }

<div>
{loadedList.map((postDetail, index) => {
                    return (
                  <h5>
                     {postDetail.name}
                  </h5>
                  )}
               }
</div>
0
Khadim Rana

Il existe plusieurs façons d'importer des données JSON dans un composant React:

  1. Utiliser les importations et exportations ES6
  2. Ajoutez les données JSON dans un fichier de votre dossier public, en supposant que vous avez initialisé votre projet avec Create React App, puis récupérez lesdites données dans votre méthode componentDidMount() , et enfin ajoutez les données extraites à l'état de votre composant.
  3. Si les données sont statiques, vous pouvez simplement les ajouter à l'état de votre composant lorsque vous initialisez votre composant.

Implémentation 1:

Ajoutez vos données JSON dans un fichier, par exemple People.js:

const peopleData = [
    {
        "id": 1,
        "firstname": "abc",
        "lastname": "xyz",
        "phone": "+91 789654123",
        "email": "[email protected]"
    },

    {
        "id": 2,
        "firstname": "def",
        "lastname": "uvz",
        "phone": "+91 123456987",
        "email": "[email protected]"
    }
];

export default peopleData;

Ensuite, dans votre composant, importez-le comme ceci:

// myPeopleData will contain your json data
import myPeopleData  from '<Relative_Path>/People.js';

Pour plus d'informations sur les importations et les exportations ES6, consultez cet excellent cheatsheet .

Implémentation 2:

  1. Ajoutez un fichier dans votre répertoire public contenant vos données JSON, supposons qu'il s'appelle people.json
  2. Dans votre composant, ajoutez la méthode de cycle de vie componentDidMount() puis récupérez vos données.
  3. Ajoutez vos données récupérées à l'état de votre composant.

Votre composant pourrait ressembler à quelque chose comme:

import React, { Component } from "react";
import { Container, Grid, Header, List } from "semantic-ui-react";

class MyComponent extends Component {
  state = {
    peopleData: []
  };

  componentDidMount() {
      fetch('./people.json')
        .then(response => response.json())
        .then(data => this.setState({ peopleData: data }));
  }

  render() {
    ...
  }
}

export default MyComponent;

Enfin, Implémentation 3 :

Dans votre composant, ajoutez simplement vos données dans le cadre de son état par défaut:

import React, { Component } from "react";
import { Container, Grid, Header, List } from "semantic-ui-react";

class MyComponent extends Component {
  state = {
    peopleData: [
      {
        "id": 1,
        "firstname": "abc",
        "lastname": "xyz",
        "phone": "+91 789654123",
        "email": "[email protected]"
      },
      {
        "id": 2,
        "firstname": "def",
        "lastname": "uvz",
        "phone": "+91 123456987",
        "email": "[email protected]"
      }
    ]
  };

  render() {
    ...
  }
}

export default MyComponent;

Quelle que soit l'approche que vous adoptez pour importer vos données JSON, vous devrez mapper via votre tableau résultant dans votre méthode render(). Pour plus d'informations sur la méthode Array.protoype.map(), consultez les MDN documentation ainsi que React's Documentation pour le mappage à travers les listes et le rendu des éléments de liste. Les deux sont des ressources fantastiques.

J'espère que cela aide!

0
Nathan