स्थानीय JSON फ़ाइल को चर में लोड करें

Question

मैं जावास्क्रिप्ट में एक -json फ़ाइल को एक चर में लोड करने की कोशिश कर रहा हूं, लेकिन मुझे यह काम करने के लिए नहीं मिल सकता है। यह शायद सिर्फ एक छोटी सी त्रुटि है, लेकिन मुझे यह नहीं मिल रहा है।

सब कुछ ठीक काम करता है जब मैं इस तरह स्थिर डेटा का उपयोग करता हूं:

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

मैंने वह सब कुछ रखा है जो {}एक content.jsonफ़ाइल में है और जिसे स्थानीय जावास्क्रिप्ट चर में लोड करने की कोशिश की गई है जैसा कि यहाँ बताया गया है: जसन को चर में लोड करें ।

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

मैंने इसे क्रोम डीबगर के साथ चलाया और यह हमेशा मुझे बताता है कि चर jsonका मान है null। content.json.Js फ़ाइल है कि यह कॉल उसी निर्देशिका में फ़ाइल बसता था।

मुझसे क्या छूट गया?

Comments

आपकी फ़ाइल url /content.jsonजिसका अर्थ है कि फ़ाइल आपके वेब ऐप के रूट स्तर पर है। इसे content.json(स्लैश के बिना) उसी निर्देशिका में इंगित करने के लिए बदलें जहां आपकी स्क्रिप्ट फ़ाइल रखी गई है। केवल तभी यदि आपकी स्क्रिप्ट फ़ाइल रूट लेवल डायरेक्टरी में है, यह काम करेगी।

— सामीच

फ़ाइल WebContent \ jit \ content.json में रहती है .. मैंने 'url' आज़माया: "/WebContent/jit/content.json", लेकिन फिर भी चर शून्य है

— PogoMips

Answer 1

यदि आपने अपनी वस्तु को content.jsonसीधे पेस्ट किया है, तो यह JSON अमान्य है। JSON कुंजियों और मूल्यों को दोहरे उद्धरण चिह्नों ( "नहीं ') में लपेटा जाना चाहिए, जब तक कि मूल्य संख्यात्मक, बूलियन null, या समग्र (सरणी या ऑब्जेक्ट) नहीं है। JSON में फ़ंक्शंस या undefinedमान नहीं हो सकते । नीचे आपकी वस्तु वैध JSON के रूप में है।

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

आपके पास एक अतिरिक्त भी था }।

Comments

मुझे विश्वास नहीं हो रहा है कि इसे तय किया गया है। यह सीधे दोहरे शब्दों के बिना .js फ़ाइल में एम्बेडेड काम क्यों करेगा, लेकिन .json फ़ाइल में नहीं? इसका कोई मतलब नहीं है ...

— PogoMips

@ user1695165 - json और javascript ऑब्जेक्ट दो अलग-अलग चीजें हैं, वे बस एक जैसी दिखती हैं।

— एडेनो

@ केविन बी "... जब तक कि मूल्य संख्यात्मक [या बूलियन] नहीं है।"

— जैकब ब्यूचैम्प

बस एक टिप: आप अपने डेटा को उपयोग करने से पहले अपने json डेटा की जांच करने के लिए jsonlint.com जैसे json सत्यापनकर्ता का उपयोग कर सकते हैं ।

— मार्को पानिची

Answer 2

मेरा समाधान, जैसा कि यहां बताया गया है , इसका उपयोग करना है:

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

फ़ाइल केवल एक बार भरी हुई है, आगे अनुरोध कैश का उपयोग करते हैं।

संपादित बचने कैशिंग के लिए, यहाँ से सहायक समारोह है इस ब्लॉग पोस्ट टिप्पणी में दिया जाता है, का उपयोग कर fsमॉड्यूल:

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

Comments

बस यह निर्दिष्ट करना चाहता था कि इस समाधान के लिए एक अतिरिक्त पुस्तकालय की आवश्यकता है जिसका नाम है आवश्यकता ।

— लुइस काबोंगो

कैशिंग से कैसे बचें?

— नोनो

गुइलहर्मे Oenning के अनुसार नहीं सुझाया गया goenning.net/2016/04/14/stop-reading-json-files-with-require

— Sangimed

TLDR; कैशिंग ने उसे इकाई परीक्षणों में मारा और इसलिए वह कैशिंग से बचने के लिए एक सहायक कार्य करता है (@ pingo @)।

— एहविंस

@ ईव्सन ओह मैंने ध्यान नहीं दिया क्योंकि मैंने पूरा लेख नहीं पढ़ा है। धन्यवाद :-)

— संगम किया

Answer 3

ES6 / ES2015 के लिए आप सीधे आयात कर सकते हैं जैसे:

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


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

यदि आप टाइपस्क्रिप्ट का उपयोग करते हैं, तो आप जैसन मॉड्यूल की घोषणा कर सकते हैं जैसे:

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

चूंकि टाइपस्क्रिप्ट 2.9+ में आप जोड़ सकते हैं - solutionJsonModule संकलकtsconfig.json

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

Comments

आयात क्रोम v72 में काम नहीं कर रहा है - फिर भीUncaught SyntaxError: Unexpected token *

— 1000Gbps

जब मैं इसका उपयोग करता हूं, तो ऐसा लगता dataहै कि यह एक मॉड्यूल है, लेकिन data.defaultवस्तु है

— डस्टिन मिशेल्स

मैं इसे कंसोल में चलाने की कोशिश कर रहा था, लेकिन बिना सफलता के। यह नोड v12.4.0 के साथ काम नहीं करता है, बेबल-नोड 6.26.0 के साथ। मैं हमेशा मिलता हैSyntaxError: Unexpected token *

— mario199

ES6 / ES2015 के लिए आप सीधे आयात कर सकते हैं: ऐसा लगता है कि मुझे import * as data from './example.json'एक माइम प्रकार की त्रुटि के कारण कंसोल कंसोल त्रुटि मिलती है ।

— फालीनरेपर

अगर मैं उपयोग करता हूं import * as data from './example.json';तो dataसिर्फ मॉड्यूल है, लेकिन data.defaultवस्तु है। लेकिन जब मैं उपयोग करता हूं import data from './example.json';तब dataवह वस्तु होती है, जो अधिक प्रयोग करने योग्य होती है

— नेल

Answer 4

दो संभावित समस्याएं हैं:

1. AJAX अतुल्यकालिक है, इसलिए jsonजब आप बाहरी फ़ंक्शन से लौटते हैं तो अपरिभाषित होंगे। जब फ़ाइल लोड हो गई है, तो कॉलबैक फ़ंक्शन jsonकुछ मान पर सेट हो जाएगा , लेकिन उस समय, कोई भी परवाह नहीं करता है।

   मैं देख रहा हूं कि आपने इसे ठीक करने की कोशिश की 'async': false। यह जाँचने के लिए कि क्या यह काम करता है, इस पंक्ति को कोड में जोड़ें और अपने ब्राउज़र के कंसोल की जाँच करें:

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

2. रास्ता गलत हो सकता है। एचटीएमएल दस्तावेज़ में अपनी स्क्रिप्ट लोड करने के लिए उसी पथ का उपयोग करें। तो अगर आपकी स्क्रिप्ट है js/script.js, का उपयोग करेंjs/content.json

   कुछ ब्राउज़र आपको दिखा सकते हैं कि उन्होंने किस URL को एक्सेस करने की कोशिश की और कैसे गए (सफलता / त्रुटि कोड, HTML हेडर इत्यादि)। क्या होता है यह देखने के लिए अपने ब्राउज़र के विकास टूल की जाँच करें।

Comments

शायद jquery का उसका संस्करण इसका समर्थन नहीं करता, फिर भी? मैंने शब्दांकन में सुधार किया है।

— एरोन दिगुल्ला

Answer 5

बिल्ट-इन नोड.जेएस मॉड्यूल एफएस आपकी आवश्यकताओं के आधार पर इसे या तो अतुल्यकालिक या सिंक्रोनाइज़ करेगा।

आप इसका उपयोग करके लोड कर सकते हैं var fs = require('fs');

अतुल्यकालिक

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

एक समय का

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

Answer 6

फ़ाइल के रूप में दिए गए json प्रारूप के लिए ~ / my-app / src / db / abc.json:

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

.js फ़ाइल को ~ / my-app / src / app.js जैसे आयात करने के लिए इनवर्टर:

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

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

 export default Arena;

आउटपुट:

Ankit Aditi Avani

Comments

यह एक सवाल का जवाब है जो यहां नहीं पूछा गया है।

— केविन बी

मेरे स्पष्टीकरण के अनुसार @ केविनबी, मैंने .js फ़ाइल को .json फ़ाइल आयात किया। इससे मुझे json-file को const json में लोड करने में मदद मिली। यहां से, मैं उपयोगकर्ता विशेषताओं और इतने पर निम्नलिखित json शब्दकोश का उपयोग करने में सक्षम हूं।

— अंक_ २४। एसबीएम

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

— केविन बी

नोट के रूप में: अन्य सभी उत्तरों पर इस उत्तर से जोड़ने वाली टिप्पणियों को पोस्ट करना अत्यधिक आत्म-प्रचार माना जा सकता है, और उत्तरों को संपादित करने का प्रयास बर्बरता है। आपकी टिप्पणियां हटा दी गई हैं, और कृपया फिर से इस तरह के संपादन न करें।

— ब्रैड लार्सन

धन्यवाद मेरे लिए बहुत अच्छा है!

— क्यूई-गॉन जिन