json - কীভাবে কোনও টাইপস্ক্রিপ্ট ফাইলটিতে জেএসএন ফাইল আমদানি করবেন?




angular google-maps (7)

আমি কৌণিক মানচিত্র ব্যবহার করে একটি মানচিত্র অ্যাপ্লিকেশন তৈরি করছি এবং অবস্থানগুলি সংজ্ঞায়িতকারী চিহ্নিতকারীদের তালিকা হিসাবে একটি JSON ফাইল আমদানি করতে চাই। আমি আশা করছি এই JSON ফাইলটি অ্যাপ.কম্পন্টনাল্টস.এস.টির ভিতরে [] অ্যারের হিসাবে চিহ্নিত করুন। টাইপস্ক্রিপ্ট ফাইলের মধ্যে চিহ্নিতকারীদের একটি হার্ডকোডযুক্ত অ্যারের সংজ্ঞা দেওয়ার পরিবর্তে।

আমার প্রকল্পে ব্যবহারের জন্য এই JSON ফাইলটি আমদানির সেরা প্রক্রিয়াটি কী? কোন দিক প্রশংসা!


@Ryanrain উত্তরের উপর ভিত্তি করে কৌনিক 6+ এর সম্পূর্ণ উত্তর এখানে রয়েছে:

কৌণিক-ক্লাইয়ে ডক থেকে , জসনকে সম্পদ হিসাবে বিবেচনা করা যেতে পারে এবং এজাক্স অনুরোধ ব্যবহার না করে স্ট্যান্ডার্ড আমদানি থেকে অ্যাক্সেস করা যেতে পারে।

ধরা যাক আপনি "json-dir" ডিরেক্টরিতে আপনার json ফাইলগুলি যুক্ত করেছেন:

  1. কৌনিক.জসন ফাইলে "আপনার-জসন-দির" যুক্ত করুন (:

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

  2. typings.d.ts ফাইল তৈরি করুন বা সম্পাদনা করুন (আপনার প্রকল্পের মূলের দিকে) এবং নিম্নলিখিত সামগ্রীটি যুক্ত করুন:

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

    এটি টাইপস্ক্রিপ্ট ত্রুটি ছাড়াই ".json" মডিউল আমদানির অনুমতি দেবে।

  3. আপনার নিয়ামক / পরিষেবা / অন্য যে কোনও ফাইলের মধ্যে কেবল এই আপেক্ষিক পথটি ব্যবহার করে ফাইলটি আমদানি করুন:

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


অয়নপাঠনের ওয়ান-লাইনার সাম্প্রতিক টাইপস্ক্রিপ্ট আপডেট হওয়া পর্যন্ত আমার জন্য কাজ করছিল।

আমি জেসিলিন ইয়েনের post পেয়েছি যা আপনার টিএস সংজ্ঞা ফাইলে এই স্নিপেট পোস্ট করার পরামর্শ দেয়

প্রকল্পের মূল ফোল্ডারে নীচের বিষয়বস্তু সহ ফাইল typings.d.ts যুক্ত করুন

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

এবং তারপরে আপনার ডেটা আমদানি করুন:

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

জুলাই 2019 আপডেট করুন:

টাইপস্ক্রিপ্ট ২.৯ ( docs ) আরও ভাল, স্মার্ট সমাধান প্রবর্তন করেছে। পদক্ষেপ:

  1. আপনার tsconfig.json ফাইলটিতে এই লাইনটির সাথে resolveJsonModule সমর্থনটি যুক্ত করুন:
"compilerOptions": {
    ...
    "resolveJsonModule": true
  }

আমদানি বিবৃতি এখন একটি ডিফল্ট রফতানি ধরে নিতে পারে:

import data from './example.json';

এবং ইন্টেলিজেন্স এখন আপনি অ্যারে ইত্যাদি ব্যবহার করতে পারবেন কিনা তা দেখতে json ফাইলটি পরীক্ষা করবে। বেশ দারুন.


ইনপুট ছেলেদের জন্য ধন্যবাদ, আমি সমাধানটি সন্ধান করতে সক্ষম হয়েছি, আমি app.componal.ts ফাইলের শীর্ষে জসনকে সংযুক্ত এবং সংজ্ঞায়িত করেছি:

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

এটি শেষ পর্যন্ত চিহ্নিতকারীকে উত্পাদন করে এবং কোডের একটি সহজ লাইন।


কৌণিক 7 এ, আমি কেবল ব্যবহার করেছি

let routesObject = require('./routes.json');

আমার রুটস.জসন ফাইলটি দেখতে এমন দেখাচ্ছে

{

    "routeEmployeeList":    "employee-list",
    "routeEmployeeDetail":      "employee/:id"
}

আপনি ব্যবহার করে json আইটেম অ্যাক্সেস

routesObject.routeEmployeeList

এই রেডডিট পোস্টে যেমন বলা হয়েছে, কৌনিক 7 এর পরে, আপনি এই 2 টি পদক্ষেপে জিনিসগুলি সহজ করতে পারেন:

  1. আপনার tsconfig.json ফাইলটিতে এই তিনটি লাইন compilerOptions tsconfig.json করুন:
"resolveJsonModule": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
  1. আপনার জসন ডেটা আমদানি করুন:
import myData from '../assets/data/my-data.json';

এবং এটাই. আপনি এখন আপনার উপাদান / পরিষেবাগুলিতে myData ব্যবহার করতে পারেন।


টাইপস্ক্রিপ্ট ২.৯ অনুসারে , একটি সহজভাবে যুক্ত করতে পারে:

"compilerOptions": {
    "resolveJsonModule": true
}

tsconfig.json । এরপরে, একটি জসন ফাইল ব্যবহার করা সহজ ( এবং ভিএসকোডে খুব ভাল ধরণের অনুমিতি থাকবে):

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