प्रतिक्रिया में JSON फ़ाइल आयात करें

Question

मैं रिएक्ट करने के लिए नया हूं और मैं DATAएक बाहरी फ़ाइल से JSON चर आयात करने की कोशिश कर रहा हूं । मुझे निम्न त्रुटि मिल रही है:

मॉड्यूल नहीं ढूँढ सकता "./customData.json"

क्या कोई मेरी मदद कर सकता है? यह काम करता है अगर मेरे पास मेरा DATAवैरिएबल है index.jsलेकिन तब नहीं जब यह बाहरी JSON फाइल में हो।

index.js

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import customData from './customData.json';
import Profile from './components/profile';
import Hobbies from './components/hobbies';

class App extends Component {
  render() {
    return (
      <div>
        <Profile name={this.props.profileData.name}imgUrl={this.props.profileData.imgURL} />
        <Hobbies hobbyList={this.props.profileData.hobbyList}/>
      </div>
    );
  }
}

ReactDOM.render(<App profileData={DATA}/>, document.querySelector('.container'));

hobbies.js

import React, {Component} from 'react';

var Hobbies = React.createClass({
  render: function(){
    var hobbies = this.props.hobbyList.map(function(hobby, index){
        return (<li key={index}>{hobby}</li>);
    });
    return (
        <div>
            <h5>My hobbies:</h5>
            <ul>
                {hobbies}
            </ul>
        </div>
    );
  } 
});

export default Hobbies;

profile.js

import React from 'react';

var Profile = React.createClass({
render: function(){
    return (
        <div>
            <h3>{this.props.name}</h3>
            <img src={this.props.imgUrl} />
        </div>
    )
  }
});

export default Profile

customData.json

var DATA = {    
    name: 'John Smith',
    imgURL: 'http://lorempixel.com/100/100/',
    hobbyList: ['coding', 'writing', 'skiing']
}

export default DATA

Answer 1

json-loaderमॉड्यूल का उपयोग करने के लिए एक अच्छा तरीका है (एक नकली .js एक्सटेंशन जो कोड के लिए नहीं है डेटा और कॉन्फ़िगरेशन के बिना) है । यदि आपने create-react-appअपनी परियोजना को आगे बढ़ाने के लिए उपयोग किया है, तो मॉड्यूल पहले से ही शामिल है, आपको बस अपना जसन आयात करने की आवश्यकता है:

import Profile from './components/profile';

यह उत्तर अधिक समझाता है।

Comments

अजीब। जब मैं एक json फ़ाइल को आयात करने की कोशिश करता हूं create-react-app, तो यह वापस आ जाती हैundefined

— developarvin

IMHO, यह अन्य उत्तर वास्तव में स्वीकृत उत्तर होना चाहिए। यह वास्तव में एक समाधान है, लेकिन केवल रिएक्ट ऐप्स के सबसेट के लिए - केवल लोगों ने क्रिएट-रिएक्शन-ऐप के साथ शुरू किया।

— एसईबी

Answer 2

इस पुराने चेस्टनट ...

संक्षेप में, आपको आवश्यकता का उपयोग करना चाहिए और नोड को आवश्यकता कॉल के भाग के रूप में पार्सिंग को संभालना चाहिए, इसे किसी तीसरे पक्ष के मॉड्यूल को आउटसोर्सिंग नहीं करना चाहिए। आपको यह भी ध्यान रखना चाहिए कि आपके कॉन्फ़िगरेशन बुलेटप्रूफ हैं, जिसका अर्थ है कि आपको लौटाए गए डेटा को ध्यान से जांचना चाहिए।

लेकिन संक्षिप्तता के लिए, निम्नलिखित उदाहरण पर विचार करें:

उदाहरण के लिए, मान लें कि मेरे पास अपने एप्लिकेशन की जड़ में एक कॉन्‍फ़िगर फ़ाइल 'admins.json' है:

admins.json

[{
  "userName": "tech1337",
  "passSalted": "xxxxxxxxxxxx"
}]

उद्धृत कुंजियों पर ध्यान दें "userName",, "passSalted"!

मैं निम्नलिखित कर सकता हूं और डेटा को आसानी से फ़ाइल से बाहर निकाल सकता हूं।

let admins = require('~/app/admins.json');
console.log(admins[0].userName);

अब डेटा अंदर है और एक नियमित (या सरणी) ऑब्जेक्ट के रूप में उपयोग किया जा सकता है।

Comments

निश्चित रूप से सही उत्तर। JSON डेटा में पढ़ने के लिए किसी तृतीय-पक्ष मॉड्यूल की आवश्यकता नहीं होनी चाहिए।

— ngoue

JSON को ठीक से स्वरूपित करने के लिए कुंजियों के आसपास दोहरे उद्धरण चिह्नों की आवश्यकता होती है। इसके अलावा, JSON में टिप्पणियां नहीं हो सकती हैं।

— लेट मी टिंक इट अबाउट

Answer 3

सरलतम दृष्टिकोण निम्नलिखित है

// Save this as someJson.js
const someJson = {
  name: 'Name',
  age: 20
}

export default someJson

फिर

import someJson from './someJson'

Answer 4

json-loaderस्थापित के साथ , आप उपयोग कर सकते हैं

import customData from '../customData.json';

या, और भी अधिक बस

import customData from '../customData';

स्थापित करने के लिए json-loader

npm install --save-dev json-loader

Answer 5

कृपया अपनी JSON फ़ाइल को .js एक्सटेंशन के साथ संग्रहीत करें और सुनिश्चित करें कि आपका JSON एक ही निर्देशिका में होना चाहिए।

Comments

हल किया !! जवाब के लिए धन्यवाद !!

— ह्यूगो सेलेरो

Answer 6

मेरे लिए काम करने वाला समाधान यह है कि: - मैंने अपने डेटा.जॉन फ़ाइल को src से सार्वजनिक निर्देशिका में स्थानांतरित कर दिया। फिर फ़ाइल लाने के लिए API का उपयोग किया

fetch('./data.json').then(response => {
      console.log(response);
      return response.json();
    }).then(data => {
      // Work with JSON data here
      console.log(data);
    }).catch(err => {
      // Do something for an error here
      console.log("Error Reading data " + err);
    });

समस्या यह थी कि प्रतिक्रिया ऐप संकलित करने के बाद URL " http: // localhost: 3000 / data.json " पर फ़ाइल के लिए अनुरोध प्राप्त होता है, जो वास्तव में मेरी प्रतिक्रिया ऐप की सार्वजनिक निर्देशिका है। लेकिन दुर्भाग्यवश, एप्लिकेशन डेटा को संकलित करते समय। sson फ़ाइल को src से सार्वजनिक निर्देशिका में स्थानांतरित नहीं किया जाता है। इसलिए हमें src से सार्वजनिक निर्देशिका में data.json फ़ाइल को स्पष्ट रूप से स्थानांतरित करना होगा।

Answer 7

export default DATAया के साथ प्रयास करेंmodule.exports = DATA

Comments

क्या आपने आयात के बजाय आवश्यकता के साथ प्रयास किया है? लेकिन मुझे पूरा यकीन है कि यह समस्या नहीं है, रास्ता सही है? ओह और कोशिश करें कि customData के बजाय आयात DATA भी लिखें।

— साल्वेटोर

Answer 8

// .json फ़ाइल को .js में नाम बदलें और src फ़ोल्डर में रखें

एक चर के रूप में json वस्तु की घोषणा करें

var customData = {
   "key":"value"
};

मॉड्यूल.एक्सपोर्ट का उपयोग करके इसे निर्यात करें

module.exports = customData;

उस घटक से जिसे इसकी आवश्यकता है, दो फ़ोल्डरों को गहराई से बैक करना सुनिश्चित करें

import customData from '../customData';

Answer 9

किसी भी तृतीय-पक्ष कोड या लाइब्रेरी (अनुशंसित तरीका) का उपयोग किए बिना ऐसा करने के कई तरीके हैं।

1 स्टेटिक रास्ता: एक .json फ़ाइल बनाएं और फिर इसे अपनी प्रतिक्रिया घटक उदाहरण में आयात करें

मेरा फ़ाइल नाम "example.json" है

{"example" : "my text"}

example.json के अंदर उदाहरण कुंजी कुछ भी हो सकता है, भविष्य के मुद्दों को रोकने के लिए दोहरे उद्धरण चिह्नों का उपयोग करने के लिए कुछ भी ध्यान में रखें।

प्रतिक्रिया घटक में आयात कैसे करें

import myJson from "jsonlocation";

और आप इसे इस तरह से कहीं भी उपयोग कर सकते हैं

myJson.example

अब कुछ बातों पर विचार करना होगा। इस पद्धति के साथ, आप पृष्ठ के शीर्ष पर अपने आयात को घोषित करने के लिए मजबूर होते हैं और गतिशील रूप से कुछ भी आयात नहीं कर सकते।

अब, यदि हम JSON डेटा को गतिशील रूप से आयात करना चाहते हैं तो क्या होगा? एक बहु-भाषा समर्थन वेबसाइट का उदाहरण दें?

2 डायनामिक रास्ता

1 अपनी JSON फाइल को बिल्कुल मेरे उदाहरण के ऊपर घोषित करें

लेकिन इस बार हम डेटा को अलग तरह से आयात कर रहे हैं।

let language = require('./en.json');

यह उसी तरह एक्सेस कर सकता है।

लेकिन प्रतीक्षा करें कि गतिशील भार कहां है?

यहाँ जानसन को गतिशील रूप से कैसे लोड किया जाए

let language = require(`./${variable}.json`);

अब सुनिश्चित करें कि आपकी सभी JSON फाइलें एक ही डायरेक्टरी में हैं

यहां आप JSON का उसी तरह उपयोग कर सकते हैं जैसे पहले उदाहरण में

myJson.example

किया बदल गया? जिस तरह से हम आयात करते हैं क्योंकि यह एकमात्र ऐसी चीज है जिसकी हमें वास्तव में आवश्यकता है।

आशा है कि ये आपकी मदद करेगा।

Answer 10

इसमें अच्छा काम किया React 16.11.0

// in customData.js
export const customData = {
  //json data here
  name: 'John Smith',
  imgURL: 'http://lorempixel.com/100/100/',
  hobbyList: ['coding', 'writing', 'skiing']
}

// in index.js
import { customData } from './customData';

// example usage later in index.js
<p>{customData.name}</p>

Answer 11

var langs={
  ar_AR:require('./locale/ar_AR.json'),
  cs_CZ:require('./locale/cs_CZ.json'),
  de_DE:require('./locale/de_DE.json'),
  el_GR:require('./locale/el_GR.json'),
  en_GB:require('./locale/en_GB.json'),
  es_ES:require('./locale/es_ES.json'),
  fr_FR:require('./locale/fr_FR.json'),
  hu_HU:require('./locale/hu_HU.json')
}
module.exports=langs;

अपने मॉड्यूल में इसकी आवश्यकता है:

let langs=require('./languages');

सादर