প্রতিক্রিয়াতে JSON ফাইল আমদানি করুন

Question

আমি প্রতিক্রিয়াতে নতুন এবং আমি DATAএকটি বাহ্যিক ফাইল থেকে একটি JSON পরিবর্তনশীল আমদানির চেষ্টা করছি । আমি নিম্নলিখিত ত্রুটি পাচ্ছি:

"। / কাস্টম ডেটা.জসন" মডিউলটি খুঁজে পাচ্ছেন না

কেউ আমাকে সাহায্য করতে পারে? এটিতে যদি আমার DATAভেরিয়েবলটি থাকে index.jsতবে এটি বাহ্যিক JSON ফাইলে থাকা অবস্থায় নয় works

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'));

শখ। 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;

প্রোফাইল.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

কাস্টমডাটা.জসন

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

export default DATA

Answer 1

একটি দুর্দান্ত উপায় (কোনও জাল .js এক্সটেনশন যোগ না করে যা কোডের জন্য ডেটা এবং কনফিগারেশনের জন্য নয়) json-loaderমডিউল ব্যবহার করা । আপনি যদি create-react-appনিজের প্রকল্পটিকে স্কলফোল্ড করতে ব্যবহার করেন তবে মডিউলটি ইতিমধ্যে অন্তর্ভুক্ত রয়েছে, আপনাকে কেবল আপনার জেসন আমদানি করতে হবে:

import Profile from './components/profile';

এই উত্তরটি আরও ব্যাখ্যা করে।

Comments

অদ্ভুত। আমি যখন create-react-appundefined

— কোনও জসন

আইএমএইচও, এই অন্য উত্তরটি সত্যই গ্রহণযোগ্য উত্তর হওয়া উচিত। এটি প্রকৃতপক্ষে একটি সমাধান তবে কেবল বিক্রিয়া অ্যাপ্লিকেশনগুলির একটি উপসেটের জন্য - কেবলমাত্র তৈরি-প্রতিক্রিয়া-অ্যাপ্লিকেশন দিয়ে শুরু করা হয়েছে।

— সেব

Answer 2

এই বুড়ো বাদাম ...

সংক্ষেপে, আপনার প্রয়োজনীয় কলের অংশ হিসাবে নোডকে পার্সিংটি হ্যান্ডেল ব্যবহার করতে দেওয়া উচিত, এটি কোনও তৃতীয় পক্ষের মডিউলে আউটসোর্সিং না করে। আপনার কনফিগারগুলি বুলেটপ্রুফ রয়েছে সেদিকেও আপনার যত্ন নেওয়া উচিত, যার অর্থ আপনার যত্ন করে ফিরে আসা ডেটাটি পরীক্ষা করা উচিত।

তবে ব্রিভিটির পক্ষে নিম্নলিখিত উদাহরণটি বিবেচনা করুন:

উদাহরণস্বরূপ, ধরা যাক যে আমার অ্যাপ্লিকেশনটির মূলটিতে নীচে থাকা একটি কনফিগার ফাইল 'অ্যাডমিন.জসন' রয়েছে:

admins.json

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

উদ্ধৃত কীগুলি নোট করুন "userName",, "passSalted"!

আমি নিম্নলিখিতগুলি করতে পারি এবং সহজেই ফাইলটি থেকে ডেটা বের করতে পারি।

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

এখন ডেটা রয়েছে এবং এটি নিয়মিত (বা অ্যারে) অবজেক্ট হিসাবে ব্যবহার করা যেতে পারে।

Comments

অবশ্যই সঠিক উত্তর। জেএসএন ডেটা পড়ার জন্য তৃতীয় পক্ষের মডিউলের প্রয়োজন হবে না।

— এনজিও

কীগুলির চারপাশে ডাবল উদ্ধৃতিগুলি সঠিকভাবে ফর্ম্যাট করা JSON এর জন্য প্রয়োজনীয়। এছাড়াও, জেএসএনের কোনও মন্তব্য থাকতে পারে না।

— সম্পর্কে আমাকে টিঙ্ক দিন

Answer 3

সঙ্গে json-loaderইনস্টল আপনি ব্যবহার করতে পারেন

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

বা আরও সহজভাবে

import customData from '../customData';

স্থাপন করা json-loader

npm install --save-dev json-loader

Answer 4

সবচেয়ে সহজ পদ্ধতির অনুসরণ করা হচ্ছে

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

export default someJson

তারপর

import someJson from './someJson'

Comments

ধন্যবাদ নতুন কিছু শিখতে

— নিক চ্যান আবদুল্লাহ

Answer 5

আপনার JSON ফাইলটি .js এক্সটেনশান সহ সঞ্চয় করুন এবং আপনার JSON একই ডিরেক্টরিতে থাকা উচিত তা নিশ্চিত করুন।

Comments

সমাধান হয়েছে !! উত্তর করার জন্য ধন্যবাদ !!

— হুগো সেলেরো

Answer 6

আমার জন্য যে সমাধানটি কাজ করেছিল তা হ'ল: - আমি আমার ডেটা.জেসন ফাইলকে এসআরসি থেকে পাবলিক ডিরেক্টরিতে সরিয়েছি। তারপরে ফাইলটি আনার জন্য ফেচ এপিআই ব্যবহার করুন

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: // লোকালহস্ট: 3000 / ডেটা.জসন " এ ফাইলটি সন্ধান করে যা আসলে আমার প্রতিক্রিয়া অ্যাপ্লিকেশনটির পাবলিক ডিরেক্টরি। কিন্তু দুর্ভাগ্যক্রমে প্রতিক্রিয়াশীল অ্যাপ্লিকেশন ডেটা সংকলনের সময়.জসন ফাইলটি এসসিআর থেকে পাবলিক ডিরেক্টরিতে সরানো হয় না। সুতরাং আমাদের স্পষ্টরূপে ডাটা.জসন ফাইলকে এসআরসি থেকে পাবলিক ডিরেক্টরিতে স্থানান্তর করতে হবে।

Answer 7

দিয়ে চেষ্টা করুন export default DATAবা module.exports = DATA

Comments

আহ কি আমদানির পরিবর্তে প্রয়োজনের চেষ্টা করেছেন? তবে আমি নিশ্চিত যে এটি সমস্যা নয়, পথটি সঠিক? ওহ এবং কাস্টমডাটার পরিবর্তে আমদানি ডেটা লেখার চেষ্টা করুন।

— সালভাতোর

Answer 8

// .json ফাইলটি .js এ পুনরায় নামকরণ করুন এবং এসসিআর ফোল্ডারে রাখুন

জেসন অবজেক্টকে ভেরিয়েবল হিসাবে ঘোষণা করুন

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

মডিউল.এক্সপোর্টগুলি ব্যবহার করে এটি রফতানি করুন

module.exports = customData;

যে উপাদানটির প্রয়োজন এটি থেকে, দুটি ফোল্ডার গভীর করে ব্যাকআপ করতে ভুলবেন না

import customData from '../customData';

Answer 9

এটি ভাল কাজ করেছে 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 10

কোনও তৃতীয় পক্ষের কোড বা লাইব্রেরি (প্রস্তাবিত উপায়) ব্যবহার না করে এটি করার একাধিক উপায় রয়েছে।

1 ম স্থায়ী উপায়: একটি জাসন ফাইল তৈরি করুন এবং আপনার প্রতিক্রিয়া উপাদান উদাহরণটিতে এটি আমদানি করুন

আমার ফাইলের নাম "উদাহরণ.json"

{"example" : "my text"}

উদাহরণের অভ্যন্তরের উদাহরণ কী.জসন এমন কিছু হতে পারে যা ভবিষ্যতের সমস্যাগুলি রোধ করতে ডাবল কোট ব্যবহার করার জন্য মনে রাখবেন।

কীভাবে প্রতিক্রিয়া উপাদানটি আমদানি করবেন

import myJson from "jsonlocation";

এবং আপনি এটি এর মতো যে কোনও জায়গায় ব্যবহার করতে পারেন

myJson.example

এখন কয়েকটি বিষয় বিবেচনা করার আছে। এই পদ্ধতির সাহায্যে আপনি পৃষ্ঠার শীর্ষে আপনার আমদানি ঘোষণা করতে বাধ্য হচ্ছেন এবং গতিশীল কোনও কিছু আমদানি করতে পারবেন না।

এখন, যদি আমরা জেএসএন ডেটা গতিশীলভাবে আমদানি করতে চাই তবে কী হবে? উদাহরণস্বরূপ একটি বহু ভাষা সমর্থন ওয়েবসাইট?

2 ডায়নামিক ওয়ে

1 ম আপনার জেএসওএন ফাইলটিকে ঠিক আমার উপরের উদাহরণের মতো ঘোষণা করুন

তবে এবার আমরা আলাদাভাবে ডেটা আমদানি করছি।

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

এটি একইভাবে অ্যাক্সেস করতে পারে।

তবে অপেক্ষা করুন গতিশীল বোঝা কোথায়?

কীভাবে জেএসএনকে গতিশীলভাবে লোড করা যায় তা এখানে

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

এখন আপনার সমস্ত JSON ফাইল একই ডিরেক্টরিতে রয়েছে তা নিশ্চিত করুন

এখানে আপনি প্রথম উদাহরণের মতো জাসনকে ব্যবহার করতে পারেন

myJson.example

কি পরিবর্তন হয়েছে? আমরা যেভাবে আমদানি করি কারণ এটিই আমাদের সত্যিকারের প্রয়োজন।

আশা করি এটা কাজে লাগবে.

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');

শ্রদ্ধা