स्थानीय JSON फ़ाइल लोड हो रही है

Question

मैं एक स्थानीय JSON फ़ाइल लोड करने की कोशिश कर रहा हूं, लेकिन यह काम नहीं करेगा। यहाँ मेरा जावास्क्रिप्ट कोड है (jQuery का उपयोग करके:

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

Test.json फ़ाइल:

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

कुछ भी प्रदर्शित नहीं होता है और फायरबग मुझे बताता है कि डेटा अपरिभाषित है। फायरबग में मैं देख सकता हूं json.responseTextऔर यह अच्छा और वैध है, लेकिन जब मैं रेखा की नकल करता हूं तो यह अजीब होता है:

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

फायरबग के कंसोल में, यह काम करता है और मैं डेटा एक्सेस कर सकता हूं।

किसी के पास कोई हल है?

Comments

जब आप एक JSONस्ट्रिंग वापस करते हैं तो आप पहले से ही एक जावास्क्रिप्ट ऑब्जेक्ट प्राप्त कर रहे हैं, उपयोग करने की कोई आवश्यकता नहीं है eval()।

— योदा

आप "स्थानीय" json फ़ाइल को क्या कहते हैं? ब्राउज़र या सर्वर पर स्थानीय?

— seppo0010

आपने हमें पर्याप्त विवरण नहीं दिया है। फ़ाइल test.jsonकिसी भी पथ को निर्दिष्ट नहीं करती है इसलिए यह एक सापेक्ष URI है, जो उस तक पहुँचने वाले पृष्ठ के स्थान के सापेक्ष है। तो जैसे @ seppo0010 यह कहता है कि यह सर्वर के लिए स्थानीय होगा यदि पृष्ठ कहीं दूरस्थ सर्वर पर है और यह आपके कंप्यूटर के सापेक्ष होगा यदि पृष्ठ आपके स्थानीय फाइल सिस्टम में file://प्रोटोकॉल द्वारा एक्सेस किया गया हो ।

— हिप्पिएट्रेल

Answer 1

$.getJSON अतुल्यकालिक है इसलिए आपको ऐसा करना चाहिए:

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

Comments

क्या आपको वास्तव में स्थानीय फ़ाइल तक पहुंचने की अनुमति है?

— माशा

नहीं, यह फ़ाइल नहीं हो सकती है लेकिन वेब सर्वर द्वारा दी जानी चाहिए।

— क्रिश एरिकसन

बिलकुल सही। क्रोम की सुरक्षा फ़ायरफ़ॉक्स या अन्य की तुलना में बहुत तंग है। Xhr, Josn, Xml आदि का उपयोग करके कुछ भी लोड कर रहा है, क्रोम में एक या दो चीजों के अपवाद के साथ बहुत अधिक बंद है।

— shawty

मैंने यह कोशिश की, लेकिन कोई किस्मत नहीं। सांत्वना में कोई त्रुटि नहीं :(

— गोविंद कैलास

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

— केमिकल प्रोग्रामर

Answer 2

मुझे एक ही ज़रूरत थी (अपने एंगुलरज एप्लिकेशन का परीक्षण करने के लिए), और मुझे जो एकमात्र तरीका मिला वह आवश्यकता के अनुसार उपयोग करने का है। जेएस:

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

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

नोडज के साथ फाइल पढ़ने पर अधिक: http://docs.nodejitsu.com/articles/file-system/how-to-read-files-in-nodejs

आवश्यकता.जेएस: http://requirejs.org/

Comments

यदि आप ऐसा जेस्ट के साथ कर रहे हैं, तो करना याद रखें jest.dontMock('./data.json');अन्यथा परिणाम खाली है। वहाँ किसी के लिए उपयोगी हो सकता है :)

— होवर गेथस

इस कोड का संदर्भ क्या है? क्या आप के साथ क्या करते हो json?

— द्राज़ेन बेज़ेलोवुक

कृपया पूर्ण उदाहरण प्रदान करें: मुझे त्रुटि मिल रही है:has not been loaded yet for context: _. Use require([])

— shaijut

आवश्यकता ब्राउज़र पर काम नहीं कर रही है क्योंकि यह नोड.जेएस मॉड्यूल है। अगर ओपी इसे ब्राउज़र में लोड करना चाहता है, तो उसे सही समाधान प्राप्त करना चाहिए।

— सूँघने के लिए

हां, आवश्यकता नोड के लिए है, लेकिन आवश्यकता है किJJS का उपयोग ब्राउज़रों में भी किया जा सकता है: "RequJS एक जावास्क्रिप्ट फ़ाइल और मॉड्यूल लोडर है। यह ब्राउज़र उपयोग के लिए अनुकूलित है, लेकिन इसे अन्य जावास्क्रिप्ट वातावरणों में इस्तेमाल किया जा सकता है, जैसे राइनो और नोड। "

— प्रति क्वेस्ट एरॉनसन

Answer 3

अधिक आधुनिक तरीके से, अब आप Fetch API का उपयोग कर सकते हैं :

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

सभी आधुनिक ब्राउज़र Fetch API का समर्थन करते हैं। (इंटरनेट एक्सप्लोरर नहीं करता है, लेकिन एज करता है!)

स्रोत:

• फ़ेच का उपयोग करना

• कार्रवाई में प्राप्त करें

• क्या में उपयोग कर सकता हूँ...?

Comments

Fetch API का उपयोग करते समय, क्या आपको तब भी स्थानीय फ़ाइलों का उपयोग करने से मना किया जाता है, जब तक कि आप सुरक्षा सेटिंग को अक्षम नहीं करते हैं?

— लार्स

@ लार्स जाहिरा तौर पर हाँ, मैंने आज सुबह इसकी कोशिश की और एपीसी फ़ाइल / योजना के साथ स्थानीय जोंस फाइल को पढ़ने में असमर्थ है। यह दृष्टिकोण बहुत साफ दिखता है, लेकिन आप इसे स्थानीय फ़ाइलों के लिए उपयोग नहीं कर सकते हैं

— कीज़ल

@keysl ठीक है, मुझे लगता है कि सुरक्षा कारणों से शायद ऐसा ही होना चाहिए। (और आप सही हैं, मेरा मतलब है " file://योजना के माध्यम से फ़ाइलों को एक्सेस करने से मना किया गया है।) लेकिन यह एक अच्छा स्वच्छ दृष्टिकोण है। मैंने इस उत्तर के लिए इसका उपयोग करना शुरू कर दिया है।

— लार्स

आप

— भ्रूण

Answer 4

यदि आप उपयोगकर्ता को स्थानीय जोंस फाइल (फाइलसिस्टम पर कहीं भी) का चयन करने देना चाहते हैं, तो निम्न समाधान काम करता है।

यह FileReader और JSON.parser (और कोई jquery) का उपयोग करता है।

<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>

यहाँ FileReader पर एक अच्छा परिचय है: http://www.html5rocks.com/en/tutorials/file/dndfile/

Comments

FileReader एपीआई IE 8 या 9 में समर्थित नहीं है, लेकिन अन्य सभी ब्राउज़र ठीक हैं: caniuse.com/#search=filereader

— Northben

यह Chrome में सही काम करता है, आप अपना डेटाnewArr

— Belter

यह उत्तर अच्छा है और थोड़ा अलग है क्योंकि इसका उपयोग jQuery नहीं है।

— DigitalDesignDj

Answer 5

यदि आप कुछ त्वरित और गंदे की तलाश कर रहे हैं तो बस अपने HTML दस्तावेज़ के सिर में डेटा लोड करें।

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

मुझे यह उल्लेख करना चाहिए कि आपका ढेर का आकार (क्रोम में) लगभग 4GB है, इसलिए यदि आपका डेटा इससे बड़ा है तो आपको दूसरी विधि ढूंढनी चाहिए। यदि आप किसी अन्य ब्राउज़र को जांचना चाहते हैं, तो यह कोशिश करें:

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

Comments

आप सही हैं कि एएमडी काम करेगा लेकिन मुझे नहीं लगता कि एएमडी यहां सही समाधान है। सबसे सरल $ .getJSON का उपयोग करना है। धन्यवाद

— पैट्रिक ब्राउन

@PatrickBrowne हाँ, getJSON एक अच्छा समाधान है, लेकिन मुझे लगता है कि कई मामलों में आप क्रॉस-डोमेन समस्या में चलाने जा रहे हैं (उदाहरण के लिए S3 से डेटा लोड करना)।

— जेवर में

मुझे यह मेरे लिए सबसे सरल उपाय लगा। JSON फ़ाइल लगभग समान दिखती है, इसलिए कोई अतिरिक्त अव्यवस्था (केवल फ़ाइल के शीर्ष पर "var xyz =" नहीं है)। कोई भी अपने कोड में एक बड़ी डेटा फ़ाइल नहीं चाहता है।

— cslotty

यह कई स्तरों पर गलत है, मुझे समझ में नहीं आता है कि इसमें कितने वोट हैं, यहां यह अधिक समझाता है कि अगर कोई कोडपेन.io/KryptoniteDove/post/… देखना चाहता है तो "कई उदाहरण इस बात का प्रमाण देंगे कि आप डेटा का उपयोग कर सकते हैं सरल फ़ंक्शन जैसे नीचे एक। वास्तव में, यह वास्तव में एक JSON दस्तावेज़ लोड नहीं कर रहा है, बल्कि एक जावास्क्रिप्ट ऑब्जेक्ट बना रहा है। यह तकनीक सही JSON फ़ाइलों के लिए काम नहीं करेगी। "

— lesolorzanov

ईमानदारी से, यह एक महान समाधान है यदि आपके पास कुछ पूर्व-डिब्बाबंद डेटा है और आप एक स्थैतिक पृष्ठ की सेवा करना चाहते हैं

— इवान पु

Answer 6

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

Comments

@ यदि आप एक स्थानीय एप्लिकेशन सर्वर का उपयोग करते हैं, जैसे कि टॉमकैट या एक्समप या जेबॉस। पटकथा का काम

— मिरको सियानफारानी

@MirkoCianfarani वास्तव में क्योंकि आप file:///प्रोटोकॉल का उपयोग नहीं कर रहे हैं और फ़ाइल को अब स्थानीय नहीं माना जा सकता है।

— पियर

@xgqfrms Fetch API कमाल का है!

— xgqfrms 17:16 पर

//xobj.status पूर्णांक xobj.status === "200" होना चाहिए xobj.status === 200

— yausername

@ आपका नाम सही है, मुझे उस त्रुटि प्रकार के लिए खेद है, और इसे ठीक कर दिया गया था।

— xgqfrms

Answer 7

मैं विश्वास नहीं कर सकता कि मूल पोस्टर के वास्तविक कोड के साथ समस्या को समझने और / या संबोधित किए बिना कितनी बार इस प्रश्न का उत्तर दिया गया है। उस ने कहा, मैं खुद एक शुरुआत हूं (केवल 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); 

अंत में, ऐसा करने का अंतिम तरीका एक फ़ंक्शन में $ .ajax को लपेटना है। मैं इसका श्रेय नहीं ले सकता, लेकिन मैंने इसे थोड़ा संशोधित किया। मैंने इसका परीक्षण किया और यह मेरे कोड के समान ही परिणाम देता है। मुझे यह समाधान यहां मिला -> जर्सन को चर में लोड करें

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

आपके द्वारा ऊपर दिए गए मेरे कोड में दिखाई देने वाली test.json फ़ाइल को मेरे सर्वर पर होस्ट किया गया है और इसमें वही जोंस डेटा ऑब्जेक्ट है जो उसने (मूल पोस्टर) पोस्ट किया था।

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

Answer 8

मुझे आश्चर्य है कि es6 से आयात का उल्लेख नहीं किया गया है (छोटी फ़ाइलों के साथ उपयोग करें)

उदाहरण के लिए: import test from './test.json'

webpack 2 < फ़ाइलों के json-loaderलिए डिफ़ॉल्ट के रूप में उपयोग करता है .json।

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

के लिए टाइपप्रति :

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

TS2307 (TS) मॉड्यूल को 'json-loader !// suburbs.json' नहीं मिल सकता है

इसे काम करने के लिए मुझे पहले मॉड्यूल की घोषणा करनी थी। मुझे उम्मीद है कि यह किसी के लिए कुछ घंटे बचाएगा।

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

...

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

अगर मैं छोड़ करने की कोशिश की loaderसे json-loaderमैं से निम्न त्रुटि मिल गया webpack:

ब्रेकिंग चेंज: लोडर का उपयोग करते समय इसे '-लोडर' प्रत्यय को छोड़ने की अनुमति नहीं है। आपको 'json' के स्थान पर 'json-loader' निर्दिष्ट करने की आवश्यकता है, https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed देखें

Comments

आसान और सीधा।

— Our_Benefactors

जब वेबपेज फ़ाइल: प्रोटोकॉल के साथ लोड किया जाता है तो आप es6 आयात स्टेटमेंट का उपयोग नहीं कर सकते।

— ओनो वैन डेर ज़ी

Answer 9

कोशिश इस तरह से है (लेकिन यह भी ध्यान रखें कि जावास्क्रिप्ट का क्लाइंट फ़ाइल सिस्टम तक पहुँच नहीं है):

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

Answer 10

हाल ही में D3js स्थानीय json फ़ाइल को संभालने में सक्षम है।

यह मुद्दा है https://github.com/mbostock/d3/issues/673

यह स्थानीय json फ़ाइलों के साथ काम करने के लिए D3 के लिए पैच इनवर्टर है। https://github.com/mbostock/d3/pull/632

Comments

इस उत्तर को json फ़ाइलों को पढ़ने के लिए डी 3 का उपयोग करने के तरीके के साथ बहुत सुधार किया जाएगा।

— पॉल एच

Answer 11

स्थानीय थ्रेड फ़ाइल लोड करने का प्रयास करते समय (असफल) यह थ्रेड मिला। इस समाधान ने मेरे लिए काम किया ...

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>

Comments

यह बहुत पुन: प्रयोज्य नहीं लगता है। उदाहरण के लिए, यदि json फाइल एक रिमोट सर्वर द्वारा दी जाती है, तो लोड के लिए 100ms का समय पर्याप्त नहीं हो सकता है। और जैसा कि समय क्लाइंट की कनेक्शन गति पर निर्भर करता है, आपको धीमे कनेक्शन वाले ग्राहकों के लिए बहुत लंबा समय निर्धारित करना होगा। संक्षेप में, संसाधन के लोड होने की प्रतीक्षा करने के लिए सेटटाइमआउट का उपयोग नहीं किया जाना चाहिए।

— केनी 806

केनी806 - यह एक विशिष्ट समस्या को हल करने के लिए है - स्थानीय संसाधनों को लोड करना (गैर-होस्ट किए गए वेब पेज के लिए), इसलिए इसका मतलब यह बहुत पुन: प्रयोज्य नहीं है। वेब-होस्ट किए गए पृष्ठों के लिए संसाधन लोडिंग समाधान के 1000 हैं। यह नहीं है , समाधान यह है एक समाधान। टाइमआउट को बदलना वास्तव में सरल है। टाइमआउट निकालकर, क्या आप सुझाव दे रहे हैं कि एक अनंत प्रतीक्षा स्वीकार्य है?

— टेकस्पॉड

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

— केनी806

इस स्क्रिप्ट का उपयोग करने वाले किसी भी व्यक्ति को अपनी स्क्रिप्ट के आधार के रूप में उपयोग करना चाहिए । आप अपनी राय के हकदार हैं कि क्या यह स्क्रिप्ट गलत है। वैकल्पिक समाधान का सुझाव क्यों नहीं दिया गया? यह निश्चित रूप से सभी उपयोग के मामलों के लिए काम नहीं करेगा। यह मेरे लिए काम करता है, एक स्थानीय HTML पृष्ठ से एक स्थानीय फ़ाइल लोड करना। मैंने इस सवाल पर अपना समाधान साझा किया, इस उम्मीद में कि यह किसी और की मदद करेगा। क्या आप स्थानीय संसाधन लोड करने का प्रयास कर रहे हैं? आप जिस फ़ाइल को लोड कर रहे हैं, उसके आधार पर एक चर के रूप में टाइमआउट मान में पास क्यों नहीं? स्थानीय फ़ाइलों पर अजाक्स बहुत सीमित है।

— टेकस्पॉड

आप onreadystatechange या onload का उपयोग करके और उन्हें एक फंक्शन देने से बेहतर हो सकते हैं। script.onload = functionname;

— शेन बेस्ट

Answer 12

टाइपस्क्रिप्ट में आप स्थानीय JSON फ़ाइलों को लोड करने के लिए आयात का उपयोग कर सकते हैं। उदाहरण के लिए font.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/typescript-2-9.html

Comments

अधिक विवरण के साथ लिख सकते हैं क्योंकि उत्तर थोड़ा स्पष्ट रूप से समझ में आता है।

— बे

Answer 13

कोणीय (या किसी भी अन्य ढांचे) में, आप http का उपयोग करके लोड कर सकते हैं I इसे कुछ इस तरह से उपयोग करें:

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

उम्मीद है की यह मदद करेगा।

Answer 14

मैंने जो किया वह JSON फ़ाइल को थोड़ा कम संपादित कर रहा था।

myfile.json => myfile.js

JSON फ़ाइल में, (इसे JS वेरिएबल बनाएं)

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

अतं मै,

export default x;

फिर,

import JsonObj from './myfile.js';

Answer 15

यदि आप JSON के लिए एक स्थानीय सरणी का उपयोग कर रहे हैं - जैसा कि आपने प्रश्न (test.json) में अपने उदाहरण में दिखाया है, तो आप parseJSON()JQuery की विधि है ->

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

getJSON() JSON को दूरस्थ साइट से प्राप्त करने के लिए उपयोग किया जाता है - यह स्थानीय रूप से काम नहीं करेगा (जब तक कि आप स्थानीय HTTP सर्वर का उपयोग नहीं कर रहे हैं)

Answer 16

$.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_);
                      }
                 });


             }
  });

Answer 17

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

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

इसके बाद, लौटे JSON को रखने के लिए अपनी स्क्रिप्ट में वैश्विक स्कोप के साथ एक पुन: प्रयोज्य चर बनाएं। यह केवल कॉलबैक फ़ंक्शन के बजाय आपकी स्क्रिप्ट में दिए गए अन्य JSON डेटा को आपकी स्क्रिप्ट में उपलब्ध कराएगा।

var myJSON;

इसके बाद स्क्रिप्ट इंजेक्शन द्वारा आपके जसन को पुनः प्राप्त करने के लिए एक सरल कार्य किया जाता है। ध्यान दें कि हम jQuery का उपयोग दस्तावेज़ हेड को स्क्रिप्ट को जोड़ने के लिए नहीं कर सकते हैं, क्योंकि IE j.append विधि का समर्थन नहीं करता है। नीचे दिए गए कोड में टिप्पणी की गई 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)
}

अगला एक छोटा और सरल कॉलबैक फ़ंक्शन है (जिस नाम के साथ एक ही नाम है, jsonp आवरण) जो कि वैश्विक परिणाम में json परिणाम डेटा प्राप्त करता है।

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

Json डेटा अब डॉट नोटेशन का उपयोग करके स्क्रिप्ट के किसी भी कार्य द्वारा पहुँचा जा सकता है। उदहारण के लिए:

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

यह तरीका थोड़ा अलग हो सकता है जो आप देखने के अभ्यस्त हैं, लेकिन इसके कई फायदे हैं। सबसे पहले, एक ही jsonp फ़ाइल को स्थानीय रूप से या सर्वर से समान फ़ंक्शन का उपयोग करके लोड किया जा सकता है। एक बोनस के रूप में, jsonp पहले से ही एक क्रॉस-डोमेन फ्रेंडली प्रारूप में है और इसे REST प्रकार API के साथ आसानी से उपयोग किया जा सकता है।

दी, कोई त्रुटि से निपटने वाले कार्य नहीं हैं, लेकिन आपको एक की आवश्यकता क्यों होगी? यदि आप इस विधि का उपयोग करके json डेटा प्राप्त करने में असमर्थ हैं, तो आप बहुत अधिक शर्त लगा सकते हैं कि आपको json के भीतर कुछ समस्याएँ हैं, और मैं इसे एक अच्छे JSON सत्यापनकर्ता पर जाँचूँगा।

Answer 18

आप अपने json को जावास्क्रिप्ट फ़ाइल में रख सकते हैं। इसे jQuery के getScript()फ़ंक्शन का उपयोग करके स्थानीय रूप से (क्रोम में भी) लोड किया जा सकता है ।

नक्शा- 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

ध्यान दें कि js चर को js फ़ाइल में घोषित और नियत किया गया है।

Answer 19

मुझे Google की बंद लाइब्रेरी का उपयोग करके कोई समाधान नहीं मिला है। तो बस भविष्य के इतिहासकारों के लिए सूची को पूरा करने के लिए, यहां बताया गया है कि आप क्लोज लाइब्रेरी के साथ स्थानीय फ़ाइल से JSON कैसे लोड करते हैं:

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

Answer 20

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

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

मैंने अपने कॉर्डोबा ऐप के लिए ऐसा किया, जैसे मैंने JSON के लिए एक नई जावास्क्रिप्ट फ़ाइल बनाई और JSON डेटा को String.rawफिर से पार्स किया।JSON.parse

Comments

यदि यह एक जावास्क्रिप्ट फ़ाइल है, तो एक ऑब्जेक्ट को ऐसा क्यों करें और बस JavaScript Object Notation(JSON) का उपयोग न करें : obj = [{"name": "Jeeva"}, {"name": "Kumar"}]

— Nuno André

मैंने इसका उपयोग किया, मैंने ajax का उपयोग करते हुए कुछ जसन डेटा प्राप्त किया, जो स्ट्रिंग के रूप में आया था, इसलिए मैं JSON.parseएक जावास्क्रिप्ट ऑब्जेक्ट में परिवर्तित करने के लिए उपयोग करता हूं

— जीव

Answer 21

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

मैंने जो कुछ भी किया था, सबसे पहले, नेटवर्क टैब से, सेवा के लिए नेटवर्क ट्रैफ़िक रिकॉर्ड करें, और प्रतिक्रिया बॉडी से, स्थानीय फ़ाइल में जोंस ऑब्जेक्ट को कॉपी और सेव करें। फिर फ़ंक्शन को स्थानीय फ़ाइल नाम के साथ कॉल करें, आपको ऊपर jsonOutout में json ऑब्जेक्ट देखने में सक्षम होना चाहिए।

Comments

कृपया कोड को चिपकाने के बजाय अपना समाधान बताएं। केवल एक समाधान यह बताते हुए कि इसने समस्या को कैसे हल किया, इससे समुदाय को मदद मिलेगी।

— gmuraleekrishna

नोट: InternetExplorer

— Sancarn

Answer 22

मेरे लिए क्या काम निम्नलिखित है:

इनपुट:

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>

Answer 23

यदि आपके पास अपने स्थानीय मशीन पर पायथन स्थापित किया गया है (या आप किसी को स्थापित करने में कोई आपत्ति नहीं करते हैं), तो मैं स्थानीय JSON फ़ाइल एक्सेस समस्या के लिए एक ब्राउज़र-स्वतंत्र वर्कअराउंड है जो मैं उपयोग करता हूं:

जावास्क्रिप्ट फ़ंक्शन के रूप में डेटा लौटाने वाले फ़ंक्शन को बनाकर JSON फ़ाइल को जावास्क्रिप्ट में ट्रांसफ़ॉर्म करें। फिर आप इसे <script> टैग के साथ लोड कर सकते हैं और फ़ंक्शन को कॉल कर सकते हैं ताकि आप जो डेटा चाहते हैं।

यहां पायथन कोड आता है

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]')