Cannot read property 'getJSON' of undefined angular

angular 7

angular.json

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"ng": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets"
],
"styles": [
"node_modules/datatables.net-dt/css/jquery.dataTables.css",
"node_modules/bootstrap/dist/css/bootstrap.css",
"node_modules/ngx-toastr/toastr.css",
"node_modules/@coreui/icons/css/coreui-icons.css",
"node_modules/flag-icon-css/css/flag-icon.css",
"node_modules/font-awesome/css/font-awesome.css",
"node_modules/simple-line-icons/css/simple-line-icons.css",
"src/scss/style.scss"
],
"stylePreprocessorOptions": {
"includePaths": ["./node_modules"]
},
"scripts": [
"node_modules/chart.js/dist/Chart.min.js",
"node_modules/jquery/dist/jquery.js",
"node_modules/datatables.net/js/jquery.dataTables.js",
"node_modules/bootstrap/dist/js/bootstrap.js"
]
},
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "ng:build"
},
"configurations": {
"production": {
"browserTarget": "ng:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "ng:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [
"node_modules/chart.js/dist/Chart.min.js"
],
"styles": [
],
"stylePreprocessorOptions": {
"includePaths": ["./node_modules"]
},
"assets": [
"src/assets",
"src/favicon.ico"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"ng-e2e": {
"root": "",
"sourceRoot": "",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "ng:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "ng",
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"styleext": "scss"
},
"@schematics/angular:directive": {
"prefix": "app"
}
}
}

app.module

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule ,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
// import { DataTablesModule } from 'angular-datatables';
import { FormsModule } from '@angular/forms';
import {HttpModule} from '@angular/http'
import { HttpClient } from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
// import { Observable } from 'rxjs/observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/concatMap';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
suppressScrollX: true
};
import { AppComponent } from './app.component';
// Import containers
import { DefaultLayoutComponent } from './containers';
import { P404Component } from './views/error/404.component';
import { P500Component } from './views/error/500.component';
import { LoginComponent } from './views/login/login.component';
import { RegisterComponent } from './views/register/register.component';
const APP_CONTAINERS = [
DefaultLayoutComponent
];
import {
AppAsideModule,
AppBreadcrumbModule,
AppHeaderModule,
AppFooterModule,
AppSidebarModule,
} from '@coreui/angular';
// Import routing module
import { AppRoutingModule } from './app.routing';
// Import 3rd party components
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TabsModule } from 'ngx-bootstrap/tabs';
import { ChartsModule } from 'ng2-charts';
import { AdmincpwebComponentComponent } from './admincpweb/admincpweb-component/admincpweb-component.component';
import { CategoryService } from './serv/category.service';
import { ToastrModule } from 'ngx-toastr';
@NgModule({
imports: [
BrowserModule,
HttpModule,
BrowserAnimationsModule,
// CommonModule,
AppRoutingModule,
AppAsideModule,
FormsModule,
// DataTablesModule,
AppBreadcrumbModule.forRoot(),
AppFooterModule,
AppHeaderModule,
AppSidebarModule,
PerfectScrollbarModule,
// Observable,
BsDropdownModule.forRoot(),
TabsModule.forRoot(),
ToastrModule.forRoot(),
HttpClientModule,
ChartsModule,
// CategoryModule,
// CategoryRoutingModule
],
declarations: [
AppComponent,
...APP_CONTAINERS,
P404Component,
P500Component,
LoginComponent,
RegisterComponent,
AdmincpwebComponentComponent,
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
,
providers: [{
provide: CategoryService
}],
bootstrap: [ AppComponent ]
})
export class AppModule { }

CategoryService

import { Injectable } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import {Http , Response , Headers , RequestOptions ,RequestMethod } from '@angular/http';
import { ajax } from 'rxjs/ajax';
import "rxjs/add/operator/map";
import { catchError } from 'rxjs/operators';
import { throwError,Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from 'rxjs';
import 'rxjs/Rx';
//import { map, filter, scan } from 'rxjs/operators';
import 'rxjs/add/operator/map';
import { webSocket } from 'rxjs/webSocket';
import { map } from 'rxjs/operators';
import { ICategoryModule } from '../Class/i-news/i-news.module';
import { TestScheduler } from 'rxjs/testing';
import {formatDate } from '@angular/common';
@Injectable({
providedIn: 'root'
})
export class CategoryService {
baseUrl='http://localhost:1858/api/Cat_News';
_ICategoryModule : ICategoryModule;
CatList : ICategoryModule[];
today= new Date();
constructor(private http :Http,private _http: HttpClientModule) {
formatDate(this.today, 'dd-MM-yyyy hh:mm:ss a', 'en-US', '+0530');}
addCat_News(_ICategoryModu: ICategoryModule){
var body = JSON.stringify(_ICategoryModu);
var headerOptions = new Headers({'Content-Type': 'application/json'});
var requsetOptions = new RequestOptions({method : RequestMethod.Post,headers :headerOptions});
return this.http.post(this.baseUrl,body,requsetOptions).pipe(map(x => x.json()));
}
putCat_News(id,_INewsModu){
var body = JSON.stringify(_INewsModu);
var headerOptions = new Headers({'Content-Type': 'application/json'});
var requsetOptions = new RequestOptions({method : RequestMethod.Put,headers :headerOptions});
return this.http.put('http://localhost:1858/api/Cat_News/' + id,body,requsetOptions).pipe(map(res => res.json()));
}
public getJSON(): Observable {
return this.http.get("http://localhost:1858/api/Cat_News").map(res => res.json());
}
deleteCat_News(id :number){
return this.http.delete('http://localhost:1858/api/Cat_News/' + id).map(res =>
res.json());
}
getCat()
{
this.http.get('http://localhost:1858/api/Cat_News').map((data : Response) =>{
return data.json() as ICategoryModule[];
}).toPromise().then(x=>{
this.CatList = x;
});
}
}

CatpagingComponent

import { Component, OnInit, Injectable,OnDestroy } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/map';
import { HttpClientModule } from '@angular/common/http';
import { DataTablesModule } from 'angular-datatables';
import { Http, Response } from '@angular/http';
import { CategoryService } from '../../serv/category.service';
@Injectable({
providedIn: 'root'
})
@Component({
selector: 'app-catpaging',
templateUrl: './catpaging.component.html',
styleUrls: ['./catpaging.component.scss']
})
export class CatpagingComponent implements OnInit {
dtOptions: DataTables.Settings = {};
dtTrigger: Subject = new Subject();
cats : any[] = [];
constructor(private http:HttpClientModule,private sxerh:CategoryService) { }
ngOnInit() {
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 2,
processing: true
};
this.sxerh.getJSON().subscribe(data => {
this.cats = data;
this.dtTrigger.next();
});
}
ngOnDestroy(): void {
this.dtTrigger.unsubscribe();
}
}

<table class="table table-striped table-bordered table-sm row-border hover" datatable [dtOptions]="dtOptions"
[dtTrigger]="dtTrigger">
<thead>
<tr>
<th>Idth>
<th>Nameth>
<th>Titleth>
tr>
thead>
<tbody>
<tr *ngFor="let b of cats">
<td>{{b.NameCategory}}td>
<td>{{b.DateCategory}}td>
<td>{{b.IDCategoery}}td>
tr>
tbody>
table>

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Mario Scheeren7y ago
Accepted answer
Ok ... try a console.Debug in constuctor of service ... will it be instanciated at all ?

also in
@Component
{
....

providers:  [ CategoryService ]

}
+2
bishoe nb7y ago
Mario Scheeren

Working now

thank you
0
bishoe nb7y ago
Mario Scheeren

constructor(private http:HttpClientModule,private sxerh:CategoryService) { }
sxerh:CategoryService
console
ERROR TypeError: Cannot read property 'getJSON' of undefined
at CatpagingComponent.push../src/app/views/category/catpaging.component.ts.CatpagingComponent.ngOnInit (catpaging.component.ts:33)
at checkAndUpdateDirectiveInline (core.js:22098)
at checkAndUpdateNodeInline (core.js:23362)
at checkAndUpdateNode (core.js:23324)
at debugCheckAndUpdateNode (core.js:23958)
at debugCheckDirectivesFn (core.js:23918)
at Object.eval [as updateDirectives] (CatpagingComponent_Host.ngfactory.js? [sm]:1)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:23910)
at checkAndUpdateView (core.js:23306)
at callViewAction (core.js:23547)
0
Mario Scheeren7y ago
CatpagingComponent Line 33:

this.sxerh <= where does this come from?

Never mind ..I did not see it in the constructor ...

But try to console.debug within controller if this object is undefined ...
0