टाइपस्क्रिप्ट फ़ाइल में JSON फ़ाइल कैसे आयात करें?




angular google-maps (7)

मैं कोणीय मैप्स का उपयोग करके एक मानचित्र एप्लिकेशन का निर्माण कर रहा हूं और स्थानों को परिभाषित करने वाले मार्करों की एक सूची के रूप में JSON फ़ाइल आयात करना चाहता हूं। मैं इस JSON फ़ाइल को मार्कर के रूप में उपयोग करने की उम्मीद कर रहा हूँ [] app.component.ts के अंदर सरणी। टाइपस्क्रिप्ट फ़ाइल के अंदर मार्करों के हार्डकोड सरणी को परिभाषित करने के बजाय।

मेरी परियोजना में उपयोग के लिए इस JSON फ़ाइल को आयात करने की सबसे अच्छी प्रक्रिया क्या है? किसी भी दिशा में बहुत सराहना की!


Aonepathan का वन-लाइनर हाल ही में टाइपस्क्रिप्ट अपडेट होने तक मेरे लिए काम कर रहा था।

मुझे Jecelyn Yeen की post मिली जो इस स्निपेट को आपकी TS परिभाषा फ़ाइल में पोस्ट करने का सुझाव देती है

नीचे दिए गए सामग्री के साथ प्रोजेक्ट के रूट फ़ोल्डर में फ़ाइल typings.d.ts जोड़ें

declare module "*.json" {
    const value: any;
    export default value;
}

और फिर अपने डेटा को इस तरह आयात करें:

import * as data from './example.json';

जुलाई 2019 को अपडेट करें:

टाइपस्क्रिप्ट 2.9 ( docs ) ने बेहतर, बेहतर समाधान पेश किया। कदम:

  1. अपनी tsconfig.json फ़ाइल में इस लाइन के साथ resolveJsonModule समर्थन जोड़ें:
"compilerOptions": {
    ...
    "resolveJsonModule": true
  }

आयात विवरण अब एक डिफ़ॉल्ट निर्यात मानता है:

import data from './example.json';

और intellisense अब json फाइल को देखने के लिए देखेगा कि क्या आप Array आदि विधियों का उपयोग कर सकते हैं। बहुत अच्छा।


इनपुट लोगों के लिए धन्यवाद, मैं फिक्स को खोजने में सक्षम था, मैंने ऐप डॉट कॉम के शीर्ष पर json को जोड़ा और परिभाषित किया।

var json = require('./[yourFileNameHere].json');

यह अंततः मार्करों का उत्पादन किया और कोड की एक सरल रेखा है।


कोणीय 7+ के लिए,

1) प्रोजेक्ट के रूट फोल्डर में एक फ़ाइल "टाइपिंग ..dts" जोड़ें (जैसे, src / typings.d.ts):

declare module "*.json" {
    const value: any;
    export default value;
}

2) आयात और JSON डेटा तक पहुँच या तो:

import * as data from 'path/to/jsonData/example.json';
...
export class ExampleComponent {
    constructor() {
        console.log(data.default);
    }

}

या:

import data from 'path/to/jsonData/example.json';
...
export class ExampleComponent {
    constructor() {
        console.log(data);
    }

}

जैसा कि इस reddit पोस्ट में कहा गया है, Angular 7 के बाद, आप इन 2 चरणों में चीजों को सरल बना सकते हैं:

  1. उन तीन पंक्तियों को अपनी tsconfig.json फ़ाइल में compilerOptions में जोड़ें:
"resolveJsonModule": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
  1. अपना json डेटा आयात करें:
import myData from '../assets/data/my-data.json';

और बस। अब आप अपने घटकों / सेवाओं में myData का उपयोग कर सकते हैं।


यहाँ पर Angular 6+ का पूरा उत्तर @ryanrain उत्तर के आधार पर दिया गया है:

कोणीय-क्लि डॉक से , json को संपत्ति माना जा सकता है और अजाक्स अनुरोध के उपयोग के बिना मानक आयात से पहुँचा जा सकता है।

मान लीजिए कि आप अपनी जसन फ़ाइलों को "your-json-dir" निर्देशिका में शामिल करते हैं:

  1. "your-json-dir" को angular.json फ़ाइल में जोड़ें (:

    "assets": [ "src/assets", "src/your-json-dir" ]

  2. बनाने के लिए या टाइप करें editings.d.ts फ़ाइल (अपने प्रोजेक्ट रूट पर) और निम्नलिखित सामग्री जोड़ें:

    declare module "*.json" { const value: any; export default value; }

    यह टाइपस्क्रिप्ट त्रुटि के बिना ".json" मॉड्यूल के आयात की अनुमति देगा।

  3. अपने नियंत्रक / सेवा / कुछ और फ़ाइल में, बस इस रिश्तेदार पथ का उपयोग करके फ़ाइल आयात करें:

    import * as myJson from 'your-json-dir/your-json-file.json';


टाइपस्क्रिप्ट 2.9 के रूप में, एक बस जोड़ सकते हैं:

"compilerOptions": {
    "resolveJsonModule": true
}

tsconfig.json । इसके बाद, एक json फ़ाइल का उपयोग करना आसान है ( और VSCode में अच्छा प्रकार का अनुमान भी होगा):

data.json :

{
    "cases": [
        {
            "foo": "bar"
        }
    ]
}

आपकी टाइपस्क्रिप्ट फ़ाइल में:

import { cases } from './data.json';


let fs = require('fs');
let markers;
fs.readFile('./markers.json', handleJSONFile);

var handleJSONFile = function (err, data) {
   if (err) {
      throw err;
   }
   markers= JSON.parse(data);
 }





maps