স্থানীয় JSON ফাইলটি ভেরিয়েবলে লোড করুন

Question

আমি জাভাস্ক্রিপ্টের একটি ভেরিয়েবলের মধ্যে একটি .json ফাইল লোড করার চেষ্টা করছি, তবে আমি এটি কাজ করতে পারি না। এটি সম্ভবত একটি সামান্য ত্রুটি তবে আমি এটি খুঁজে পাই না।

আমি যখন স্থির ডেটা ব্যবহার করি তখন সবকিছু ঠিকঠাক কাজ করে:

var json = {
  id: "whatever",
  name: "start",
  children: [{
      "id": "0.9685",
      "name": " contents:queue"
    }, {
      "id": "0.79281",
      "name": " contents:mqq_error"
    }
  }]
}

আমি সবকিছু যে করা {}একটি content.json: এখানে ব্যাখ্যা করেছেন যে একটি স্থানীয় জাভাস্ক্রিপ্ট পরিবর্তনশীল মধ্যে ফাইল ও লোড করার চেষ্টা পরিবর্তনশীল লোড JSON ।

var json = (function() {
  var json = null;
  $.ajax({
    'async': false,
    'global': false,
    'url': "/content.json",
    'dataType': "json",
    'success': function(data) {
      json = data;
    }
  });
  return json;
})();

আমি ক্রোম ডিবাগার সঙ্গে এটি দৌড়ে এবং এটা সবসময় আমাকে বলে যে ভেরিয়েবলের মান jsonহয় null। content.json.Js ফাইল এটি কল হিসাবে একই ডিরেক্টরির মধ্যে ফাইল থাকা।

আমি কি থেকে বাতিল হলাম?

Comments

আপনার ফাইল ইউআরএল /content.jsonযার অর্থ ফাইলটি আপনার ওয়েব অ্যাপ্লিকেশনের মূল স্তরে রয়েছে। content.jsonআপনার স্ক্রিপ্ট ফাইলটি যেখানে স্থাপন করা হয়েছে সেখানে একই ডিরেক্টরিতে এটি নির্দেশ করতে (স্ল্যাশ ছাড়াই) পরিবর্তন করুন । কেবলমাত্র যদি আপনার স্ক্রিপ্ট ফাইলটি মূল স্তরের ডিরেক্টরিতে থাকে তবে এটি কাজ করবে।

— সামিচ

ফাইল বসবাস WebContent \ jit \ content.json .. আমি 'URL' চেষ্টা: "/WebContent/jit/content.json", কিন্তু এখনও পরিবর্তনশীল নাল

— PogoMips

Answer 1

আপনি যদি নিজের বস্তুকে content.jsonসরাসরি আটকান তবে তা অবৈধ জেএসওএন। JSON কী এবং মানগুলি অবশ্যই ডাবল উদ্ধৃতিতে আবৃত থাকতে হবে ( "না ') যদি না মানটি সংখ্যা, বুলিয়ান null, বা সংমিশ্রিত (অ্যারে বা অবজেক্ট) হয়। জেএসএনে ফাংশন বা undefinedমান থাকতে পারে না । নীচে আপনার অবজেক্টটি বৈধ JSON হিসাবে রয়েছে।

{
  "id": "whatever",
  "name": "start",
  "children": [
    {
      "id": "0.9685",
      "name": " contents:queue"
    },
    {
      "id": "0.79281",
      "name": " contents:mqq_error"
    }
  ]
}

এছাড়াও আপনি একটি অতিরিক্ত ছিল }।

Comments

আমি বিশ্বাস করতে পারি না যে এটি ঠিক করে দিয়েছে .. কেন এটি ডাবল কোট ছাড়াই .js ফাইলে এম্বেড করে সরাসরি কাজ করবে, কিন্তু জাসন ফাইলে নয়? এটি কোনও

— অর্থবোধ

@ ব্যবহারকারী1695165 - জসন এবং একটি জাভাস্ক্রিপ্ট অবজেক্ট দুটি ভিন্ন জিনিস, তারা কেবল একই দেখায়।

— অ্যাডিনিও

@ কেভিন বি "... যদি না মানটি [বা বুলিয়ান] হয় না।"

— জ্যাকব বিউচ্যাম্প

কেবলমাত্র একটি টিপ: আপনার জসন ডেটা ব্যবহারের আগে এটি পরীক্ষা করতে আপনি jsonlint.com এর মতো কোনও জসন যাচাইকারী ব্যবহার করতে পারেন ।

— মার্কো পানিচি

Answer 2

আমার সমাধানটি যেমন এখানে উত্তর হিসাবে দেওয়া হয়েছে তা হ'ল:

    var json = require('./data.json'); //with path

ফাইলটি একবারে লোড হয়, আরও অনুরোধগুলি ক্যাশে ব্যবহার করে।

সম্পাদন করা এড়ানোর ক্যাশে করার জন্য, এখানে থেকে সাহায্যকারী ফাংশন এই ব্লগপোস্টটিকে মন্তব্য দেওয়া ব্যবহার fsমডিউল:

var readJson = (path, cb) => {
  fs.readFile(require.resolve(path), (err, data) => {
    if (err)
      cb(err)
    else
      cb(null, JSON.parse(data))
  })
}

Comments

কেবলমাত্র উল্লেখ করতে চেয়েছিলেন যে এই সমাধানটির জন্য প্রয়োজনীয় জেএস নামের একটি অতিরিক্ত লাইব্রেরি প্রয়োজন ।

— লুইস কাবঙ্গো

কিভাবে ক্যাচিং এড়ানো যায়?

— ননো

গিলের্ম

— ওয়েনিং

TLDR; ক্যাচিং তাকে ইউনিট পরীক্ষায় ধাক্কা দেয় এবং তাই তিনি ক্যাচিং এড়ানোর জন্য একটি সহায়ক ফাংশন দেন (পিং @ নোনো)।

— এহভিন্স

@ এহভিন্স ওহ আমি খেয়াল করিনি যেহেতু আমি পুরো নিবন্ধটি পড়িনি। আপনাকে ধন্যবাদ :-)

— সংঘবদ্ধ

Answer 3

ES6 / ES2015 এর জন্য আপনি সরাসরি এই জাতীয় আমদানি করতে পারেন:

// example.json
{
    "name": "testing"
}


// ES6/ES2015
// app.js
import * as data from './example.json';
const {name} = data;
console.log(name); // output 'testing'

আপনি যদি টাইপস্ক্রিপ্ট ব্যবহার করেন তবে আপনি json মডিউলটি এর মতো ঘোষণা করতে পারেন:

// tying.d.ts
declare module "*.json" {
    const value: any;
    export default value;
}

- টাইপ করা বিষয় যেহেতু 2.9+ আপনি যোগ করতে পারেন resolveJsonModule মধ্যে compilerOptionstsconfig.json

{
  "compilerOptions": {
    "target": "es5",
     ...
    "resolveJsonModule": true,
     ...
  },
  ...
}

Comments

আমদানি ক্রোম ভি 72 এ কাজ করছে না - এখনওUncaught SyntaxError: Unexpected token *

— 1000 জিবিএস

আমি যখন এটি ব্যবহার করি তখন মনে dataহয় এটি একটি মডিউল তবে data.defaultএটি বস্তু

— ডাস্টিন মিশেল

আমি এটি কনসোলে চালানোর চেষ্টা করছিলাম, তবে কোনও সাফল্য ছাড়াই। এটি নবেল v12.4.0 এর সাথে কাজ করবে না, বাবেল নোড 6.26.0 এর সাথে। আমি সর্বদা পাইSyntaxError: Unexpected token *

— মারিও 199

ES6 / ES2015- এর জন্য আপনি সরাসরি আমদানি করতে পারেন: মনে হচ্ছে import * as data from './example.json'মাইম টাইপের ত্রুটির কারণে করার সময় আমি একটি কনসোল ত্রুটি পেয়েছি ।

— ফ্যালেনেরপেপার

যদি আমি ব্যবহার করি import * as data from './example.json';তবে dataএটি কেবলমাত্র মডিউল, তবে data.defaultএটি অবজেক্ট। তবে আমি যখন তখন ব্যবহার করি import data from './example.json';তখন dataঅবজেক্টটি যা বেশি প্রয়োগযোগ্য

— নেল

Answer 4

দুটি সম্ভাব্য সমস্যা রয়েছে:

1. AJAX অবিচ্ছিন্ন, সুতরাং jsonআপনি বাহ্যিক ক্রিয়া থেকে ফিরে আসার পরে অপরিজ্ঞাত হবে। ফাইলটি লোড হয়ে গেলে, কলব্যাক ফাংশনটি jsonকিছু মান হিসাবে সেট হয়ে যায় তবে সেই সময়টিতে , কেউ আর যত্ন করে না।

   আমি দেখতে পাচ্ছি যে আপনি এটিকে ঠিক করার চেষ্টা করেছেন 'async': false। এটি কাজ করে কিনা তা পরীক্ষা করতে কোডটিতে এই লাইনটি যুক্ত করুন এবং আপনার ব্রাউজারের কনসোলটি পরীক্ষা করুন:

   console.log(['json', json]);

2. পথটি ভুল হতে পারে। এইচটিএমএল ডকুমেন্টে আপনি যে স্ক্রিপ্টটি লোড করতে ব্যবহার করেছিলেন একই পথটি ব্যবহার করুন। সুতরাং যদি আপনার স্ক্রিপ্ট হয় js/script.js, ব্যবহার করুনjs/content.json

   কিছু ব্রাউজারগুলি আপনাকে দেখাতে পারে যে তারা কোন ইউআরএলগুলি অ্যাক্সেস করার চেষ্টা করেছে এবং কীভাবে চলেছিল (সাফল্য / ত্রুটি কোড, এইচটিএমএল শিরোনাম ইত্যাদি)। কী হয় তা দেখতে আপনার ব্রাউজারের বিকাশের সরঞ্জামগুলি পরীক্ষা করুন।

Comments

সম্ভবত তার jquery সংস্করণ এটি সমর্থন করে না, এখনও? আমি শব্দটির উন্নতি করেছি।

— অ্যারন দিগুল্লা

Answer 5

অন্তর্নির্মিত নোড.জেএস মডিউল এফএস এটি আপনার প্রয়োজনের উপর নির্ভর করে তাত্পর্যপূর্ণ বা সিঙ্ক্রোনিকভাবে করবে।

আপনি এটি ব্যবহার করে লোড করতে পারেন var fs = require('fs');

অসমনিয়ত

fs.readFile('./content.json', (err, data) => {
    if (err)
      console.log(err);
    else {
      var json = JSON.parse(data);
    //your code using json object
    }
})

সমলয়

var json = JSON.parse(fs.readFileSync('./content.json').toString());

Answer 6

ফাইল ~ / আমার-অ্যাপ / এসসিআর / ডিবি / অ্যাবসি.জেসন হিসাবে দেওয়া জসন ফর্ম্যাটের জন্য:

  [
      {
        "name":"Ankit",
        "id":1
      },
      {
        "name":"Aditi",
        "id":2
      },
      {
        "name":"Avani",
        "id":3
      }
  ]

j / my-app / src / app.js এর মতো .js ফাইলটিতে আমদানি করার জন্য অন্তর্বর্তী:

 const json = require("./db/abc.json");

 class Arena extends React.Component{
   render(){
     return(
       json.map((user)=>
        {
          return(
            <div>{user.name}</div>
          )
        }
       )
      }
    );
   }
 }

 export default Arena;

আউটপুট:

Ankit Aditi Avani

Comments

এটি এমন একটি প্রশ্নের উত্তর যা এখানে জিজ্ঞাসা করা হয় নি।

— কেভিন বি

@ কেভিনব আমার ব্যাখ্যা অনুসারে, আমি জেএসএস ফাইলকে .js ফাইল আমদানি করেছি। এটি আমাকে কনস্ট জেসন-তে জেসন-ফাইল লোড করতে সহায়তা করেছে। এখান থেকে, আমি ব্যবহারকারীর বৈশিষ্ট্য এবং এর জন্য নিম্নলিখিত জসন অভিধান ব্যবহার করতে সক্ষম হয়েছি।

— Ank_247shbm

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

— কেভিন বি

একটি দ্রষ্টব্য হিসাবে: অন্যান্য সমস্ত উত্তরের সাথে এই উত্তরের সাথে সংযুক্ত মন্তব্য পোস্ট করা অতিরিক্ত স্ব-প্রচার হিসাবে বিবেচিত হতে পারে, এবং উত্তরগুলি সম্পাদনা করার চেষ্টা করা ভাঙচুর is আপনার মন্তব্যগুলি মুছে ফেলা হয়েছে, এবং দয়া করে আর এইরকম সম্পাদনা করবেন না।

— ব্র্যাড লারসন

ধন্যবাদ আমার জন্য দুর্দান্ত কাজ!

— কুই-গন জ্বিন