कोणीय 5 स्थानीय .json फ़ाइल को पढ़ने के लिए सेवा

Question

मैं Angular 5 का उपयोग कर रहा हूं और मैंने कोणीय-cli का उपयोग करके एक सेवा बनाई है

मैं जो करना चाहता हूं वह एक ऐसी सेवा बनाना है जो कोणीय 5 के लिए एक स्थानीय json फ़ाइल पढ़ती है।

यह मेरे पास है ... मैं थोड़ा फंस गया हूं ...

import { Injectable } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

@Injectable()
export class AppSettingsService {

  constructor(private http: HttpClientModule) {
    var obj;
    this.getJSON().subscribe(data => obj=data, error => console.log(error));
  }

  public getJSON(): Observable<any> {
    return this.http.get("./assets/mydata.json")
      .map((res:any) => res.json())
      .catch((error:any) => console.log(error));

  }

}

मैं इसे कैसे पूरा कर सकता हूं?

Comments

angular.io/tutorial/toh-pt6 उदाहरण के लिए, HttpClientModuleकंस्ट्रक्टर में इंजेक्शन नहीं होना चाहिए।

— AJT82

Answer 1

पहले आपको इंजेक्ट करना होगा HttpClientऔर नहीं HttpClientModule, दूसरी बात जिसे आपको हटाना है, .map((res:any) => res.json())आपको इसकी कोई आवश्यकता नहीं होगी क्योंकि नया HttpClientआपको डिफ़ॉल्ट रूप से प्रतिक्रिया का शरीर देगा, अंत में सुनिश्चित करें कि आप HttpClientModuleअपने में आयात करते हैं AppModule :

import { HttpClient } from '@angular/common/http'; 
import { Observable } from 'rxjs';

@Injectable()
export class AppSettingsService {

   constructor(private http: HttpClient) {
        this.getJSON().subscribe(data => {
            console.log(data);
        });
    }

    public getJSON(): Observable<any> {
        return this.http.get("./assets/mydata.json");
    }
}

इसे अपने घटक में जोड़ने के लिए:

@Component({
    selector: 'mycmp',
    templateUrl: 'my.component.html',
    styleUrls: ['my.component.css']
})
export class MyComponent implements OnInit {
    constructor(
        private appSettingsService : AppSettingsService 
    ) { }

   ngOnInit(){
       this.appSettingsService.getJSON().subscribe(data => {
            console.log(data);
        });
   }
}

Comments

मुझे "अनारक्षित प्रकार ऑब्जर्वेबल" मिल रहा है ... इस लाइन पर "सार्वजनिक getJSON (): ऑब्जर्वेबल <कोई> {"

एक आखिरी सवाल ... मैं अपने घटक से यह डेटा कैसे ले सकता हूं?

मान लीजिए अगर मैं json id पढ़ना चाहता हूँ। मुझे क्या करना है? कृपया यदि आप बुरा न मानें तो मुझे इसका उदाहरण दें।

— user3669026 10

json फ़ाइल लाने के दौरान मुझे 404 त्रुटि का सामना करना पड़ा .... और आपकी तरह एक ही प्रवाह का पालन करें ..

— नागेंदर प्रताप चौहान

Answer 2

आपके पास एक वैकल्पिक समाधान है, जो सीधे आपके json को आयात करता है।

संकलित करने के लिए, इस मॉड्यूल को अपनी टाइपिंग। Dot फ़ाइल में घोषित करें

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

अपने कोड में

import { data_json } from '../../path_of_your.json';

console.log(data_json)

Comments

मान लीजिए, मेरे पास संपत्ति / abc.json में मेरा json है, और केवल एक मॉड्यूल app.module.ts का उपयोग करके फिर टाइपिंग.d.ts और कैसे आयात करने के लिए घोषित किया जाए। कृपया मदद कीजिए।

— माहिमान

बस अपने टाइपिंग में मॉड्यूल की घोषणा करें। Dot फ़ाइल। और अपने JSON को अपनी कक्षा में आयात करें

— निकोलस लॉ-ड्यून

कौन सा मॉड्यूल? मान लीजिए मैं इसे ऐप में इस्तेमाल कर रहा हूं। मापांक। ts?

— महिमान

मुझे यह बिना त्रुटियों के काम करने के लिए मिला जब मैंने किया थाimport { default as data_json } from '../../path_of_your.json';

— jonas

मुझे कंसोल में "अपरिभाषित" क्यों मिल रहा है?

— ग्रोमैन

Answer 3

कोणीय 7 के लिए, मैंने json डेटा को सीधे आयात करने के लिए इन चरणों का पालन किया:

Tsconfig.app.json में:

जोड़ने "resolveJsonModule": trueमें"compilerOptions"

एक सेवा या घटक में:

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

और तब

private example = exampleData;

Answer 4

मुझे यह प्रश्न तब मिला जब मैं वेब सर्वर से एक फ़ाइल को पढ़ने के बजाय वास्तव में एक स्थानीय फ़ाइल पढ़ने का एक तरीका खोज रहा था, जिसे मैं "दूरस्थ फ़ाइल" कहूंगा।

बस कॉल करें require:

const content = require('../../path_of_your.json');

कोणीय-सीएलआई स्रोत कोड ने मुझे प्रेरित किया: मुझे पता चला कि वे वास्तविक HTML संसाधन के लिए कॉल द्वारा templateUrlसंपत्ति की जगह templateऔर मूल्य को बदलकर घटक टेम्पलेट शामिल करते हैं require।

यदि आप AOT कंपाइलर का उपयोग करते हैं, तो आपको समायोजन करके नोड प्रकार निश्चित जोड़ना होगा tsconfig.app.json:

"compilerOptions": {
  "types": ["node"],
  ...
},
...

Comments

उपयोग करने के लिए requireमैं स्थापित करने के लिए आवश्यक @types/nodeचलाकर npm install @types/node --save-devके रूप में चर्चा यहाँ

— jaycer

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

— हारून मैथ्यूज

Answer 5

import data  from './data.json';
export class AppComponent  {
    json:any = data;
}

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

Comments

मेरी स्थानीय फ़ाइल के लिए यह उपयोग करना सबसे आसान था। मुझे "allowSyntheticDefaultImports": trueअपने tsconfig.json 'compilerOptions' में जोड़ना था , लेकिन केवल टाइपस्क्रिप्ट के लिए एक लाइनिंग त्रुटि को रोकने के लिए, वास्तविक त्रुटि नहीं।

— रिन और लेन

यह समाधान है: hackeruna.com/2020/04/27/… इस त्रुटि के लिए TS1259

— juanitourquiza

Answer 6

इसे इस्तेमाल करे

अपनी सेवा में कोड लिखें

import {Observable, of} from 'rxjs';

आयात json फ़ाइल

import Product  from "./database/product.json";

getProduct(): Observable<any> {
   return of(Product).pipe(delay(1000));
}

घटक में

get_products(){
    this.sharedService.getProduct().subscribe(res=>{
        console.log(res);
    })        
}

Comments

उनके tsconfig में सच: जो कि "resolveJsonModule" जोड़ने के लिए सक्षम नहीं हैं के लिए पल के लिए सर्वश्रेष्ठ उत्तर

— सोनी

Answer 7

चलो एक JSON फ़ाइल बनाते हैं, हम इसे नाम देते हैं navbar.json आप जो चाहें इसे नाम दे सकते हैं!

navbar.json

[
  {
    "href": "#",
    "text": "Home",
    "icon": ""
  },
  {
    "href": "#",
    "text": "Bundles",
    "icon": "",
    "children": [
      {
        "href": "#national",
        "text": "National",
        "icon": "assets/images/national.svg"
      }
    ]
  }
]

अब हमने कुछ मेनू डेटा के साथ एक JSON फ़ाइल बनाई है। हम एप्लिकेशन घटक फ़ाइल पर जाएंगे और नीचे दिए गए कोड को पेस्ट करेंगे।

app.component.ts

import { Component } from '@angular/core';
import menudata from './navbar.json';

@Component({
  selector: 'lm-navbar',
  templateUrl: './navbar.component.html'
})
export class NavbarComponent {
    mainmenu:any = menudata;

}

अब आपका Angular 7 ऐप लोकल JSON फाइल से डेटा सर्व करने के लिए तैयार है।

App.component.html पर जाएं और इसमें निम्न कोड पेस्ट करें।

app.component.html

<ul class="navbar-nav ml-auto">
                  <li class="nav-item" *ngFor="let menu of mainmenu">
                  <a class="nav-link" href="{{menu.href}}">{{menu.icon}} {{menu.text}}</a>
                  <ul class="sub_menu" *ngIf="menu.children && menu.children.length > 0"> 
                            <li *ngFor="let sub_menu of menu.children"><a class="nav-link" href="{{sub_menu.href}}"><img src="{{sub_menu.icon}}" class="nav-img" /> {{sub_menu.text}}</a></li> 
                        </ul>
                  </li>
                  </ul>

Answer 8

टाइपस्क्रिप्ट 3.6.3, और कोणीय 6 का उपयोग करते हुए, इनमें से किसी भी समाधान ने मेरे लिए काम नहीं किया।

क्या किया था काम ट्यूटोरियल का अनुसरण करना था यहाँ जो कहते हैं यदि आप एक छोटे बुलाया फ़ाइल जोड़ने की जरूरत है njson-typings.d.tsअपनी परियोजना के लिए, इस युक्त

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

एक बार यह हो जाने के बाद, मैं बस अपना हार्डकोड जॅसन डेटा आयात कर सकता था:

import employeeData from '../../assets/employees.json';

और इसे मेरे घटक में उपयोग करें:

export class FetchDataComponent implements OnInit {
  public employees: Employee[];

  constructor() {
    //  Load the data from a hardcoded .json file
    this.employees = employeeData;
    . . . .
  }