जावास्क्रिप्ट में एक बाहरी स्थानीय JSON फ़ाइल कैसे पढ़ें?

Question

मैंने अपने स्थानीय सिस्टम में एक JSON फाइल सेव की है और JSON फाइल को पढ़ने और डेटा को प्रिंट करने के लिए एक जावास्क्रिप्ट फाइल बनाई है। यहाँ JSON फ़ाइल है:

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

मान लीजिए कि इस JSON फ़ाइल का मार्ग है दो: /Users/Documents/workspace/test.json।

क्या कोई मुझे JSON फ़ाइल पढ़ने और जावास्क्रिप्ट में डेटा प्रिंट करने के लिए एक साधारण कोड लिखने में मदद कर सकता है?

Comments

के संभावित डुप्लिकेट मैं जावास्क्रिप्ट कैसे प्राप्त कर सकते हैं एक .json फ़ाइल से पढ़ने के लिए?

— माइंडब्रेकर

Answer 1

आप स्थानीय संसाधन के लिए AJAX कॉल नहीं कर सकते क्योंकि HTTP का उपयोग करके अनुरोध किया गया है।

वर्कअराउंड लोकल वेबसर्वर को चलाना, फाइल को परोसना और लोकलहोस्ट को AJAX कॉल करना है।

JSON पढ़ने के लिए आपको कोड लिखने में मदद करने के संदर्भ में, आपको इसके लिए दस्तावेज़ पढ़ना चाहिए jQuery.getJSON():

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

Comments

क्या आप मुझे मार्गदर्शन दे सकते हैं कि मैं इस मामले में स्थानीय सर्वर कैसे चला सकता हूं? स्थानीय सर्वर चलाने के लिए मुझे क्या करने की आवश्यकता है?

— user2864315

आप किस वातावरण का उपयोग कर रहे हैं? खिड़कियाँ? लिनक्स?

— क्रिस पिकफोर्ड

यह केवल AJAX के लिए सही है: Chrome के अंतर्गत और HTML5 की फ़ाइल API का उपयोग करके मैंने पहले ही कर दिया था। सवाल AJAX के बारे में नहीं पूछा।

— लुहब

यदि आपके पास अजगर स्थापित है, तो आप कमांड लाइन का उपयोग कर सकते हैं python -m SimpleHTTPServer 8888और http://localhost:8888/अपने ब्राउज़र (विंडोज या मैक) में खोल सकते हैं । 8888बंदरगाह है और बदला जा सकता है।

— 21

@ जियोथोरी की टिप्पणी को अद्यतन करने के लिए, पायथन 3 के साथ कमांड हैpython -m http.server 8888

— मार्क स्ट्रोब

Answer 2

जावास्क्रिप्ट का उपयोग करके बाहरी स्थानीय JSON फ़ाइल (data.json) को पढ़ने के लिए, पहले अपना data.json फ़ाइल बनाएं:

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

1. जावास्क्रिप्ट फ़ाइल के साथ स्क्रिप्ट स्रोत में json फ़ाइल का पथ उल्लेख करें।

   <script type="text/javascript" src="data.json"></script>
   <script type="text/javascript" src="javascrip.js"></script>
   

2. ऑब्जेक्ट को json फ़ाइल से प्राप्त करें

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

अधिक जानकारी के लिए, यह संदर्भ देखें ।

Comments

यह काम करता है यदि आप फ़ाइल को संशोधित कर सकते हैं, या यदि फ़ाइल में इसकी सामग्री के रूप में उचित JSON नहीं है। उदाहरण के लिए data.jsonऊपर के लिए नमूना सामग्री सत्यापन पास नहीं करती है: jsonlint.com क्योंकि यह वास्तव में जावास्क्रिप्ट है। रैपिंग सिंगल कोट्स को छोड़ने से यह शुद्ध जावास्क्रिप्ट में बदल जाएगा।

— जेसन एलर जु

नोट: JSON.parse कुछ पुराने ब्राउज़रों में समर्थित नहीं है (आपको आईई को देखते हुए)। एमडीएन के ब्राउज़र संगतता तालिकाwindow.JSON देखें ।

— सुमेर इवांस

JSON.parse (डेटा) नहीं होना चाहिए; काम नहीं क्योंकि डेटा एक स्ट्रिंग है?

— कॉल- me

यह सही जवाब नहीं है। उत्तर में उदाहरण एक json फ़ाइल लोड नहीं कर रहा है। यह वास्तव में सिर्फ एक और जावास्क्रिप्ट फ़ाइल लोड कर रहा है जो कि नाम के एक चर के रूप में कुछ हार्डकोड जोंस को स्टोर करता है data। यदि आपने स्ट्रिंग को कोसन के चारों ओर से हटा दिया है तो आपको data.json उपयोग करने की आवश्यकता नहीं होगी JSON.parse। सवाल यह है कि JSON फाइल को लोड कैसे किया जाए, JSON को किसी अन्य जावास्क्रिप्ट फ़ाइल में हार्डकोड कैसे करें और फिर इसे लोड कैसे करें।

— वूलिवोंग

JSON.parse(window.data);चर scopeकी बेहतर जानकारी प्रदान करेगा data।

— आकाश

Answer 3

.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फ़ाइलों को लोड करने के लिए भी काम करता है ।"text/html""text/plain"

Comments

यह बहुत बुरा अभ्यास है! Google Chrome में, आप स्थानीय संसाधन के लिए XmlHttpRequest नहीं बना सकते हैं।

— म्सेब

@mhaseeb आप (अभी भी, भविष्य में) कर सकते हैं, यदि संसाधन में अनुरोध प्रणाली के रूप में एक ही डोमेन / प्रोटोकॉल है (जो कि यह होगा, क्योंकि यह स्थानीय है)। कोर्स देखो।

— ग्रैसेज स्टेज

वर्तमान क्रोम के साथ इसे आज़माने पर, मुझे "क्रॉस मूल अनुरोध केवल प्रोटोकॉल योजनाओं के लिए समर्थित हैं: http, डेटा, क्रोम, क्रोम-एक्सटेंशन, https।" - तो कोई फ़ाइल प्रोटोकॉल नहीं है, जो यहां @GreySage

— eis

XMLHttpRequest.status एक संख्यात्मक मान लौटाता है। यह केवल इसलिए काम करता है क्योंकि जावास्क्रिप्ट आपके कोड को नहीं मरने के लिए पृष्ठभूमि में सामान कर रहा है। निम्नानुसार पढ़ना चाहिए: rawFile.status === 200

— user3044394

आप यह भी सेट कर सकते हैं rawFile.responseType = 'json';कि यह जोंस ऑब्जेक्ट को स्वचालित रूप से पार्स करता है, बस कॉलबैक के rawFile.responseबजाय पास करना सुनिश्चित करें rawFile.responseText।

— इग्नाट

Answer 4

जब Node.js या जब ब्राउज़र में आवश्यकता का उपयोग करते हैं । आप बस कर सकते हैं:

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

ध्यान दें: फ़ाइल एक बार भरी हुई है, बाद की कॉल कैश का उपयोग करेगी।

Comments

सच नहीं! जावास्क्रिप्ट को कोई आवश्यकता नहीं है

@PauliSudarshanTerho Thx, आप सही कह रहे हैं! उत्तर के लिए Node / requirement.js की आवश्यकताओं को जोड़ा गया।

— म्यूज़फ़ॉर्मेलन

Answer 5

1. सबसे पहले, एक json फाइल बनाएं। इस उदाहरण में मेरी फ़ाइल 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"}]

2. और यहां मेरा कोड है, यानी, नोड। जेएस। '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());

3. जब आप विशेष आईडी विवरण पढ़ना चाहते हैं तो आप कोड का उल्लेख कर सकते हैं ..

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

4. जब आप url में प्रविष्ट होते हैं तो localhost:3030/get/33यह उस आईडी से संबंधित विवरण देगा .... और आप नाम से भी पढ़ते हैं। मेरी json फ़ाइल में simillar नाम हैं इस कोड के साथ आप एक नाम विवरण प्राप्त कर सकते हैं .... और इसने सभी simillar नामों को नहीं छापा

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

5. और अगर आप simillar name details पढ़ना चाहते हैं, तो आप इस कोड का उपयोग कर सकते हैं।

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

6. अगर आप फाइल की सारी जानकारी पढ़ना चाहते हैं तो नीचे दिए गए इस कोड का उपयोग करें।

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

 }
 

Comments

कहां से () की आवश्यकता है? मेरे ब्राउज़र को यह नहीं मिल रहा है

— ०४:२० बजे ०२

आवश्यकता () बिल्ट फंक्शन है। उपयोग करने की आवश्यकता है () आप अलग-अलग फ़ाइलों में मौजूद मॉड्यूल शामिल कर सकते हैं। आवश्यकता की मूल कार्यक्षमता यह है कि यह एक जावास्क्रिप्ट फ़ाइल पढ़ता है, फ़ाइल निष्पादित करता है, और फिर निर्यात ऑब्जेक्ट को वापस करने के लिए आगे बढ़ता है

— Syes आयशा बेबे

आवश्यकता () को Node.js में बनाया गया है, यह देशी js का हिस्सा नहीं है

— dementis

यह उत्तर नहीं दिखाता है कि वेनिला जावास्क्रिप्ट का उपयोग करके किसी फ़ाइल को कैसे लोड किया जाए, लेकिन नोड्स .js

— अमोस लॉन्ग

Answer 6

Fetch API का उपयोग करना सबसे आसान उपाय है:

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

यह फ़ायरफ़ॉक्स में सही काम करता है, लेकिन क्रोम में आपको सुरक्षा सेटिंग को कस्टमाइज़ करना होगा।

Comments

जब मैं यह कोशिश करता हूं तो मुझे निम्नलिखित त्रुटि मिलती है: (नोड: 2065) UnhandledPromiseRejectionWarning: त्रुटि: केवल पूर्ण urls का समर्थन किया जाता है

— Jangid

Answer 7

पहले उल्लेख किए गए कई लोगों के अनुसार, यह 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);
});

Comments

आपने अपनी फ़ाइल के नाम पर कहां रखा है?

— ढालगेंटर

इस मामले में, उपयोगकर्ता को कॉर्स पॉलिसी के कारण फ़ाइल का चयन स्वयं करना पड़ता है, जो मूल रूप से वेब पेज के डेवलपर को डेटा को हथियाने से रोकता है जिसे वे नहीं मानते हैं (पूर्व। मैं उनकी निजी फाइलें ले सकता था, मैं एक बना सकता था। संभावित खराब स्क्रिप्ट के लिए अनुरोध करें और इसे उपयोगकर्ता की अनुमति के बिना चलाएं)। कॉर्स पॉलिसी इस तरह के सामान को बिना किसी प्रकार के बैकएंड से निपटने के लिए एक दर्द बनाती है, लेकिन यह उपयोगकर्ता को सुरक्षित बनाती है। यदि आप वास्तव में एक फ़ाइल खोलना चाहते हैं, तो आपको एक वेब सर्वर चलाना होगा जो उन अनुरोधों को प्रबंधित कर सके।

— सारा क्रॉस

Answer 8

आपके ब्राउज़र के आधार पर, आप अपनी स्थानीय फ़ाइलों तक पहुँच सकते हैं। लेकिन यह आपके ऐप के सभी उपयोगकर्ताओं के लिए काम नहीं कर सकता है।

ऐसा करने के लिए, आप यहाँ से निर्देशों को आज़मा सकते हैं: http://www.html5rocks.com/en/tutorials/file/dndfile/

आपकी फ़ाइल लोड हो जाने के बाद, आप डेटा का उपयोग करके पुनः प्राप्त कर सकते हैं:

var jsonData = JSON.parse(theTextContentOfMyFile);

Answer 9

यदि आप स्थानीय फ़ाइलों का उपयोग कर रहे हैं, तो डेटा को केवल जेएस ऑब्जेक्ट के रूप में क्यों नहीं पैक किया जाए?

data.js

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

कोई XMLHttpRequests , कोई पार्सिंग, बस MyData.resourceसीधे उपयोग करें

Comments

ठीक है, लेकिन आप जावास्क्रिप्ट का उपयोग कर सकते हैं कृपया जावास्क्रिप्ट का पूरा हिस्सा इसके उपयोग को और अधिक स्पष्ट दिखाने के लिए। धन्यवाद।

— बे

Answer 10

बहुत आसान।
अपनी json फ़ाइल को ".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"}]';

Comments

यह एक json फ़ाइल नहीं है - यह एक JS फाइल है।

— कारपिक

Answer 11

आप इसे ES6 मॉड्यूल की तरह आयात कर सकते हैं;

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

Comments

फिर आप डायनामिक जोंस फाइल को कैसे आयात कर सकते हैं? मुझे लगता है कि आप केवल json फ़ाइलों को तभी आयात कर सकते हैं जब आप अपने तरीके से विकास मोड में हों।

— डायमंड

तुम सही हो। मैंने केवल उस प्रश्न पर विचार करके उत्तर दिया।

— सेराँन C.

Answer 12

बस $ .getJSON का उपयोग करें और फिर जोड़ी कुंजी / मान को पुनरावृत्त करने के लिए $ .each का उपयोग करें। 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)
            }
        })
    });

Answer 13

आप 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();

आप कंसोल .log स्टेटमेंट (कमेंट आउट) का उपयोग करके myObj की प्रतिक्रिया देख सकते हैं।

यदि आप AngularJS जानते हैं, तो आप $ 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;
  };
}

यदि आपके पास एक अलग फ़ोल्डर में फ़ाइल है, तो फ़ाइल नाम के बजाय पूर्ण पथ का उल्लेख करें।

Answer 14

चूंकि आपके पास एक वेब एप्लिकेशन है, इसलिए आपके पास क्लाइंट और सर्वर हो सकते हैं।

यदि आपके पास केवल आपका ब्राउज़र है, और आप अपने ब्राउज़र में चल रही जावास्क्रिप्ट से एक स्थानीय फ़ाइल पढ़ना चाहते हैं, तो इसका मतलब है कि आपके पास केवल एक ग्राहक है। सुरक्षा कारणों से, ब्राउज़र को आपको ऐसा काम नहीं करने देना चाहिए।

हालांकि, जैसा कि लव ने ऊपर बताया है, यह काम करता है:

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

अन्य समाधान आपके मशीन में एक वेब सर्वर (लिनक्स में विंडोज़ या बंदर में छोटा) और XMLHttpRequest या D3 लाइब्रेरी के साथ सेटअप करने के लिए है, सर्वर से फ़ाइल का अनुरोध करें और इसे पढ़ें। सर्वर फ़ाइल को स्थानीय फ़ाइल सिस्टम से लाएगा, और इसे वेब के माध्यम से आपको प्रदान करेगा।

Answer 15

मुझे यह पसंद आया कि Stano / Meetar ने ऊपर क्या टिप्पणी की। मैं .json फ़ाइलों को पढ़ने के लिए इसका उपयोग करता हूं। मैंने प्रोमिस का उपयोग करके उनके उदाहरणों का विस्तार किया है। यहाँ उसी के लिए प्लंकर है। 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); 
       });

JSON की रीडिंग को DRY के लिए दूसरे फंक्शन में ले जाया जा सकता है; लेकिन यहाँ उदाहरण है कि वादों का उपयोग कैसे किया जाए।

Answer 16

आपको एक नया XMLHttpRequest इंस्टेंस बनाना होगा और json फाइल की सामग्री को लोड करना होगा।

मेरे लिए यह टिप काम ( https://codepen.io/KryptoniteDove/post/load-json-file-locally-use-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);
 });

Comments

अभी भी फ़ायरफ़ॉक्स पर काम करता है लेकिन क्रोम पर नहीं है Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https:। आप किसी भी JSON .JS फ़ाइल में परिवर्तित करने के लिए json2js का उपयोग कर सकते हैं ।

— लालेंगुआ

Answer 17

एक सरल उपाय यह है कि अपनी JSON फाइल को स्थानीय स्तर पर चल रहे सर्वर के अंदर डालें। इसके लिए टर्मिनल से अपने प्रोजेक्ट फोल्डर में जाएं और कुछ पोर्ट नंबर जैसे 8181 पर स्थानीय सर्वर शुरू करें

python -m SimpleHTTPServer 8181

फिर http: // localhost: 8181 / पर ब्राउज़ करके JSON सहित अपनी सभी फ़ाइलों को प्रदर्शित करना चाहिए। यदि आपके पास पहले से नहीं है तो अजगर को स्थापित करना याद रखें।

Answer 18

यदि आप एक स्थानीय वेब सर्वर चला सकते हैं (जैसा कि क्रिस पी ने ऊपर सुझाव दिया है), और यदि आप jQuery का उपयोग कर सकते हैं, तो आप http://api.jquery.com/jQuery.getJSON/ की कोशिश कर सकते हैं

Answer 19

आप कॉलबैक को संभालने के लिए डी 3 का उपयोग कर सकते हैं, और स्थानीय JSON फाइल 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>

Answer 20

मैंने स्टेनो के उत्कृष्ट उत्तर को लिया और एक वादे में लपेट दिया। यह उपयोगी हो सकता है यदि आपके पास फ़ाइल सिस्टम से एक json फ़ाइल लोड करने के लिए नोड या वेबपैक जैसा विकल्प नहीं है:

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

Answer 21

इसलिए, यदि आप अपनी JSON फाइल को होस्ट करने के लिए "Apache Tomcat" के साथ जाने की योजना बना रहे हैं,

1> सर्वर शुरू करने के बाद, सत्यापित करें कि आपका Apache Tomcat ऊपर है और इस url पर जाकर चल रहा है: "localhost: 8080" -

2> अगला, "वेबैप्स" फ़ोल्डर में जाएं - "C: \ Program Files \ Apache Software Foundation \ Tomcat 8.5 \ webapps"। और, प्रोजेक्ट फ़ोल्डर बनाएँ या अपने प्रोजेक्ट फ़ोल्डर की प्रतिलिपि बनाएँ।

3> वहां पर अपने json फाइल को पेस्ट करें।

4> और यह बात है। आप कर चुके हैं! बस - " http: // localhost: 8080 / $ project_name $ / $ jsonFile_name $ .jj" पर जाएं।

Comments

टॉमकैट सर्वर के लिए नहीं पूछा गया

— चंद्र कंठ