I am using Angular 5 and I've created a service using the angular-cli
What I want to do is to create a service that reads a local json file for Angular 5.
This is what I have ... I'm a bit stuck...
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));
}
}
How can I get this finished?
First You have to inject HttpClient and Not HttpClientModule,
second thing you have to remove .map((res:any) => res.json()) you won't need it any more because the new HttpClient will give you the body of the response by default , finally make sure that you import HttpClientModule in your 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");
}
}
to add this to your Component:
#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);
});
}
}
For Angular 7, I followed these steps to directly import json data:
In tsconfig.app.json:
add "resolveJsonModule": true in "compilerOptions"
In a service or component:
import * as exampleData from '../example.json';
And then
private example = exampleData;
You have an alternative solution, importing directly your json.
To compile, declare this module in your typings.d.ts file
declare module "*.json" {
const value: any;
export default value;
}
In your code
import { data_json } from '../../path_of_your.json';
console.log(data_json)
I found this question when looking for a way to really read a local file instead of reading a file from the web server, which I'd rather call a "remote file".
Just call require:
const content = require('../../path_of_your.json');
The Angular-CLI source code inspired me: I found out that they include component templates by replacing the templateUrl property by template and the value by a require call to the actual HTML resource.
If you use the AOT compiler you have to add the node type definitons by adjusting tsconfig.app.json:
"compilerOptions": {
"types": ["node"],
...
},
...
Assumes, you have a data.json file in the src/app folder of your project with the following values:
[
{
"id": 1,
"name": "Licensed Frozen Hat",
"description": "Incidunt et magni est ut.",
"price": "170.00",
"imageUrl": "https://source.unsplash.com/1600x900/?product",
"quantity": 56840
},
...
]
3 Methods for Reading Local JSON Files
Method 1: Reading Local JSON Files Using TypeScript 2.9+ import Statement
import { Component, OnInit } from '#angular/core';
import * as data from './data.json';
#Component({
selector: 'app-root',
template: `<ul>
<li *ngFor="let product of products">
</li>
</ul>`,
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'Angular Example';
products: any = (data as any).default;
constructor(){}
ngOnInit(){
console.log(data);
}
}
Method 2: Reading Local JSON Files Using Angular HttpClient
import { Component, OnInit } from '#angular/core';
import { HttpClient } from "#angular/common/http";
#Component({
selector: 'app-root',
template: `<ul>
<li *ngFor="let product of products">
</li>
</ul>`,
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'Angular Example';
products: any = [];
constructor(private httpClient: HttpClient){}
ngOnInit(){
this.httpClient.get("assets/data.json").subscribe(data =>{
console.log(data);
this.products = data;
})
}
}
Method 3: Reading Local JSON Files in Offline Angular Apps Using ES6+ import Statement
If your Angular application goes offline, reading the JSON file with HttpClient will fail. In this case, we have one more method to import local JSON files using the ES6+ import statement which supports importing JSON files.
But first we need to add a typing file as follows:
declare module "*.json" {
const value: any;
export default value;
}
Add this inside a new file json-typings.d.ts file in the src/app folder.
Now, you can import JSON files just like TypeScript 2.9+.
import * as data from "data.json";
import data from './data.json';
export class AppComponent {
json:any = data;
}
See this article for more details.
Try This
Write code in your service
import {Observable, of} from 'rxjs';
import json file
import Product from "./database/product.json";
getProduct(): Observable<any> {
return of(Product).pipe(delay(1000));
}
In component
get_products(){
this.sharedService.getProduct().subscribe(res=>{
console.log(res);
})
}
Using Typescript 3.6.3, and Angular 6, none of these solutions worked for me.
What did work was to follow the tutorial here which says you need to add a small file called njson-typings.d.ts to your project, containing this:
declare module "*.json" {
const value: any;
export default value;
}
Once this was done, I could simply import my hardcoded json data:
import employeeData from '../../assets/employees.json';
and use it in my component:
export class FetchDataComponent implements OnInit {
public employees: Employee[];
constructor() {
// Load the data from a hardcoded .json file
this.employees = employeeData;
. . . .
}
Let’s create a JSON file, we name it navbar.json you can name it whatever you want!
navbar.json
[
{
"href": "#",
"text": "Home",
"icon": ""
},
{
"href": "#",
"text": "Bundles",
"icon": "",
"children": [
{
"href": "#national",
"text": "National",
"icon": "assets/images/national.svg"
}
]
}
]
Now we’ve created a JSON file with some menu data. We’ll go to app component file and paste the below code.
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;
}
Now your Angular 7 app is ready to serve the data from the local JSON file.
Go to app.component.html and paste the following code in it.
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>
For me, it didn't work when I try to import the data file. instead, I have moved the data file to the assets folder and tried to access it through get request.
public getProjectTree()
{
return this.http.get("assets/data.json");
}
Related
Below are the files of a library named posts-lib which makes http call inside posts.services.ts file and receives a list of posts and display them onto screen. It also consists a component named title.component.ts which is dependent on posts.services.ts and is responsible for displaying content on screen.
All of this works fine, but incase I want to move posts.service.ts folder out of the library and put it inside the app then how can I transfer the data from file which is outside of the library to the file title.component.ts which is dependent on it.
title.component.html
<h1>Testing titles api call</h1>
<ul>
<li *ngFor="let item of data">{{item.title}}</li>
</ul>
title.component.ts
import { Component, OnInit } from '#angular/core';
import { PostsService } from '../posts.service';
#Component({
selector: 'lib-tilte',
templateUrl: './tilte.component.html',
styleUrls: ['./tilte.component.css']
})
export class TilteComponent implements OnInit {
data: any;
constructor(private postData: PostsService) { }
ngOnInit() {
this.postData.getPosts().subscribe((result) => {
console.warn("reult",result);
this.data = result;
})
}
}
posts-lib.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'lib-posts-lib',
template: `
<p>
posts-lib works!
</p>
`,
styles: [
]
})
export class PostsLibComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
posts-lib.module.ts
import { NgModule } from '#angular/core';
import { PostsLibComponent } from './posts-lib.component';
import { TilteComponent } from './tilte/tilte.component';
import { HttpClientModule } from "#angular/common/http";
import { CommonModule } from '#angular/common'
#NgModule({
declarations: [
PostsLibComponent,
TilteComponent
],
imports: [
HttpClientModule,
CommonModule
],
exports: [
PostsLibComponent,
TilteComponent
]
})
export class PostsLibModule { }
posts.service.ts
import { Injectable } from '#angular/core';
import { HttpClient } from "#angular/common/http";
#Injectable({
providedIn: 'root'
})
export class PostsService {
url = "https://jsonplaceholder.typicode.com/posts";
constructor(private http: HttpClient) { }
getPosts() {
return this.http.get(this.url);
}
}
public-api.ts
export * from './lib/tilte/tilte.component';
export * from './lib/posts-lib.service';
export * from './lib/posts-lib.component';
export * from './lib/posts-lib.module';
export * from './lib/posts.service';
Ignoring all the issues the commenters are making - all valid - it sounds like you want to just remove the dependency on the service.
Or not, actually.
Yay, options!
Remove usage of the service
Just turn the component around from getting its own data, to being given its data. I.e. #Input.
Still with #Input, but instead, input the service itself rather than the values.
So either:
#Input() public data: any;
or
#Input() public set service(value: PostsService) {
this.postsService = value;
this.getData();
}
private getData(): void {
this.postsService.getPosts().subscribe(...);
}
Either way if you're moving the service out and no longer expecting the service and component to work as a functional pair within a system, you have to extract the component and feed it information instead with #Inputs.
Whether that's just feeding it the data from [a wrapper] service, or feeding it the service itself from wherever it now lives, you still need to give it to it.
When trying to get the data from an observable I am getting this error from the console.
My code is as follows
Anglar Service - service.ts
import { Injectable } from '#angular/core';
import { AngularFirestore } from '#angular/fire/firestore';
#Injectable({
providedIn: 'root'
})
export class ViewReportService {
constructor(private firestore: AngularFirestore) { }
getReport = (myDocument) =>
this.firestore.collection("report").doc(myDocument).get()
}
component ts.
import { Component, OnInit } from '#angular/core';
import { ViewReportService } from '../shared/view-report.service';
import { Observable } from 'rxjs';
#Component({
selector: 'app-view-report',
templateUrl: './view-report.component.html',
styleUrls: ['./view-report.component.scss']
})
export class ViewReportComponent implements OnInit {
document= [];
document$ : Observable<any>;
constructor(private service: ViewReportService) { }
ngOnInit(){
let documentID = "----"
//Get the Data from the view-report service
this.document$ = this.service.getReport(documentID);
}
}
on my HTML View
<table *ngIf="document$ | async as document">
<pre>{{document.name}}</pre>
It sounds like you have an circular object structure, which then can't be stored in the database. Remember: Firestore documents can only contain JSON data, and not all JavaScript objects are valid JSON. For example: JavaScript objects may contain function definitions, which are not valid in JSON.
The simplest way to convert a JavaScript object to JSON, is JSON.parse(JSON.stringify(object)). You'll need to do this in the place where you write the object to the database.
I have an Angular 7 project with a PHP Laravel API backend that is returning json from get requests.
return Response::json($genres);
I'm using httpClient in a service which is being called from a component (see both below). When I console log the data it is a string, not a json object. Also I am unable to access any of the properties that it has because it is just a long string.
In most online examples people used map and then pipe but those are both deprecated now and apparently httpClient just returns JSON as default but that is not what appears to be happening in this case.
Could someone give me a solution to this? I need access to the data in the response as JSON.
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
#Injectable({
providedIn: 'root'
})
export class ApiService {
constructor(private http:HttpClient) { }
getGenres(){
return this.http.get('http://www.localhost:7888/api/genres', this.genre);
}
}
import { Component, OnInit } from '#angular/core';
import { ApiService } from '../../services/api.service';
#Component({
selector: 'app-genres',
templateUrl: './genres.component.html',
styleUrls: ['./genres.component.css']
})
export class GenresComponent implements OnInit {
constructor(private apiService: ApiService) { }
ngOnInit() {
// make http request to http://www.localhost:7888/api/genres
this.apiService.getGenres().subscribe(data => {
console.log(data);
},
error => {
console.log(error);
});
}
}
*Solved it by using: 'declare var md:any;' after imports *
I am building a website in which I am using 'creative tim template for dashboard'
I am using date and time picker, the issue I am facing is the DateTime picker is initialized only once and 'it worked when the component and loaded for the first time but when I switch components then DateTime picker stop working',
the solution that I've found out is I have to initialize DateTime picker every time component is loaded by using the initialize method in the component
but then I receive the error src/app/components/booktrip/booktrip.component.ts(24,5): error TS2304: Cannot find name 'md'.
here's my code
import { Component, OnInit } from '#angular/core';
import { FormBuilder, FormGroup,FormControl, Validators } from '#angular/forms';
import { Trip } from '../../mockups/trip.mockup';
#Component({
selector: 'app-book-trip',
templateUrl: './book-trip.component.html',
styleUrls: ['./book-trip.component.css']
})
export class BookTripComponent implements OnInit {
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
md.initFormExtendedDatetimepickers();
}
bookTrip(trip) {
console.log(trip);
}
}
My angular.json is
"scripts": [
"src/assets/js/core/jquery.min.js",
"src/assets/js/core/popper.min.js",
"src/assets/js/core/bootstrap-material-design.min.js",
"src/assets/js/plugins/perfect-scrollbar.jquery.min.js",
"src/assets/js/plugins/moment.min.js",
"src/assets/js/plugins/sweetalert2.js",
"src/assets/js/plugins/jquery.validate.min.js",
"src/assets/js/plugins/jquery.bootstrap-wizard.js",
"src/assets/js/plugins/bootstrap-selectpicker.js",
"src/assets/js/plugins/bootstrap-datetimepicker.min.js",
"src/assets/js/plugins/jquery.dataTables.min.js",
"src/assets/js/plugins/bootstrap-tagsinput.js",
"src/assets/js/plugins/jasny-bootstrap.min.js",
"src/assets/js/plugins/fullcalendar.min.js",
"src/assets/js/plugins/jquery-jvectormap.js",
"src/assets/js/plugins/nouislider.min.js",
"src/assets/cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js",
"src/assets/js/plugins/arrive.min.js",
"src/assets/buttons.github.io/buttons.js",
"src/assets/js/plugins/chartist.min.js",
"src/assets/js/plugins/bootstrap-notify.js",
"src/assets/js/material-dashboard.min40a0.js",
"src/assets/demo/demo.js",
"src/assets/demo/jquery.sharrre.js"
]
and the error i am getting is
Error
I am not able to generate production build.
I am stuck for too long.. is there any possible solution ??
I think it's only a TypeScript error, and that md is actually defined -it's just that TypeScript doesn't know about it-.
Have you tried importing it directly to the files where you use md?
import * as md from 'material-dashboard';
You can read more about it here: https://hackernoon.com/how-to-use-javascript-libraries-in-angular-2-apps-ff274ba601af
This is how I think your component should look like, in the end:
import { Component, OnInit } from '#angular/core';
import { FormBuilder, FormGroup,FormControl, Validators } from '#angular/forms';
import { Trip } from '../../mockups/trip.mockup';
import * as md from 'material-dashboard';
#Component({
selector: 'app-book-trip',
templateUrl: './book-trip.component.html',
styleUrls: ['./book-trip.component.css']
})
export class BookTripComponent implements OnInit {
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
md.initFormExtendedDatetimepickers();
}
bookTrip(trip) {
console.log(trip);
}
}
I want to import js file in typescript.
And I want to access object and function in the js files.
Also I added js file in index.html but It doesn't working too.
so I find a clue that "import '[js file path]'" but it doesn't working.
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { NavParams } from 'ionic-angular';
import '../../pages/mobile.js';
#Component({
selector: 'page-success',
templateUrl: 'success.html'
})
export class SuccessPage {
constructor(public navCtrl: NavController, public navParms: NavParams) {
let centerPos = new atlan.maps.UTMK(953933.75, 1952050.75);
}
}
This is success.ts file. I want to find 'atlan' object.
Give me a solution please. Thx a lot!
You have to use the declare keyword so you do not get any compilation errors. You can do the following
import { Component } from '#angular/core';
....
/* Here you are telling typescript compiler to
ignore this variable it did not originate with typescript.*/
declare var atlan: any;
#Component({
selector: 'page-success',
templateUrl: 'success.html'
})
export class SuccessPage {
....
}
In your file ../../pages/mobile.js, you must export your atlan object (if you can edit this file of course), then, you import it the same way you do with everything.