জাভাস্ক্রিপ্টে কোনও বহিরাগত স্থানীয় JSON ফাইল কীভাবে পড়বেন?

255

আমি আমার স্থানীয় সিস্টেমে একটি জেএসএন ফাইল সংরক্ষণ করেছি এবং জেএসএন ফাইলটি পড়তে এবং ডেটা প্রিন্ট করার জন্য একটি জাভাস্ক্রিপ্ট ফাইল তৈরি করেছি। এখানে JSON ফাইলটি রয়েছে:

{"resource":"A","literals":["B","C","D"]}

ধরুন এই JSON ফাইল পথ করা যাক: /Users/Documents/workspace/test.json।

কেউ দয়া করে JSON ফাইলটি পড়তে এবং জাভাস্ক্রিপ্টে ডেটা মুদ্রণের জন্য কোডের একটি সহজ টুকরো লিখতে আমাকে সহায়তা করতে পারেন?

javascript json

— user2864315
সূত্র

আমি .json ফাইল থেকে জাভাস্ক্রিপ্ট পড়তে পারি কীভাবে এর

— মাইন্ডব্রেকার

93

আপনি করতে পারবেন না যেমন অনুরোধ HTTP- র ব্যবহার করা হয় একটি স্থানীয় সম্পদ একটি Ajax কল আছে।

একটি স্থানীয় কর্মচারী হ'ল একটি স্থানীয় ওয়েবসার্ভার চালানো, ফাইলটি পরিবেশন করা এবং স্থানীয়হোস্টে এজেএক্স কল করা।

আপনাকে JSON পড়তে কোড লিখতে সহায়তা করার ক্ষেত্রে, আপনার জন্য ডকুমেন্টেশনটি পড়া উচিত jQuery.getJSON():

http://api.jquery.com/jQuery.getJSON/

— ক্রিস পিকফোর্ড
সূত্র

2

আপনি কী দয়া করে আমাকে গাইড করতে পারেন এই ক্ষেত্রে আমি কীভাবে একটি স্থানীয় সার্ভার চালাতে পারি? লোকাল সার্ভারটি চালানোর জন্য আমার কী করা দরকার?

— ব্যবহারকারী 2864315

2

আপনি কোন পরিবেশ ব্যবহার করছেন? উইন্ডোজ? লিনাক্স?

— ক্রিস পিকফোর্ড

25

এটি শুধুমাত্র এজেএক্সের ক্ষেত্রেই সত্য: ক্রোমের অধীনে এবং এইচটিএমএল 5 এর ফাইল এপিআই ব্যবহার করে আমি ইতিমধ্যে এটি করেছি। প্রশ্নটি AJAX সম্পর্কে জিজ্ঞাসা করেনি।

— lauhub

10

যদি আপনি পাইথন ইনস্টল করেন তবে আপনি কমান্ড লাইন ব্যবহার করতে পারেন এবং আপনার ব্রাউজারে (উইন্ডোজ বা ম্যাক) python -m SimpleHTTPServer 8888খুলতে পারেন http://localhost:8888/। 8888বন্দর এবং পরিবর্তন করা যেতে পারে।

— ভূগোলিক

3

পাইথন 3 এর সাথে @ জিওথেরির মন্তব্য আপডেট করার জন্য কমান্ডটি হ'লpython -m http.server 8888

— মার্ক স্টোবার 12'19

191

জাভাস্ক্রিপ্ট ব্যবহার করে বাহ্যিক লোকাল জেএসএন ফাইল (ডেটা.জসন) পড়ার জন্য প্রথমে আপনার ডেটা.জেসন ফাইলটি তৈরি করুন:

data = '[{"name" : "Ashwin", "age" : "20"},{"name" : "Abhinandan", "age" : "20"}]';

জাভাস্ক্রিপ্ট ফাইলের সাথে স্ক্রিপ্ট উত্সে json ফাইলের পথ উল্লেখ করুন।
```
<script type="text/javascript" src="data.json"></script>
<script type="text/javascript" src="javascrip.js"></script>
```

জেসন ফাইল থেকে অবজেক্টটি পান

var mydata = JSON.parse(data);
alert(mydata[0].name);
alert(mydata[0].age);
alert(mydata[1].name);
alert(mydata[1].age);

আরও তথ্যের জন্য, এই উল্লেখ দেখুন ।

— Ashfedy
সূত্র

8

আপনি যদি ফাইলটি সংশোধন করতে পারেন, বা যদি ফাইলটির বিষয়বস্তু হিসাবে উপযুক্ত জেএসওএন না থাকে তবে এটি কাজ করে। উদাহরণস্বরূপ, data.jsonউপরের নমুনার সামগ্রীটি বৈধতা দেয় না: jsonlint.com কারণ এটি সত্যই জাভাস্ক্রিপ্ট। মোড়ানো একক উদ্ধৃতি বাদ দেওয়া এটিকে খাঁটি জাভাস্ক্রিপ্টে রূপান্তরিত করবে।

— জেসন অ্যালার

3

দ্রষ্টব্য: JSON.parse কিছু পুরানো ব্রাউজারগুলিতে সমর্থিত নয় (আপনাকে আইইয়ের দিকে তাকিয়ে)। এর জন্য MDN এর ব্রাউজারের সামঞ্জস্যতা টেবিলটিwindow.JSON দেখুন ।

— Sumner ইভান্স

JSON.parse (ডেটা) করা উচিত নয়; ডেটা একটি স্ট্রিং কারণ কাজ না?

— আমাকে কল করুন

259

এটি সঠিক উত্তর নয়। উত্তরের উদাহরণটি কোনও জসন ফাইল লোড করা নয়। এটি আসলে অন্য একটি জাভাস্ক্রিপ্ট ফাইল লোড করছে যা কিছু হার্ডকডযুক্ত জেসনকে ভেরিয়েবল হিসাবে সংরক্ষণ করে data। আপনি যদি জসন এর আশেপাশের স্ট্রিং কোটগুলি সরিয়ে ফেলেন data.json তবে আপনাকে ব্যবহারের প্রয়োজনও পড়বে না JSON.parse। JSON ফাইলটি কিভাবে অন্য জাভাস্ক্রিপ্ট ফাইলটিতে হার্ডকোড করবেন না এবং তারপরে এটি লোড করবেন কীভাবে তা প্রশ্ন।

— উলিওয়ং

1

JSON.parse(window.data);ভালো তথ্য প্রদান করবে scopeএর dataপরিবর্তনশীল।

— আকাশ

126

.jsonহার্ডডিস্ক থেকে কোনও ফাইল লোড করা একটি অ্যাসিনক্রোনাস অপারেশন এবং সুতরাং ফাইলটি লোড হওয়ার পরে এটি কার্যকর করতে একটি কলব্যাক ফাংশন নির্দিষ্ট করতে হবে।

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}

//usage:
readTextFile("/Users/Documents/workspace/test.json", function(text){
    var data = JSON.parse(text);
    console.log(data);
});

এই ফাংশনটি লোড একটি জন্য কাজ করে .htmlবা .txtফাইল, এর MIME প্রকার পরামিতি অগ্রাহ্য দ্বারা "text/html", "text/plain"ইত্যাদি

— Stano
সূত্র

14

এটা খুব খারাপ অভ্যাস! গুগল ক্রোমে আপনি কোনও স্থানীয় সংস্থায় XMLHttpRequest করতে পারবেন না।

— মোসাহেব

11

@ মুহসেব আপনি (এখনই, ভবিষ্যতেও), যদি উত্সটিতে অনুরোধ সিস্টেমের মতো একই ডোমেন / প্রোটোকল থাকে (যা এটি স্থানীয়, যেহেতু এটি হবে) can CORS সন্ধান করুন।

— গ্রেজেজ

11

বর্তমান ক্রোম দিয়ে এটি চেষ্টা করে, আমি "ক্রস অরিজিন অনুরোধগুলি কেবল প্রোটোকল স্কিমগুলির জন্য সমর্থিত: http, ডেটা, ক্রোম, ক্রোম-এক্সটেনশন, https।" - সুতরাং এখানে কোনও ফাইল প্রোটোকল নেই যা এখানে গ্রেইসেজ @ ইম্প্রেসড আছে

— eis

2

XMLHttpRequest.status একটি সংখ্যার মান প্রদান করে। এটি কেবলমাত্র কাজ করে কারণ জাভাস্ক্রিপ্ট আপনার কোডটি মারা না যাওয়ার জন্য পটভূমিতে স্টাফ করছে। নিম্নলিখিত হিসাবে পড়া উচিত: RawFile.status === 200

— ব্যবহারকারী 3044394

1

আপনি সেটও করতে পারেন rawFile.responseType = 'json';যাতে এটি স্বয়ংক্রিয়ভাবে জসন বস্তুকে পার্স করে, কেবল কলব্যাকের rawFile.responseপরিবর্তে পাস করার বিষয়টি নিশ্চিত করুন rawFile.responseText।

— 28:55

33

যখন Node.js অথবা যখন ব্রাউজারে require.js ব্যবহার , আপনি কেবল করতে পারেন:

let json = require('/Users/Documents/workspace/test.json');

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

— musicformellons
সূত্র

2

সত্য না! জাভাস্ক্রিপ্টটির কোনও বিল্ট ইন প্রয়োজন নেই

1

পছন্দ করেছেন উত্তরে নোড / প্রয়োজনীয়.js এর প্রয়োজনীয়তা যুক্ত করা হয়েছে।

— 1919

29

প্রথমে একটি জসন ফাইল তৈরি করুন। এই উদাহরণে আমার ফাইল words.json

[{"name":"ay","id":"533"},
{"name":"kiy","id":"33"},
{"name":"iy","id":"33"},
{"name":"iy","id":"3"},
{"name":"kiy","id":"35"},
{"name":"kiy","id":"34"}]

স্নিপেট প্রসারিত করুন

এবং এখানে আমার কোড, নোড.জেএস। 'utf8'যুক্তিটি নোট করুন readFileSync: এটি এটিকে Buffer(যদিও JSON.parseএটি পরিচালনা করতে পারে) নয়, একটি স্ট্রিংকে ফিরিয়ে দেয় । আমি ফলাফলটি দেখতে একটি সার্ভার তৈরি করছি ...

var fs=require('fs');
var data=fs.readFileSync('words.json', 'utf8');
var words=JSON.parse(data);
var bodyparser=require('body-parser');
console.log(words);
var express=require('express');

var app=express();

var server=app.listen(3030,listening);

function listening(){
console.log("listening..");
}
app.use(express.static('website'));
app.use(bodyparser.urlencoded({extended:false}));
app.use(bodyparser.json());

স্নিপেট প্রসারিত করুন

আপনি যখন নির্দিষ্ট আইডি বিশদটি পড়তে চান তখন আপনি কোডটি উল্লেখ করতে পারেন ..

 app.get('/get/:id',function(req,res){
	
var i;
		 
 for(i=0;i<words.length;++i)
 {
 if(words[i].id==req.params.id){
 res.send(words[i]);
 }
}
console.log("success");
	  
});

স্নিপেট প্রসারিত করুন

আপনি যখন ইউআরএল প্রবেশ করেছিলেন তখন localhost:3030/get/33এটি সেই আইডির সাথে সম্পর্কিত বিশদ দেবে .... এবং আপনি নাম দিয়েও পড়বেন। আমার জসন ফাইলে এই কোডটির সাথে সিমিলারের নাম রয়েছে আপনি একটি নামের বিশদ পেতে পারেন .... এবং এটি সমস্ত সিমিলারের নাম মুদ্রণ করে না

 app.get('/get/:name',function(req,res){
	
var i;
		 
 for(i=0;i<words.length;++i)
 {
 if(words[i].id==req.params.name){
 res.send(words[i]);
 }
}
console.log("success");
	  
});

স্নিপেট প্রসারিত করুন

এবং আপনি যদি সিমিলার নামের বিবরণ পড়তে চান তবে আপনি এই কোডটি ব্যবহার করতে পারেন।

app.get('/get/name/:name',function(req,res){
word = words.filter(function(val){
  return val.name === req.params.name;
});
res.send(word);
			 
 console.log("success");
	  
});

স্নিপেট প্রসারিত করুন

আপনি যদি ফাইলের সমস্ত তথ্য পড়তে চান তবে নীচে এই কোডটি ব্যবহার করুন।

app.get('/all',sendAll);
 
 function sendAll(request,response){
 response.send(words);

 }

স্নিপেট প্রসারিত করুন

— সৈয়দ আয়েশা বেবে
সূত্র

() কোথা থেকে আসে? আমার ব্রাউজারটি এটি খুঁজে

— পাচ্ছে

প্রয়োজনীয় () বিল্টিন ফাংশন রয়েছে। প্রয়োজনীয় ব্যবহারের () ব্যবহার করে আপনি পৃথক ফাইলগুলিতে বিদ্যমান মডিউলগুলি অন্তর্ভুক্ত করতে পারেন require প্রয়োজনীয়তার মূল কার্যকারিতা হ'ল এটি একটি জাভাস্ক্রিপ্ট ফাইল পড়ে, ফাইলটি কার্যকর করে এবং তারপরে রফতানি বস্তুটি ফেরত পাঠায়

— সৈয়দ আয়েশা বেবে

5

প্রয়োজনীয় ()

— নোড.জেজে

এই উত্তরটি ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করে কীভাবে কোনও ফাইল লোড করবেন তা দেখায় না, তবে নোড .js ব্যবহার করে কীভাবে তা করবেন

— আমোস লং

18

ফেচ এপিআই ব্যবহার করা সবচেয়ে সহজ সমাধান:

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

এটি ফায়ারফক্সে নিখুঁতভাবে কাজ করে, তবে ক্রোমে আপনাকে সুরক্ষা সেটিংস কাস্টমাইজ করতে হবে।

— অ্যালেক্স গ্লিনস্কি
সূত্র

আমি

— এটির

13

যতগুলি পূর্বে উল্লিখিত হয়েছে, এটি AJAX কল ব্যবহার করে কাজ করে না। তবে এর চারপাশে একটি উপায় আছে। ইনপুট উপাদান ব্যবহার করে, আপনি আপনার ফাইল নির্বাচন করতে পারেন।

ফাইলটি নির্বাচিত (.json) এর এই কাঠামো থাকা দরকার:

[
    {"key": "value"},
    {"key2": "value2"},
    ...
    {"keyn": "valuen"},
]

<input type="file" id="get_the_file">

তারপরে আপনি ফাইলরেডার () এর সাহায্যে জেএস ব্যবহার করে ফাইলটি পড়তে পারেন:

document.getElementById("get_the_file").addEventListener("change", function() {
  var file_to_read = document.getElementById("get_the_file").files[0];
  var fileread = new FileReader();
  fileread.onload = function(e) {
    var content = e.target.result;
    // console.log(content);
    var intern = JSON.parse(content); // Array of Objects.
    console.log(intern); // You can index every object
  };
  fileread.readAsText(file_to_read);
});

— সারা ক্রস
সূত্র

আপনি আপনার ফাইলের নাম কোথায় রাখবেন?

— শিল্ডজেনেরেটর 7

1

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

— সারা ক্রস

12

আপনার ব্রাউজারের উপর নির্ভর করে আপনি আপনার স্থানীয় ফাইলগুলিতে অ্যাক্সেস করতে পারেন। তবে এটি আপনার অ্যাপ্লিকেশনটির সমস্ত ব্যবহারকারীর পক্ষে কাজ না করে।

এটি করতে, আপনি এখান থেকে নির্দেশাবলী চেষ্টা করতে পারেন: http://www.html5rocks.com/en/tutorials/file/dndfiles/

আপনার ফাইলটি লোড হয়ে গেলে, আপনি ব্যবহার করে ডেটা পুনরুদ্ধার করতে পারেন:

var jsonData = JSON.parse(theTextContentOfMyFile);

— lauhub
সূত্র

9

আপনি যদি স্থানীয় ফাইলগুলি ব্যবহার করে থাকেন তবে কেন কেবল জেএস অবজেক্ট হিসাবে ডেটা প্যাকড করবেন না?

data.js

MyData = { resource:"A",literals:["B","C","D"]}

কোনও এক্সএমএলএইচটিপি পরীক্ষা নয় , কোনও পার্সিং নেই, কেবল MyData.resourceসরাসরি ব্যবহার করুন

— user7394313
সূত্র

1

ঠিক আছে তবে জাভাস্ক্রিপ্টের জন্য আরও স্পষ্ট হতে এর ব্যবহারটি দেখানোর জন্য আপনি দয়া করে MyData.resource অংশটি সম্পূর্ণ করতে পারেন। ধন্যবাদ।

— বে

9

খুব সহজ.
আপনার জসন ফাইলটির নাম ".js" পরিবর্তে ".json" এ রাখুন।

<script type="text/javascript" src="my_json.js"></script>

সুতরাং আপনার কোডটি সাধারণত অনুসরণ করুন।

<script type="text/javascript">
var obj = JSON.parse(contacts);

তবে, কেবল তথ্যের জন্য, আমার জসন সামগ্রীটি নীচের স্নিপের মতো দেখাচ্ছে।

contacts='[{"name":"bla bla", "email":bla bla, "address":"bla bla"}]';

— আন্তোনিও কার্লোস ডেল গ্র্যান্ডে জুনি
সূত্র

4

এটি কোনও জাসন ফাইল নয় - এটি একটি জেএস ফাইল।

— কার্পিক

9

আপনি এটি ES6 মডিউলের মতো আমদানি করতে পারেন;

import data from "/Users/Documents/workspace/test.json"

— সারহান সি।
সূত্র

তাহলে আপনি ডায়নামিক জসন ফাইল কীভাবে আমদানি করতে পারেন? আমি মনে করি আপনি কেবলমাত্র আপনার পদ্ধতি দ্বারা বিকাশ মোডে থাকা অবস্থায় আপনি কেবল জসন ফাইলগুলি আমদানি করতে পারবেন।

— ডায়মন্ড

তুমি ঠিক. আমি কেবল এই প্রশ্নটি বিবেচনা করে উত্তর দিয়েছি।

— সেরহান সি

6

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

    {
        {
            "key": "INFO",
            "value": "This is an example."
        }
    }

    var url = "file.json";         
    $.getJSON(url, function (data) {
        $.each(data, function (key, model) {
            if (model.key == "INFO") {
                console.log(model.value)
            }
        })
    });

— জুয়ান কার্লোস অ্যাভিলস ল্যাজকানো
সূত্র

3

আপনি XMLHttpRequest () পদ্ধতিটি ব্যবহার করতে পারেন:

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        //console.log("Json parsed data is: " + JSON.stringify(myObj));
       }
    };
xmlhttp.open("GET", "your_file_name.json", true);
xmlhttp.send();

আপনি কনসোল.লগ স্টেটমেন্ট (মন্তব্য করে) ব্যবহার করে মায়বজ এর প্রতিক্রিয়া দেখতে পাবেন।

আপনি যদি AngularJS জানেন তবে আপনি you http ব্যবহার করতে পারেন:

MyController.$inject = ['myService'];
function MyController(myService){

var promise = myService.getJsonFileContents();

  promise.then(function (response) {
    var results = response.data;
    console.log("The JSON response is: " + JSON.stringify(results));
})
  .catch(function (error) {
    console.log("Something went wrong.");
  });
}

myService.$inject = ['$http'];
function myService($http){

var service = this;

  service.getJsonFileContents = function () {
    var response = $http({
      method: "GET",
      url: ("your_file_name.json")
    });

    return response;
  };
}

আপনার যদি অন্য কোনও ফোল্ডারে ফাইল থাকে তবে ফাইলের পরিবর্তে সম্পূর্ণ পথটি উল্লেখ করুন।

— মহর্ষি রাওয়াল
সূত্র

2

আপনার যেহেতু একটি ওয়েব অ্যাপ্লিকেশন রয়েছে তাই আপনার একটি ক্লায়েন্ট এবং একটি সার্ভার থাকতে পারে।

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

যাইহোক, লাউহুব উপরে বর্ণিত হিসাবে, এটি কাজ করে বলে মনে হচ্ছে:

http://www.html5rocks.com/en/tutorials/file/dndfiles/

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

— অ্যান্টনি
সূত্র

1

স্টানো / মিটার উপরে কি মন্তব্য করেছে তা আমি পছন্দ করেছি। আমি এটি জেএসন ফাইলগুলি পড়তে ব্যবহার করি। প্রতিশ্রুতি ব্যবহার করে আমি তাদের উদাহরণগুলি প্রসারিত করেছি। এখানে একই জন্য নিমজ্জন। https://plnkr.co/edit/PaNhe1XizWZ7C0r3ZVQx?p=preview

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}

//usage:
// readTextFile("DATA.json", function(text){
//     var data = JSON.parse(text);
//     console.log(data); 
// });


var task1 = function (){
  return new Promise (function(resolve, reject){
    readTextFile("DATA.json", function(text){
    var data = JSON.parse(text);
    console.log('task1 called');
    console.log(data);
    resolve('task1 came back');
    }); 
  });
};

var task2 = function (){
  return new Promise (function(resolve, reject){
    readTextFile("DATA2.json", function(text){
    var data2 = JSON.parse(text);
    console.log('task2 called');
    console.log(data2);
    resolve('task2 came back');
    });
  });
}

Promise.race([task1(), task2()])
       .then(function(fromResolve){
          console.log(fromResolve); 
       });

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

— প্ল্যাঙ্কটন
সূত্র

1

আপনাকে অবশ্যই একটি নতুন এক্সএমএলএইচটিএইচপিআরকুয়েস্ট উদাহরণ তৈরি করতে হবে এবং জেসন ফাইলের সামগ্রীগুলি লোড করতে হবে।

এই টিপটি আমার জন্য কাজ করে ( https://codepen.io/KryptoniteDove/post/load-json-file-locally-using-pure-javascript ):

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

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

— rodrigomelo
সূত্র

এখনও ফায়ারফক্স কাজ করে কিন্তু Chrome- এ নয়: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https। আপনি কোনও JSON .JS ফাইলে রূপান্তর করতে json2js ব্যবহার করতে পারেন ।

— লালেঙ্গুয়া

1

একটি সহজ উপায় হ'ল স্থানীয়ভাবে চলমান সার্ভারের ভিতরে আপনার JSON ফাইলটি রাখা। এর জন্য টার্মিনাল থেকে আপনার প্রকল্প ফোল্ডারে যান এবং কিছু সার্ভার যেমন 8181 স্থানীয় সার্ভার শুরু করুন

python -m SimpleHTTPServer 8181

তারপরে http: // লোকালহোস্ট: 8181 / এ ব্রাউজ করাতে জেএসওএন সহ আপনার সমস্ত ফাইল প্রদর্শন করা উচিত। আপনার যদি ইতিমধ্যে না থাকে তবে পাইথন ইনস্টল করতে ভুলবেন না।

— ewalel
সূত্র

0

আপনি যদি কোনও স্থানীয় ওয়েব সার্ভার চালনা করতে পারেন (যেমন উপরে ক্রিস পি পরামর্শ করেছিলেন), এবং আপনি jQuery ব্যবহার করতে পারেন তবে আপনি http://api.jquery.com/jQuery.getJSON/ চেষ্টা করতে পারেন

— নিকোলা ওলারিউ
সূত্র

-1

আপনি কলব্যাকটি পরিচালনা করতে ডি 3 ব্যবহার করতে পারেন এবং স্থানীয় জেএসওএন ফাইলটি data.jsonনিম্নরূপ লোড করতে পারেন :

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>

<script>
  d3.json("data.json", function(error, data) {
    if (error)
      throw error;
    console.log(data);
  });
</script>

— AlexG
সূত্র

-2

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

// wrapped XMLHttpRequest in a promise
const readFileP = (file, options = {method:'get'}) => 
  new Promise((resolve, reject) => {
    let request = new XMLHttpRequest();
    request.onload = resolve;
    request.onerror = reject;
    request.overrideMimeType("application/json");
    request.open(options.method, file, true);
    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status === "200") {
            resolve(request.responseText);
        }
    };
    request.send(null);
});

আপনি এটিকে কল করতে পারেন:

readFileP('<path to file>')
    .then(d => {
      '<do something with the response data in d.srcElement.response>'
    });

— ewilan
সূত্র

-3

সুতরাং, আপনি যদি আপনার জেএসওএন ফাইল হোস্ট করার জন্য "অ্যাপাচি টমক্যাট" নিয়ে যাওয়ার পরিকল্পনা করছেন,

1> সার্ভারটি শুরু করার পরে, এই url এ গিয়ে আপনার অ্যাপাচি টমক্যাটটি প্রস্তুত এবং চলছে তা যাচাই করুন: "লোকালহোস্ট: 8080" -

2> এর পরে, "ওয়েব অ্যাপস" ফোল্ডারে যান - "সি: \ প্রোগ্রাম ফাইলগুলি \ অ্যাপাচি সফ্টওয়্যার ফাউন্ডেশন \ টমক্যাট 8.5 \ ওয়েব অ্যাপস"। এবং, একটি প্রকল্প ফোল্ডার তৈরি করুন বা আপনার প্রকল্প ফোল্ডারটি অনুলিপি করুন।

3> সেখানে আপনার জাসন ফাইলটি আটকে দিন।

4> এবং এটি। তুমি পেরেছ! কেবলমাত্র যান - " http: // লোকালহোস্ট: 8080 / $ প্রকল্পের নাম $ / $ jsonFile_name $ .json"

— যশ পি শাহ
সূত্র

টমগেট সার্ভারের জন্য জিজ্ঞাসা করা হয়নি

— চন্দ্র কণ্ঠ