Réagir - charger toutes les données json dans le composant
Je suis à l'aide de Réagir et d'essayer de charger des données dans mon composant à partir d'un local de fichier json. Je suis en train d'imprimer toutes les informations, y compris le nom en un nom:valeur (et pas seulement de la valeur) pour la faire ressembler à une forme.
Je suis à la recherche de la meilleure façon de le faire. Ai-je besoin pour analyser? Dois-je utiliser une carte de fonction? Je suis nouveau à Réagir, de façon veuillez me montrer solution avec le code. J'ai vu d'autres des questions comme ça, mais ils comprennent un grand nombre d'autres codes que je ne pense pas que j'ai besoin.
Exemple de mon 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 à partir de json et le code à l'intérieur de composant qui affiche TOUS les champs.
- Vous devez inclure plus d'infos. D'où voulez-vous obtenir ce
json
? À partir d'un fichier local? De asynchro requête http? Vous voulez afficher des clés ou des valeurs? Ou les deux? - Je veux obtenir json à partir d'un fichier local et je veux afficher les touches du clavier et valeurs de
- "importer à partir de json" avez-vous des fichiers statiques disponibles au moment de la compilation? Si oui et que vous utilisez webpack 2
import json from './path/to/file.json'
suffirait. Pour webpack 1 vous aurez besoin d'inclurejson-loader
pour*.json
types de fichiers. - Comme des "affiche TOUS les champs" - c'est trop large. Afficher comment?
<pre>{JSON.stringify(json, null, 2)}</pre>
est-elle suffisante?
Vous devez vous connecter pour publier un commentaire.
Si votre json est stocké localement, vous n'avez pas à utiliser n'importe quelle bibliothèque pour l'obtenir. Juste importer.
La première question importante à prendre en compte est la façon dont vous voulez obtenir ce JSON, si j'ai bien compris votre problème, très bien c'est un fichier JSON. Si vous avez besoin d'exécuter un serveur local à l'intérieur de votre application pour obtenir ces valeurs.
Je recommanderais le live-serveur, fabriqué en node.js.
Après cela, vous pouvez utiliser axios à récupérer les données et puis ...
J'ai déjà mis une console.le journal avant de le rendre à montrer votre objet, et après que faire ce que vous voulez!
Utilisation de JSON.parse(json)
Exemple:
Salut la meilleure solution pour cela est d'utiliser Axios.
https://github.com/mzabriskie/axios
Essayez de regarder leur API très simple.
Et oui, vous pourriez avoir besoin d'une carte de la fonction de boucle de l'analyse des données.
J'ai un exemple de code ici, que j'ai utilisé Axios.
demande est l'endroit où vous obtenez votre analysé des données. Aller de l'avant et de jouer avec elle
Heres un autre exemple d'utilisation ES5
par l'aide de la 2e. vous avez stocké les stocks comme un état dans ici. analyser l'état que des morceaux de données.
http://api.jsonurl&appid=${api_key}
; à". /fichier.json"