web-dev-qa-db-fra.com

React - Charge toutes les données de Json dans le composant

J'utilise React et j'essaie de charger des données dans mon composant à partir d'un fichier JSON local. J'essaie d'imprimer toutes les informations, y compris le 'nom' dans un nom: paire de valeurs (pas seulement la valeur) pour la faire ressembler à un formulaire. 

Je cherche le meilleur moyen de le faire. Dois-je analyser? Dois-je utiliser une fonction de carte? Je suis nouveau dans React alors montrez-moi s'il vous plaît la solution avec le code. J'ai vu d'autres questions similaires à celle-ci, mais elles incluent beaucoup d'autres codes dont je ne pense pas avoir besoin. 

Exemple de code: Test.json

"person": {
  "name": John,

  "lastname": Doe,
  "interests": [
    "hiking",
    "skiing"
  ],
  "age": 40
}

test.js

import React, {Component} from 'react';

class Test extends Component {
    render () {
      return (

           ) 
      }
};

export default Test;

J'ai besoin d'un code qui me permet d'importer depuis json et d'un code dans un composant qui affiche TOUS les champs. 

javascriptjsonreactjsparsing
3
ChloeH

La première question importante à prendre en compte est de savoir comment vous souhaitez obtenir ce JSON. Si j'ai bien compris votre problème, il s'agit d'un fichier JSON local. Vous devez donc exécuter un serveur local dans votre application pour obtenir ces valeurs.

Je recommanderais le live-server , fabriqué dans node.js.

Après cela, vous pouvez utiliser axios to extraire des données puis ...

import React, {Component} from 'react';
import axios from 'axios';

constructor (props) {
   this.state = {
         items: [],
   }
   axios.get('http://localhost:8080/your/dir/test.json') 
    .then(res => {
        this.setState({ items: res.data });  
   });
}
class Test extends Component {
    console.log(this.state.items);
    render () {
      return (

           ) 
      }
};

export default Test;

J'ai déjà mis un fichier console.log avant le rendu pour afficher votre objet, puis faites ce que vous voulez!

6
Yuri Ramos

Si votre json est stocké localement, vous n’avez pas besoin d’utiliser une bibliothèque pour l’obtenir. Importez-le simplement.

import React, {Component} from 'react';
import test from 'test.json';

class Test extends Component {
  render () {
    const elem = test.person;
    return (
     <ul>
       {Object.keys(elem).map((v, i) => <li key={i}>{v} {test[v]}</li> )}
     </ul>
    )
  }
};

export default Test;
6
kind user

Utilisez JSON.parse ( json ) Exemple:

JSON.parse(`{"person": {
    "name": "John",

    "lastname": "Doe",
    "interests": [
        "hiking",
        "skiing"
    ],
    "age": 40
}}`);
1
JakeBoggs

Bonjour, la meilleure solution consiste à utiliser Axios. 

https://github.com/mzabriskie/axios

Essayez de regarder leur API, c'est très simple. 

Et oui, vous aurez peut-être besoin d'une fonction de carte pour boucler les données analysées. 

J'ai un exemple de code ici, que j'ai utilisé Axios.

import axios from 'axios';
const api_key = 'asda99';
const root_url = `http://api.jsonurl&appid=${api_key}`;

export function fetchData(city) {    //export default???
  const url = `${root_url}&q=${city},us`;
  const request = axios.get(url);
}

la demande est l'endroit où vous obtenez vos données analysées. Allez-y et jouez avec

Voici un autre exemple utilisant ES5 

componentDidMount: function() {
    var self = this;

    this.serverRequest =
      axios
        .get("http://localhost:8080/api/stocks")
        .then(function(result) {
          self.setState({
            stocks: result.data
          });
        })

  },

en utilisant le 2ème. vous avez stocké les stocks comme un état ici. analyser l'état en tant que morceaux de données.

0
Yuhao