বাস্তবে স্ক্রিপ্টে জসন ফাইল কীভাবে আমদানি করবেন?

Question

আমি কীভাবে ইকমাস্ক্রিপ্ট j-তে একটি জেসন ফাইল অ্যাক্সেস করতে পারি? নিম্নলিখিতগুলি কাজ করে না:

import config from '../config.json'

আমি যদি জাভাস্ক্রিপ্ট ফাইলটি আমদানির চেষ্টা করি তবে এটি কাজ করে।

Comments

এটি ES6 এর সাথে তবে আপনি যে মডিউল লোডার ব্যবহার করছেন তা নিয়ে কিছুই করার নেই। বাক্য গঠন নিজেই ঠিক আছে।

— ফেলিক্স ক্লিং

এটি করার সর্বোত্তম উপায় হ'ল ব্যবহার করা webpackএবং json-loaderএটির সাথে।

— সুপ্রিতা শঙ্কর

ES6 নিম্নলিখিত সিনট্যাক্স সহ JSON আমদানি সমর্থন করে: './example.json' থেকে ডেটা হিসাবে * আমদানি করুন;

— উইলিয়ামালী

Answer 1

একটি সাধারণ কাজ:

config.js

export default
{
  // my json here...
}

তারপর ...

import config from '../config.js'

বিদ্যমান .json ফাইলগুলি আমদানির অনুমতি দেয় না, তবে একটি কাজ করে।

Comments

এটি আসলে প্রশ্নের উত্তর দেয় না। উদাহরণস্বরূপ আপনি কেবল আপনার প্যাকেজ.জসনকে প্যাকেজ.জেজে রূপান্তর করতে পারবেন না। এমন সময় আছে যখন আপনি জেএসএস নয় সত্যই জেএসএন আমদানি করতে চান।

— কৌতূহলীনি

মোটেও সমাধান নয়, আপনি একটি জাভাস্ক্রিপ্ট অবজেক্টটি রফতানি করছেন যা জেএসএনের মতো একই সিনট্যাক্স ধারণ করে।

— মা জেরেজ

ইস্যু পাঠ্য আপডেট হয়েছে; আরও শব্দার্থিক বিতর্ক এড়ানোর চেষ্টা করুন।

— গিলবার্ট

আমি "postbuild": "node myscript.js"আমার প্যাকেজ.জসন ফাইলে একটি পদক্ষেপ যুক্ত করেছি যা আমার জন্য এটি করতে ফাইল-এ প্রতিস্থাপন ব্যবহার করে। myscript.js ­ const replace = require('replace-in-file'); const options = { files: '_demo/typedocs/navexReact.td.js', from: /{/, to: 'export default {', }; const convertJsonOutputToJsModule = async () => { try { const changes = await replace(options) console.log('Converted json to module in files:', changes.join(', ')); } catch (error) { console.error('Error occurred:', error); } } convertJsonOutputToJsModule()

— StJohn3D

"এটিকে জেএসে রূপান্তর করুন" কীভাবে কোনও জেএসএন ফাইল আমদানি করবেন তার সমাধান নয়। এটি আর JSON ফাইল নয়। এটি কীভাবে JSON আমদানি করতে পারে তার জন্য # 1 গুগলের ফলাফল এবং এর প্রধান উত্তরটি হল জেএসএন আমদানি না করা।

— জিম্বো জনি

Answer 2

টাইপস্ক্রিপ্ট বা ব্যাবেল ব্যবহার করে, আপনি আপনার কোডে জসন ফাইল আমদানি করতে পারেন ।

// Babel

import * as data from './example.json';
const word = data.name;
console.log(word); // output 'testing'

তথ্যসূত্র: https://hackernoon.com/import-json-into-typescript-8d465beded79

Comments

কেবল এটিতে (টাইপস্ক্রিপ্ট জসন আমদানি) যুক্ত করতে আপনি এখন এটি কেবল আপনার tsconfig এ যুক্ত করতে পারেন ... {"সংকলকঅ্যাপশন": resolve "রেজাল্ট জসনমডুল": সত্য}}

— ম্যাট

কোনও ব্রাউজার কি এটি সমর্থন করে? আমি বর্তমান এফএফ এ চেষ্টা করেছি এবং ত্রুটি পেয়েছি Loading failed for the module with source "example.json"; ক্রোমে আমি "মডিউল স্ক্রিপ্ট লোড করতে ব্যর্থ হয়েছি: সার্ভারটি একটি নন-জাভাস্ক্রিপ্ট মাইম টাইম" অ্যাপ্লিকেশন / জেসন "এর সাথে প্রতিক্রিয়া জানিয়েছে HTML

— কোডার

@ কোডার এটি আমার সমস্ত ব্রাউজারে কাজ করে। আপনি কি ES6 / ES2015 সমর্থন সক্ষম করেছেন?

— উইলিয়ামালী

এটা ঠিক আমার ঘটেছে, যখন আপনি বলবেন "ES6 মধ্যে" আপনি আসলে গড় "হিজড়া মধ্যে" - আমি ভেবেছিলাম তুমি কোড সম্পর্কে কথা বলা হয়েছে নির্গত দ্বারা tscকিন্তু যে আসলে কি ঘটছে না। আমি ব্রাউজারে নেটিভভাবে ES6 মডিউলগুলি চালানোর চেষ্টা করছি ( <script type="module">) এবং উপরের ত্রুটিগুলি হ'ল আপনি যদি সেই importলাইনটি সরাসরি চালান তবে আপনি যা পাবেন। দয়া করে আমাকে সংশোধন করুন যদি আমি ভুল হয়ে থাকি এবং আপনি প্রকৃতপক্ষে এটি করেন তবে আসল ES6 এ JSON থেকে আমদানি করা সম্ভব।

— কোডার

যখন আমি বলেছিলাম "কোনও ব্রাউজারগুলি এটি সমর্থন করে," আপনি বাবেলের মাধ্যমে এটি স্থানান্তরিত করার পরে "আমার অর্থ ছিল না"। আপনার লিঙ্ক করা প্রথম নিবন্ধে টিএস importবিবৃতিটি নোডে স্থানান্তর করেছে require()(এটি চেষ্টা করুন!), এবং দ্বিতীয় লিঙ্কটি জেএসএন আমদানি সম্পর্কে কিছুই জানায় না। এখানে সমস্যাটি পার্সার বা মডিউল সিস্টেমের সাথে নয়, এটি লোডার - ব্রাউজারের লোডার জাভাস্ক্রিপ্টের অন্য কোনওটির জন্য আমদানি সমাধান করবে না। হুডের নীচে, আপনাকে সর্বদা একটি এজেএক্স কল (আনয়ন / এক্সএইচআর) ব্যবহার করতে হবে এবং ফলাফলটি পার্স করতে হবে, এমনকি যদি আপনার বিল্ড টুলচেনটি এড়িয়ে যায়।

— কোডার

Answer 3

দুর্ভাগ্যক্রমে ES6 / ES2015 মডিউল আমদানি সিনট্যাক্সের মাধ্যমে JSON লোডিং সমর্থন করে না। তবে ...

আপনি এটি করতে পারেন এমন অনেকগুলি উপায় রয়েছে। আপনার প্রয়োজনের উপর নির্ভর করে আপনি হয় জাভাস্ক্রিপ্টে ফাইলগুলি কীভাবে পড়বেন তা সন্ধান করতে পারেন ( window.FileReaderআপনি ব্রাউজারে চালাচ্ছেন তবে একটি বিকল্প হতে পারে) বা অন্যান্য প্রশ্নে বর্ণিত হিসাবে কিছু লোডার ব্যবহার করতে পারেন (ধরে নিবেন আপনি নোডজেএস ব্যবহার করছেন)।

আইএমওর সহজতম উপায় হ'ল জেএসএনকে কোনও ইএস 6 মডিউলে একটি জেএস বস্তু হিসাবে রেখে এটি রফতানি করা। আপনি যেখানে প্রয়োজন সেখানে আপনি কেবল এটি আমদানি করতে পারেন।

আপনি ওয়েবপ্যাক ব্যবহার করছেন কিনা তাও লক্ষণীয়, জেএসএন ফাইলগুলি আমদানি করা ডিফল্টরূপে (যেহেতু webpack >= v2.0.0) কাজ করবে ।

import config from '../config.json';

Comments

এটি স্ট্রিংয়ে রাখার দরকার নেই। একে বলা হয় জাসন, জাসএসএন নয়, সর্বোপরি।

— আরও ভাল অলিভার

এছাড়াও, টোরাজাবুরো পূর্বে মুছে ফেলা উত্তরে ব্যাখ্যা করেছিলেন: কোনও ES6 "মডিউল সিস্টেম" নেই; একটি এপিআই রয়েছে যা একটি নির্দিষ্ট লোডার দ্বারা প্রয়োগ করা হয়। যে কোনও লোডার জেএসওএন ফাইলগুলির আমদানি সমর্থন সহ যা কিছু করতে পারে তা করতে পারে। উদাহরণস্বরূপ, একটি লোডার '/। ডিরেক্টরি থেকে ইম্পোর্ট ডিরেক্টরি / সূচি.ইএসএস

— বোঝাতে

বাস্তবে ES6 / ES2015 আমদানি সিনট্যাক্সের মাধ্যমে JSON লোডিং সমর্থন করে: './example.json' থেকে ডেটা হিসাবে আমদানি করুন;

— উইলিয়ামালী

ওয়েবপ্যাকটি স্বয়ংক্রিয়ভাবে এটি করে এমন অনুস্মারকটির জন্য +1 যদিও আপনার "টেস্ট: /.js/" ওয়েবপ্যাকটি জাভাস্ক্রিপ্ট হিসাবে আপনার জসন ফাইলটি সংকলন করার চেষ্টা করবে তা যত্নবান। #fail। এটি ঠিক করতে, "পরীক্ষা: /.js$/" বলার জন্য এটি পরিবর্তন করুন

— র‌্যাপ

ওয়েবপ্যাকটি নোডেজের উপর ভিত্তি করে তৈরি, তাই না?

— আইয়্যাশ

Answer 4

আমি বাবেল + ব্রাউজরিফাই ব্যবহার করছি এবং আমার কাছে একটি ডিরেক্টরিতে একটি জেএসওএন ফাইল রয়েছে ./i18n/locale-en.json অনুবাদ নেমস্পেসের সাথে (এনজিট্রান্সলেট ব্যবহার করার জন্য)।

JSON ফাইল থেকে কোনও রফতানি না করে (যা বিটিডব্লিউ সম্ভব নয়), আমি এই সিনট্যাক্সের সাহায্যে এর সামগ্রীর ডিফল্ট আমদানি করতে পারতাম:

import translationsJSON from './i18n/locale-en';

Answer 5

আপনি যদি নোড ব্যবহার করছেন তবে আপনি এটি করতে পারেন:

const fs = require('fs');

const { config } = JSON.parse(fs.readFileSync('../config.json', 'utf8')) // May be incorrect, haven't used fs in a long time

অথবা

const evaluation = require('../config.json');
// evaluation will then contain all props, so evaluation.config
// or you could use:
const { config } = require('../config.json');

অন্য:

// config.js
{
// json object here
}

// script.js

import { config } from '../config.js';

অথবা

import * from '../config.json'

Answer 6

আপনার বিল্ড টুলিং এবং জেএসএন ফাইলের মধ্যে ডেটা কাঠামোর উপর নির্ভর করে এর জন্য আমদানি করতে হতে পারে default।

import { default as config } from '../config.json';

যেমন মধ্যে ব্যবহার Next.js

Comments

টাইপস্ক্রিপ্টের জন্য যুক্ত নোটটি আপনার মধ্যে রয়েছে তা নিশ্চিত resolveJsonModuleকরা । truetsconfig.json

— প্যাট মিগলিয়াচিয়ো

পুরোপুরি কাজ! জেসন আমদানি করার সময় এবং এটিকে একটি চলকতে সঞ্চয় করার সময়, এই সমাধানটি কাজ করে।

— জেপি বালা কৃষ্ণ

Answer 7

কিছুটা দেরি হলেও আমার ওয়েব অ্যাপ্লিকেশনটির জন্য প্যাকেজ.জসন সংস্করণের উপর ভিত্তি করে অ্যাপ্লিকেশন সংস্করণ প্রেরণে জড়িত এমন বিশ্লেষণ সরবরাহ করার চেষ্টা করার সময় আমি একই সমস্যাটি পেরেছি।

কনফিগারেশন নিম্নরূপ: প্রতিক্রিয়া + Redux, ওয়েবপ্যাক 3.5.6

ওয়েবপ্যাক 2+-এর পর থেকে জসন-লোডার বেশি কিছু করছে না, তাই এটির সাথে কিছু বিড়বিড় করার পরে, আমি এটিকে সরিয়ে দিয়ে শেষ করেছি।

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

সুতরাং এটি এখানে:

  fetch('../../package.json')
  .then(resp => resp.json())
  .then((packageJson) => {
    console.log(packageJson.version);
  });

মনে রাখবেন, যেহেতু আমরা প্যাকেজ.জসন সম্পর্কে এখানে বিশেষভাবে কথা বলছি, ফাইলটি সাধারণত আপনার প্রোডাকশন বিল্ডে (বা এটির জন্য দেবও) বান্ডিল হয়ে আসবে না, সুতরাং অ্যাক্সেসের জন্য আপনাকে কপিওব্যাকপ্যাক প্লাগিন ব্যবহার করতে হবে এটি আনার সময়।

Comments

করতে পারবে না। আনয়ন স্থানীয় ফাইল সমর্থন করে না ... আপনি পলিফিল বা কিছু ব্যবহার করতে পারেন।

— sapy

@sapy মাস দেরী উত্তর কিন্তু আনা API বেশিরভাগ একেবারে নেই আপেক্ষিক পথ থেকে সার্ভারের হোস্টনেম, সেইসাথে লোড উল্লেখ না করে পথ থেকে সমর্থন লোড হচ্ছে। আপনি যা ভাবছেন file:///তা হ'ল ইউআরএলগুলি থেকে লোড করা যা এখানে ঘটছে তা নয়।

— জেমি রিডিং

Answer 8

আনয়ন সহ একটি ব্রাউজারে (মূলত এখন তাদের সবাই):

এই মুহুর্তে, আমরা importএকটি JSON মাইম প্রকারের ফাইলগুলি করতে পারি না , কেবল জাভাস্ক্রিপ্ট মাইম প্রকারের ফাইলগুলি। এটি ভবিষ্যতে যুক্ত হওয়া কোনও বৈশিষ্ট্য হতে পারে ( অফিসিয়াল আলোচনা )।

fetch('./file.json')
  .then(response => response.json())
  .then(obj => console.log(obj))

নোড.জেএস v13.2 + এ:

এটি বর্তমানে --experimental-json-modulesপতাকাটির প্রয়োজন , অন্যথায় এটি ডিফল্টরূপে সমর্থিত নয়।

চালানোর চেষ্টা করুন

node --input-type module --experimental-json-modules --eval "import obj from './file.json'; console.log(obj)"

এবং কনজোল থেকে উত্পন্ন সামগ্রীটি দেখুন।