স্থানীয় JSON ফাইল লোড হচ্ছে


322

আমি একটি স্থানীয় জেএসএন ফাইল লোড করার চেষ্টা করছি তবে এটি কার্যকর হবে না। এখানে আমার জাভাস্ক্রিপ্ট কোড (jQuery ব্যবহার করে:

var json = $.getJSON("test.json");
var data = eval("(" +json.responseText + ")");
document.write(data["a"]);

পরীক্ষা.জসন ফাইল:

{"a" : "b", "c" : "d"}

কিছুই প্রদর্শিত হয় না এবং ফায়ারব্যাগ আমাকে বলে যে ডেটা অনির্ধারিত। ফায়ারব্যাগে আমি দেখতে পাচ্ছি json.responseTextএবং এটি ভাল এবং বৈধ, তবে আমি লাইনটি অনুলিপি করার সময় এটি আশ্চর্যজনক:

 var data = eval("(" +json.responseText + ")");

ফায়ারব্যাগের কনসোলে এটি কাজ করে এবং আমি ডেটা অ্যাক্সেস করতে পারি।

কারও সমাধান আছে?


আপনি যখন কোনও JSONস্ট্রিং ফিরে আসেন আপনি ইতিমধ্যে জাভাস্ক্রিপ্ট অবজেক্টটি পুনরুদ্ধার করছেন, ব্যবহার করার দরকার নেই eval()
yoda

1
আপনি "স্থানীয়" জসন ফাইলকে কী বলে? লোকাল ব্রাউজারে নাকি সার্ভারে?
seppo0010

2
আপনি আমাদের যথেষ্ট বিবরণ দেন নি। ফাইলটি test.jsonকোনও পাথ নির্দিষ্ট করে না সুতরাং এটি পৃষ্ঠার অ্যাক্সেসের অবস্থানের তুলনায় এটিই তুলনামূলকভাবে ইউআরআই। @ Seppo0010 এর মতো পৃষ্ঠাটি কোথাও কোনও রিমোট সার্ভারে থাকলে এটি সার্ভারের কাছে স্থানীয় হবে এবং file://প্রোটোকল দ্বারা পৃষ্ঠাটি আপনার স্থানীয় ফাইল সিস্টেমে অ্যাক্সেস করা থাকলে এটি আপনার কম্পিউটারের সাথে আপেক্ষিক হবে ।
হিপ্পিট্রেইল

উত্তর:


292

$.getJSON অ্যাসিঙ্ক্রোনাস তাই আপনার করা উচিত:

$.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});

47
আপনি কি সত্যিই কোনও স্থানীয় ফাইল অ্যাক্সেসের অনুমতি পেয়েছেন?
মাশা

3
না, এটি ফাইল হতে পারে না তবে এটি ওয়েব সার্ভার দ্বারা পরিবেশন করা উচিত।
ক্রিস এরিকসন

15
একেবারে সঠিক. ফায়ারফক্স বা অন্যদের চেয়ে ক্রোম সুরক্ষা অনেক বেশি কঠোর। এক্সএইচআর, জোসন, এক্সএমএল ইত্যাদি ব্যবহার করে যে কোনও কিছু লোড করা মোটামুটি এক বা দুটি বিষয় বাদে Chrome এ লকড রয়েছে।
shawty

1
আমি এই চেষ্টা করেছিলাম, কিন্তু ভাগ্য নেই। কনসোলটিতেও ত্রুটি নেই :(
গোবিন্দ কৈলাস

11
আমি আপনার স্থানীয় ফাইলটি আপলোড করতে এবং ক্রোম ব্রাউজার থেকে এটি অ্যাক্সেস করতে myjson.com ব্যবহার করার পরামর্শ দিচ্ছি ।
রাসায়নিক প্রোগ্রামার 12

167

আমার একই চাহিদা ছিল (আমার অ্যাঙ্গুলার অ্যাপ্লিকেশন পরীক্ষা করার জন্য), এবং আমি খুঁজে পেয়েছি কেবলমাত্র উপায়টি প্রয়োজন.জেএস ব্যবহার করা হয়:

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

দ্রষ্টব্য: ফাইলটি একবার লোড হয়ে গেছে, পরবর্তী কলগুলি ক্যাশে ব্যবহার করবে।

আরো nodejs ফাইল পড়া করুন: http://docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs

প্রয়োজনীয়.js: http://requirejs.org/


4
যদি আপনি এটি ঠাট্টার সাথে করছেন, তবে মনে রাখবেন jest.dontMock('./data.json');অন্যথায় ফলাফলটি খালি। বাইরে কারও পক্ষে উপকারী হতে পারে :)
হ্যাভার্ড গিথাস

1
এই কোডটির প্রসঙ্গ কী? আপনি কি করবেন json?
ড্রাজেন বিজোলোভুক

4
দয়া করে পুরো উদাহরণ সরবরাহ করুন: আমি ত্রুটি পাচ্ছি:has not been loaded yet for context: _. Use require([])
শেইজুত

2
প্রয়োজন ব্রাউজারে কাজ করছে না কারণ এটি নোড.জেএস মডিউল। ওপি যদি ব্রাউজারে এটি লোড করতে চায় তবে আনতে হবে সঠিক সমাধান।
sniffingdoggo

1
হ্যাঁ, প্রয়োজনীয়তা নোডের জন্য তবে ব্রাউজারগুলিতেও প্রয়োজনীয় জেএস ব্যবহার করা যেতে পারে: "প্রয়োজনীয় জেএস একটি জাভাস্ক্রিপ্ট ফাইল এবং মডিউল লোডার in এটি ব্রাউজার ব্যবহারের জন্য অনুকূলিত, তবে এটি রাইনো এবং নোডের মতো অন্যান্য জাভাস্ক্রিপ্ট পরিবেশে ব্যবহার করা যেতে পারে। "
পের ক্রেস্টেড আরনসন

94

আরও আধুনিক উপায়ে, আপনি এখন আনতে হবে API :

fetch("test.json")
  .then(response => response.json())
  .then(json => console.log(json));

সমস্ত আধুনিক ব্রাউজারগুলি ফেচ এপিআই সমর্থন করে। (ইন্টারনেট এক্সপ্লোরার করে না, তবে এজ রয়েছে!)

সূত্র:


1
ফেচ এপিআই ব্যবহার করার সময়, আপনি সুরক্ষা সেটিংটি অক্ষম না করেই কী আপনি এখনও স্থানীয় ফাইলগুলি অ্যাক্সেস করতে নিষেধ করছেন?
লার্শ

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

1
@ কেইসেল ঠিক আছে, আমার ধারণা সুরক্ষার কারণেই সম্ভবত এটি হতে হবে। (এবং আপনি ঠিক বলেছেন, আমি " file://স্কিমের মাধ্যমে ফাইল অ্যাক্সেস করতে নিষেধ করেছিলাম )) তবে এটি একটি দুর্দান্ত পরিষ্কার পদ্ধতি I've আমি এই উত্তরের জন্য এটি ব্যবহার শুরু করেছি
লার্সহ

আপনি ফেচ এপিআই সহ স্থানীয় ফাইলগুলি অ্যাক্সেস করতে পারবেন না
এন্টন zlydenko ২

89

আপনি যদি ব্যবহারকারীকে স্থানীয় জসন ফাইল (ফাইল সিস্টেমে যে কোনও জায়গায়) নির্বাচন করতে চান, তবে নীচের সমাধানটি কাজ করে।

এটিতে ফাইলরেডার এবং জেএসওএন. পার্সার (এবং কোনও জেকোয়ারি নেই) ব্যবহার করা হয়।

<html>
<body>

<form id="jsonFile" name="jsonFile" enctype="multipart/form-data" method="post">

  <fieldset>
    <h2>Json File</h2>
     <input type='file' id='fileinput'>
     <input type='button' id='btnLoad' value='Load' onclick='loadFile();'>
  </fieldset>
</form>


<script type="text/javascript">

  function loadFile() {
    var input, file, fr;

    if (typeof window.FileReader !== 'function') {
      alert("The file API isn't supported on this browser yet.");
      return;
    }

    input = document.getElementById('fileinput');
    if (!input) {
      alert("Um, couldn't find the fileinput element.");
    }
    else if (!input.files) {
      alert("This browser doesn't seem to support the `files` property of file inputs.");
    }
    else if (!input.files[0]) {
      alert("Please select a file before clicking 'Load'");
    }
    else {
      file = input.files[0];
      fr = new FileReader();
      fr.onload = receivedText;
      fr.readAsText(file);
    }

    function receivedText(e) {
      let lines = e.target.result;
      var newArr = JSON.parse(lines); 
    }
  }
</script>

</body>
</html>

এখানে ফাইলরেডার সম্পর্কে একটি ভাল পরিচয় দেওয়া আছে: http://www.html5rocks.com/en/tutorials/file/dndfiles/


4
ফাইলআরডার এপিআই আইই 8 বা 9 তে সমর্থিত নয়, তবে অন্যান্য সমস্ত ব্রাউজারগুলি ঠিক আছে: caniuse.com/#search=filereader
উত্তর

এটি ক্রোমে নিখুঁতভাবে কাজ করে, আপনি আপনার ডেটা দেখতে পাবেনnewArr
বেলটার

এই উত্তরটি সুন্দর এবং কিছুটা আলাদা কারণ এটি jQuery ব্যবহার করছে না।
ডিজিটাল ডিজাইনডিজে

78

আপনি যদি দ্রুত এবং নোংরা কিছু খুঁজছেন তবে আপনার এইচটিএমএল ডকুমেন্টের মাথায় ডেটা লোড করুন।

data.js

var DATA = {"a" : "b", "c" : "d"};

index.html

<html>
<head>
   <script src="data.js" ></script>
   <script src="main.js" ></script>
</head>
...
</html>

main.js

(function(){
   console.log(DATA); // {"a" : "b", "c" : "d"}
})();

আমার উল্লেখ করা উচিত যে আপনার গাদা আকার (ক্রোমে) প্রায় 4 গিগাবাইট, সুতরাং যদি আপনার ডেটা এর চেয়ে বড় হয় তবে আপনার অন্য একটি পদ্ধতি খুঁজে পাওয়া উচিত। আপনি যদি অন্য ব্রাউজারটি পরীক্ষা করতে চান তবে এটি ব্যবহার করে দেখুন:

window.performance.memory.jsHeapSizeLimit / 1024 / 1024 / 1024 + " GBs"
// "4.046875 GBs"

আপনি ঠিক বলেছেন যে এএমডি কাজ করবে তবে আমি মনে করি না এএমডি এখানে সঠিক সমাধান। সবচেয়ে সহজ $ .getJSON ব্যবহার করা use ধন্যবাদ
প্যাট্রিক ব্রাউন

7
@ পেট্রিকব্রাউন হ্যাঁ, getJSON একটি ভাল সমাধান তবে আমি মনে করি অনেক ক্ষেত্রে আপনি ক্রস-ডোমেন ইস্যুতে চলে যাচ্ছেন (উদাহরণস্বরূপ S3 থেকে ডেটা লোড করা)।
jwerre

আমি এটি আমার জন্য খুব সহজ সমাধান বলে মনে করেছি। জেএসওএন ফাইলটি প্রায় একইরকম দেখায়, তাই কোনও অতিরিক্ত বিশৃঙ্খলা নেই (কেবল ফাইলের একেবারে শীর্ষে "var xyz =")। কেউই তাদের কোডে একটি বড় ডেটা ফাইল চায় না।
cslotty

এটি অনেকগুলি স্তরে ভুল, আমি বুঝতে পারি না যে এটির এতগুলি ভোট কীভাবে রয়েছে, এখানে এটি আরও ব্যাখ্যা করে যে কেউ কোডেপেন.ই.ও / ক্রিপ্টোনাইটডোভ / পোস্ট / দেখুন দেখতে চাইলে " আরও উদাহরণগুলি প্রমাণ করে যে আপনি একটি দিয়ে ডেটা অ্যাক্সেস করতে পারবেন নীচের মত একটি সাধারণ ফাংশন In বাস্তবে, এটি আসলে কোনও JSON ডকুমেন্ট লোড করছে না তবে একটি জাভাস্ক্রিপ্ট অবজেক্ট তৈরি করছে true
লেসোলোরাজানভ

1
সত্যিই এটি দুর্দান্ত সমাধান যদি আপনার কাছে কেবল কিছু প্রাক-ক্যানড ডেটা থাকে এবং আপনি একটি স্ট্যাটিক পৃষ্ঠা পরিবেশন করতে চান
ইভান পু

19

ES5 সংস্করণ

function loadJSON(callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', 'my_data.json', true);
    // Replace 'my_data' with the path to your file
    xobj.onreadystatechange = function() {
        if (xobj.readyState === 4 && xobj.status === 200) {
            // Required use of an anonymous callback 
            // as .open() will NOT return a value but simply returns undefined in asynchronous mode
            callback(xobj.responseText);
        }
    };
    xobj.send(null);
}

function init() {
    loadJSON(function(response) {
        // Parse JSON string into object
        var actual_JSON = JSON.parse(response);
    });
}

ES6 সংস্করণ

const loadJSON = (callback) => {
    let xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', 'my_data.json', true);
    // Replace 'my_data' with the path to your file
    xobj.onreadystatechange = () => {
        if (xobj.readyState === 4 && xobj.status === 200) {
            // Required use of an anonymous callback 
            // as .open() will NOT return a value but simply returns undefined in asynchronous mode
            callback(xobj.responseText);
        }
    };
    xobj.send(null);
}

const init = () => {
    loadJSON((response) => {
        // Parse JSON string into object
        let actual_JSON = JSON.parse(response);
    });
}


@ পিয়ার আপনি যদি টমক্যাট বা জ্যাম্প্প বা জবোসের মতো স্থানীয় অ্যাপ্লিকেশন সার্ভার ব্যবহার করেন। স্ক্রিপ্টটির কাজ
মিরকো সায়ানফরণি

@ মিরকোসিয়ানফারানি প্রকৃতপক্ষে কারণ আপনি file:///প্রোটোকলটি ব্যবহার করছেন না এবং ফাইলটি আর স্থানীয় বিবেচনা করতে পারে না।
পিয়ার

@xgqfrms ফেচ এপিআই দুর্দান্ত!
xgqfrms

2
//xobj.status হল পূর্ণসংখ্যা xobj.status === "200" xobj.status === 200 হওয়া উচিত
ইয়াসেরনাম

@ আপনার নামটি ঠিক বলেছেন, আমি ত্রুটিযুক্ত রাষ্ট্রের ধরণের জন্য দুঃখিত, এবং এটি সংশোধন করা হয়েছিল।
xgqfrms

14

অরিজিনাল পোস্টারের আসল কোডটি না বুঝে এবং / বা সমস্যার সমাধান না করে এই প্রশ্নের কতবার উত্তর দেওয়া হয়েছে তা আমি বিশ্বাস করতে পারি না। এটি বলেছিল, আমি নিজেই একজন শিক্ষানবিস (কোডিংয়ের মাত্র 2 মাস)। আমার কোড নিখুঁতভাবে কাজ করে, তবে এতে কোনও পরিবর্তন প্রস্তাব দিতে নির্দ্বিধায়। সমাধান এখানে:

//include the   'async':false   parameter or the object data won't get captured when loading
var json = $.getJSON({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false});  

//The next line of code will filter out all the unwanted data from the object.
json = JSON.parse(json.responseText); 

//You can now access the json variable's object data like this json.a and json.c
document.write(json.a);
console.log(json);

উপরে বর্ণিত একই কোডটি লেখার একটি ছোট্ট উপায়:

var json = JSON.parse($.getJSON({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText);

আপনি ঠিক একইভাবে কোডটি লিখতে $ .getJSON এর পরিবর্তে $ .ajax ব্যবহার করতে পারেন:

var json = JSON.parse($.ajax({'url': "http://spoonertuner.com/projects/test/test.json", 'async': false}).responseText); 

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

var json = function () {
    var jsonTemp = null;
    $.ajax({
        'async': false,
        'url': "http://spoonertuner.com/projects/test/test.json",
        'success': function (data) {
            jsonTemp = data;
        }
    });
    return jsonTemp;
}(); 

document.write(json.a);
console.log(json);

উপরের আমার কোডটিতে আপনি যে টেস্ট.জেসন ফাইলটি দেখতে পাচ্ছেন তা আমার সার্ভারে হোস্ট করা হয়েছে এবং তিনি (মূল পোস্টার) পোস্ট করেছেন একই জসন ডেটা অবজেক্টটি রয়েছে।

{
    "a" : "b",
    "c" : "d"
}

11

আমি অবাক হয়েছি এস 6 থেকে আমদানির উল্লেখ করা হয়নি (ছোট ফাইলগুলির সাথে ব্যবহার করুন)

উদা: import test from './test.json'

ওয়েবপ্যাক 2 < ফাইলগুলির json-loaderজন্য ডিফল্ট হিসাবে ব্যবহার .jsonকরে।

https://webpack.js.org/guides/migrating/#json-loader-is-not-required-anymore

জন্য টাইপ করা বিষয় :

import test from 'json-loader!./test.json';

TS2307 (টিএস) মডিউলটি 'জসন-লোডার!। / উপশহর.জসন' খুঁজে পাচ্ছে না

এটি কাজ করার জন্য আমাকে প্রথমে মডিউলটি ঘোষণা করতে হয়েছিল। আমি আশা করি এটি কারও জন্য কয়েক ঘন্টা সাশ্রয় করবে।

declare module "json-loader!*" {
  let json: any;
  export default json;
}

...

import test from 'json-loader!./test.json';

যদি আমি বাদ দেওয়ার চেষ্টা loaderথেকে json-loaderআমি থেকে নিম্নোক্ত ত্রুটিটি পেয়েছিলেনwebpack :

পরিবর্তনের পরিবর্তন: লোডার ব্যবহার করার সময় আর '-লোডার' প্রত্যয়টি বাদ দিতে দেওয়া হবে না। আপনাকে 'জসন'-এর পরিবর্তে' জসন-লোডার 'নির্দিষ্ট করতে হবে, https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed দেখুন


1
সহজ এবং সোজা
আমাদের_বেনিফ্যাক্টর

ওয়েবপৃষ্ঠা ফাইল: প্রোটোকল সহ লোড হওয়ার পরে আপনি এস -6 আমদানি বিবৃতি ব্যবহার করতে পারবেন না।
ওন্নো ভ্যান ডের জি

6

চেষ্টা করুন এইভাবে (তবে দয়া করে মনে রাখবেন যে জাভাস্ক্রিপ্টের ক্লায়েন্ট ফাইল সিস্টেমে অ্যাক্সেস নেই):

$.getJSON('test.json', function(data) {
  console.log(data);
});

6

সম্প্রতি ডি 3 জেসগুলি স্থানীয় জসন ফাইল হ্যান্ডেল করতে সক্ষম।

এটি https://github.com/mbostock/d3/issues/673 সমস্যা

স্থানীয় জসন ফাইলগুলির সাথে কাজ করার জন্য এটি ডি 3 এর প্যাচ ইনর্ডার। https://github.com/mbostock/d3/pull/632


4
জেসন ফাইলগুলি পড়তে কীভাবে ডি 3 ব্যবহার করতে হবে তার উদাহরণ দিয়ে এই উত্তরটি আরও উন্নত হবে।
পল এইচ 21

4

স্থানীয় জেসন ফাইল লোড করার চেষ্টা করার সময় (ব্যর্থ) এই থ্রেডটি পেয়েছে। এই সমাধানটি আমার পক্ষে কাজ করেছে ...

function load_json(src) {
  var head = document.getElementsByTagName('head')[0];

  //use class, as we can't reference by id
  var element = head.getElementsByClassName("json")[0];

  try {
    element.parentNode.removeChild(element);
  } catch (e) {
    //
  }

  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = src;
  script.className = "json";
  script.async = false;
  head.appendChild(script);

  //call the postload function after a slight delay to allow the json to load
  window.setTimeout(postloadfunction, 100)
}

... এবং এটি ব্যবহার করা হয় ...

load_json("test2.html.js")

... এবং এই <head>...

<head>
  <script type="text/javascript" src="test.html.js" class="json"></script>
</head>

2
এটি খুব পুনরায় ব্যবহারযোগ্য বলে মনে হয় না। উদাহরণস্বরূপ, যদি জেসন ফাইলটি একটি রিমোট সার্ভার দ্বারা পরিবেশন করা হয় তবে 100 মিমি টাইম আউট লোডের জন্য যথেষ্ট নাও হতে পারে। সময়টি যেমন ক্লায়েন্টের সংযোগের গতির উপর নির্ভর করে, আপনাকে ধীর সংযোগ সহ ক্লায়েন্টদের জন্য খুব দীর্ঘ সময়সীমা নির্ধারণ করতে হবে। সংক্ষেপে, কোন সংস্থান লোড হওয়ার জন্য অপেক্ষা করতে সেটটাইমআউট ব্যবহার করা উচিত নয়।
কেনি 806

1
কেনেনি 806 - এটি একটি নির্দিষ্ট সমস্যা সমাধানের জন্য বোঝানো হয়েছে - স্থানীয় সংস্থানগুলি লোড করা হচ্ছে (একটি অ-হোস্টেড ওয়েব পৃষ্ঠার জন্য), যার অর্থ এটি খুব পুনরায় ব্যবহারযোগ্য নয়। ওয়েব-হোস্ট করা পৃষ্ঠাগুলির জন্য 1000 এর রিসোর্স লোডিং সমাধান রয়েছে। এই নয় , সমাধান এটা একটি সমাধান। সময়সীমা পরিবর্তন করা সত্যিই সহজ। সময়সীমা সরিয়ে, আপনি কি পরামর্শ দিচ্ছেন যে অসীম অপেক্ষা গ্রহণযোগ্য?
টেকস্পড

2
আমি অসীম অপেক্ষার পরামর্শ দিচ্ছি না, আমি এমন একটি প্রযুক্তি ব্যবহারের পরামর্শ দিচ্ছি যা আপনাকে ফাইল লোড শেষ হওয়ার সাথে সাথে প্রতিক্রিয়া জানাতে দেয়। সময়সীমা নিয়ে আমার সমস্যাটি হ'ল, এটি শেষ হওয়ার জন্য আপনাকে সর্বদা অপেক্ষা করতে হবে। এমনকি যদি ফাইলটি 10 ​​মিমিতে লোড হয়ে থাকে তবে আপনি এখনও 100 মিমি অপেক্ষা করতে পারেন। এবং হ্যাঁ, টাইমআউট সামঞ্জস্য করা সহজ, তবে আপনি যা পরামর্শ দিচ্ছেন তা প্রতিবার আপনি কোনও আলাদা ফাইল লোড করতে চান বা যখন ফাইলটি সাইজ পরিবর্তন করবেন (অপেক্ষাটি অনুকূলিত করার জন্য) কোডটি পরিবর্তন করা হবে changing এই জাতীয় সমাধান আইএমএইচও ভুল এবং ভবিষ্যতে অনেক মাথা ব্যাথার কারণ হতে পারে, বিশেষত যখন অন্য কেউ এটি ব্যবহার করার চেষ্টা করে।
কেনি 806

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

1
আপনি ওপেনস্টেটিচেঞ্জ বা অনলোড ব্যবহার করে এবং তাদের একটি ফাংশন দেওয়ার চেয়ে আরও ভাল be স্ক্রিপ্ট.অনলোড = ফাংশনমন;
শেন সেরা

4

টাইপস্ক্রিপ্টে আপনি স্থানীয় JSON ফাইলগুলি লোড করতে আমদানি ব্যবহার করতে পারেন। উদাহরণস্বরূপ একটি ফন্ট.জসন লোড করা:

import * as fontJson from '../../public/fonts/font_name.json';

এটির জন্য একটি tsconfig পতাকা প্রয়োজন --resolveJsonModule:

// tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "resolveJsonModule": true,
        "esModuleInterop": true
    }
}

আরও তথ্যের জন্য টাইপস্ক্রিপ্টের প্রকাশের নোটগুলি দেখুন: https://www.typescriptlang.org/docs/handbook/release-notes/tyypecript-2-9.html


আরও বিশদ সহ লিখতে পারে কারণ উত্তরটি কিছুটা অস্পষ্টভাবে বোধগম্য।
বে

3

কৌণিক (বা অন্য কোনও কাঠামো) তে আপনি HTTP ব্যবহার করে লোড করতে পারেন আমি এটিকে কিছু ব্যবহার করি:

this.http.get(<path_to_your_json_file))
 .success((data) => console.log(data));

আশাকরি এটা সাহায্য করবে.


3

আমি যা করলাম তা হল JSON ফাইলটি সামান্য সম্পাদনা করা।

myfile.json => myfile.js

JSON ফাইলে, (এটি একটি জেএস ভেরিয়েবল করুন)

{name: "Whatever"} => var x = {name: "Whatever"}

শেষে,

export default x;

তারপর,

import JsonObj from './myfile.js';


3

আপনি যদি JSON- এর জন্য স্থানীয় বিন্যাস ব্যবহার করছেন - যেমন আপনার প্রশ্নের (টেস্ট.জসন) উদাহরণে আপনি দেখিয়েছেন তবে আপনি parseJSON()JQuery এর পদ্ধতি ->

var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );

getJSON() কোনও প্রত্যন্ত সাইট থেকে জেএসএন পাওয়ার জন্য ব্যবহৃত হয় - এটি স্থানীয়ভাবে কাজ করবে না (যদি আপনি স্থানীয় HTTP সার্ভার ব্যবহার না করেন)


2
$.ajax({
       url: "Scripts/testingJSON.json",
           //force to handle it as text
       dataType: "text",
            success: function (dataTest) {

                //data downloaded so we call parseJSON function 
                //and pass downloaded data
                var json = $.parseJSON(dataTest);
                //now json variable contains data in json format
                //let's display a few items
                $.each(json, function (i, jsonObjectList) {
                for (var index = 0; index < jsonObjectList.listValue_.length;index++) {
                      alert(jsonObjectList.listKey_[index][0] + " -- " + jsonObjectList.listValue_[index].description_);
                      }
                 });


             }
  });

1

আমি যে পদ্ধতির ব্যবহার করতে চাই তা হ'ল জেসনকে কোনও বস্তুর আক্ষরিক সাথে প্যাড / মোড়ানো এবং তারপরে .jsonp ফাইল এক্সটেনশন দিয়ে ফাইলটি সংরক্ষণ করুন। এই পদ্ধতিটি আপনার মূল জসন ফাইলকে (টেস্ট.জসন) আনল্যাটার্ট ছেড়ে দেয়, কারণ আপনি পরিবর্তে নতুন জসনপ ফাইল (test.jsonp) এর সাথে কাজ করবেন। মোড়কের নামটি যে কোনও কিছু হতে পারে তবে আপনি জসনপ প্রক্রিয়াজাত করতে কলব্যাক ফাংশনটির মতো একই নাম হওয়া দরকার। আমি 'test.jsonp' ফাইলের জন্য jsonp মোড়ক সংযোজন দেখানোর জন্য উদাহরণ হিসাবে পোস্ট করা আপনার test.json ব্যবহার করব।

json_callback({"a" : "b", "c" : "d"});

এরপরে, ফিরে আসা জেএসএনকে ধরে রাখতে আপনার স্ক্রিপ্টে বৈশ্বিক সুযোগের সাথে একটি পুনরায় ব্যবহারযোগ্য ভেরিয়েবল তৈরি করুন। এটি কেবলমাত্র কলব্যাক ফাংশনের পরিবর্তে ফিরে আসা JSON ডেটা আপনার স্ক্রিপ্টের অন্যান্য সমস্ত ফাংশনে উপলভ্য করে তুলবে।

var myJSON;

স্ক্রিপ্ট ইনজেকশন দ্বারা আপনার জসন পুনরুদ্ধার করার জন্য একটি সহজ ফাংশন আসে। নোট করুন যে আমরা এখানে ডকুমেন্টের মাথায় স্ক্রিপ্ট সংযোজন করতে jQuery ব্যবহার করতে পারি না, কারণ IE jQuery। অ্যাপেন্ড পদ্ধতি সমর্থন করে না। নীচের কোডটিতে মন্তব্য করা jQuery পদ্ধতিটি অন্যান্য ব্রাউজারগুলিতে কাজ করবে যা .append পদ্ধতি সমর্থন করে। পার্থক্যটি দেখানোর জন্য এটি একটি রেফারেন্স হিসাবে অন্তর্ভুক্ত করা হয়েছে।

function getLocalJSON(json_url){
    var json_script  = document.createElement('script');
    json_script.type = 'text/javascript';
    json_script.src  = json_url;
    json_script.id   = 'json_script';
    document.getElementsByTagName('head')[0].appendChild(json_script);
    // $('head')[0].append(json_script); DOES NOT WORK in IE (.append method not supported)
}

জেসন ফলাফলের ডেটা গ্লোবাল ভেরিয়েবলে পাওয়ার জন্য পরবর্তী একটি সংক্ষিপ্ত এবং সাধারণ কলব্যাক ফাংশন (জসনপ মোড়কের একই নাম সহ) is

function json_callback(response){
    myJSON = response;            // Clone response JSON to myJSON object
    $('#json_script').remove();   // Remove json_script from the document
}

জসন ডেটা এখন ডট স্বরলিপি ব্যবহার করে স্ক্রিপ্টের কোনও ফাংশন দ্বারা অ্যাক্সেস করতে পারে। উদাহরণ হিসাবে:

console.log(myJSON.a); // Outputs 'b' to console
console.log(myJSON.c); // Outputs 'd' to console

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

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


1

আপনি একটি জাভাস্ক্রিপ্ট ফাইলে আপনার জসন রাখতে পারেন। এটি jQuery এর ব্যবহার করে স্থানীয়ভাবে (এমনকি ক্রোমেও) লোড করা যায়getScript() ফাংশন ।

map-01.js ফাইল:

var json = '{"layers":6, "worldWidth":500, "worldHeight":400}'

main.js

$.getScript('map-01.js')
    .done(function (script, textStatus) {
        var map = JSON.parse(json); //json is declared in the js file
        console.log("world width: " + map.worldWidth);
        drawMap(map);
    })
    .fail(function (jqxhr, settings, exception) {
        console.log("error loading map: " + exception);
    });

আউটপুট:

world width: 500

লক্ষ্য করুন যে জসন ভেরিয়েবল ঘোষিত হয়েছে এবং জেএস ফাইল-এ নির্ধারিত হয়েছে।


0

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

goog.net.XhrIo.send('../appData.json', function(evt) {
  var xhr = evt.target;
  var obj = xhr.getResponseJson(); //JSON parsed as Javascript object
  console.log(obj);
});

0

json_str = String.raw`[{"name": "Jeeva"}, {"name": "Kumar"}]`;
obj = JSON.parse(json_str);

console.log(obj[0]["name"]);

আমি আমার কর্ডোভা অ্যাপ্লিকেশনটির জন্য এটি করেছি, যেমন আমি জেএসএনের জন্য একটি নতুন জাভাস্ক্রিপ্ট ফাইল তৈরি করেছি এবং এর String.rawসাথে পার্স করার জন্য জেএসওএন ডেটা আটকালামJSON.parse


যদি এটি কোনও জাভাস্ক্রিপ্ট ফাইল হয় তবে কোনও বস্তুটি কেন এবং কেবল JavaScript Object Notation(JSON) ব্যবহার না করে : obj = [{"name": "Jeeva"}, {"name": "Kumar"}]
নুনো আন্দ্রে

আমি এটি ব্যবহার করেছি কারণ আমি এজ্যাক্স ব্যবহার করে কিছু জসন ডেটা পেয়েছি, যা স্ট্রিং হিসাবে এসেছে, তাই আমি JSON.parseজাভাস্ক্রিপ্ট অবজেক্টে রূপান্তর করতে ব্যবহার করি
Jeeva

0
function readTextFile(srcfile) {
        try { //this is for IE
            var fso = new ActiveXObject("Scripting.FileSystemObject");;
            if (fso.FileExists(srcfile)) {
                var fileReader = fso.OpenTextFile(srcfile, 1);
                var line = fileReader.ReadLine();
                var jsonOutput = JSON.parse(line); 
            }

        } catch (e) {

        }
}

readTextFile("C:\\Users\\someuser\\json.txt");

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


2
কোডটি কেবল পেস্ট করার পরিবর্তে আপনার সমাধানটি ব্যাখ্যা করুন। এটি কীভাবে সমস্যার সমাধান করেছে তা ব্যাখ্যা করার একটি সমাধানই সম্প্রদায়কে সহায়তা করবে।
gmuraleekrishna

দ্রষ্টব্য: ইন্টারনেটএক্সপ্লোরার প্রয়োজন
সানকারন

0

আমার জন্য যা কাজ করেছে তা নিম্নলিখিত:

ইনপুট:

http://ip_address//some_folder_name//render_output.html?relative/path/to/json/fie.json

জাভাস্ক্রিপ্ট কোড:

<html>
<head>

<style>
pre {}
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
</style>

<script>
function output(inp) {
    document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}

function gethtmlcontents(){
    path = window.location.search.substr(1)
    var rawFile = new XMLHttpRequest();
    var my_file = rawFile.open("GET", path, true)  // Synchronous File Read
    //alert('Starting to read text')
    rawFile.onreadystatechange = function ()
    {
        //alert("I am here");
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                //alert(allText)
                var json_format = JSON.stringify(JSON.parse(allText), null, 8)
                //output(json_format)
                output(syntaxHighlight(json_format));
            }
        }
    }
    rawFile.send(null);
}

function syntaxHighlight(json) {
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}

gethtmlcontents();
</script>
</head>
<body>
</body>
</html>

-4

যদি আপনি আপনার স্থানীয় মেশিনে পাইথন ইনস্টল করে থাকেন (বা আপনি এটি ইনস্টল করতে আপত্তি করেন না) তবে স্থানীয় জেএসওএন ফাইল অ্যাক্সেস সমস্যার জন্য আমি ব্রাউজার-স্বতন্ত্র ওয়ার্কআউন্ড যা এখানে ব্যবহার করছি:

JSON ফাইলটি একটি ফাংশন তৈরি করে জাভাস্ক্রিপ্টে রূপান্তর করুন যা জাভাস্ক্রিপ্ট অবজেক্ট হিসাবে ডেটা ফেরত দেয়। তারপরে আপনি এটিকে <স্ক্রিপ্ট> ট্যাগ দিয়ে লোড করতে পারেন এবং আপনার চান ডেটা পেতে ফাংশনটিতে কল করতে পারেন।

এখানে পাইথন কোড আসে

import json


def json2js(jsonfilepath, functionname='getData'):
    """function converting json file to javascript file: json_data -> json_data.js
    :param jsonfilepath: path to json file
    :param functionname: name of javascript function which will return the data
    :return None
    """
    # load json data
    with open(jsonfilepath,'r') as jsonfile:
        data = json.load(jsonfile)
    # write transformed javascript file
    with open(jsonfilepath+'.js', 'w') as jsfile:
        jsfile.write('function '+functionname+'(){return ')
        jsfile.write(json.dumps(data))
        jsfile.write(';}')

if __name__ == '__main__':
    from sys import argv
    l = len(argv)
    if l == 2:
        json2js(argv[1])
    elif l == 3:
        json2js(argv[1], argv[2])
    else:
        raise ValueError('Usage: python pathTo/json2js.py jsonfilepath [jsfunctionname]')
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.