Il y a json dans le projet qui contient les données que j'ai besoin d'afficher dans le composant. Comment accéder correctement au fichier json dans react et sortir les données de json?

Data.json

{
  "dictionary": [
    {
      "index": "1",
      "engwords": "Hello",
      "ruswords": "Привет"
    },
    {
      "index": "2",
      "engwords": "How are you?",
      "ruswords": "Как твои дела?"
    },
    {
      "index": "3",
      "engwords": "How old are you?",
      "ruswords": "Сколько тебе лет?"
    }
  ]
}

Component.js

import React, {Component} from "react";
import "./style.scss";
const dictionary = require ('./../../dictionary/dictionary.json');

export default class Test extends Component {
    render() {
        return (
            <div className="test">
                {dictionary.map(elem => (
                    <p>{elem}</p>))}
            </div>
        );
    }
};
0
Aleksf 9 mai 2020 à 12:03

3 réponses

Meilleure réponse

Cela rend tout dans votre JSON

import React, {Component} from "react";
import "./style.scss";
const dictionaryFile = require ('./../../dictionary/dictionary.json');

export default class Test extends Component {
    render() {
        return (
            <div className="test">
                {dictionaryFile.dictionary.map(elem => (
                    <div>
                       <p>{elem.index}</p>
                       <p>{elem.engwords}</p>
                       <p>{elem.ruswords}</p>
                    </div>
                  ))
                }
            </div>
        );
    }
};
3
Andus 9 mai 2020 à 09:07

Toutes les clés et valeurs seront affichées

import React, {Component} from "react";

import "./style.scss";
const dictionaryFile = require ('./../../dictionary/dictionary.json');

export default class Test extends Component {
    render() {
        return (
            <div className="test">
                {dictionaryFile.dictionary.map(elem => (
                    <div>
                    {Object.keys(elem).forEach(function(key) {
                      <p>{key}: { elem[key]}</p>
                      });}
                    </div>
                  ))
                }
            </div>
        );
    }
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
0
Mohammad Ali Rony 9 mai 2020 à 09:12

La première chose est d'importer votre fichier JSON dans React. Le fichier est généralement stocké quelque part dans le dossier src. Vous il y a 2 options communes. La première consiste à utiliser json-loader ou deuxièmement, vous pouvez stocker votre fichier sous un fichier Javascript et exportez son contenu comme:

// Save this as yourFile.js
const dataFromFile = {
  "dictionary": [
    {
      "index": "1",
      "engwords": "Hello",
      "ruswords": "Привет"
    },
    {
      "index": "2",
      "engwords": "How are you?",
      "ruswords": "Как твои дела?"
    },
    {
      "index": "3",
      "engwords": "How old are you?",
      "ruswords": "Сколько тебе лет?"
    }
  ]
}

export default dataFromFile

Puis dans votre composant:

Importer des donnéesFromFile depuis '../src/dataFromFile';

Puis

  return (
      <div>
      {dataFromFile.dictionary.map(elem => (<p>{elem}</p>))}
      </div>
  )
0
Towerss 9 mai 2020 à 09:34