Post
Ask Question
bishoe nb

bishoe nb

  • NA
  • 623
  • 80.2k

Cannot read property 'getJSON' of undefined angular

Mar 31 2019 5:43 AM
Cannot read property 'getJSON' of undefined angular
 
angular 7
 
 angular.json
  1. {  
  2.   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",  
  3.   "version": 1,  
  4.   "newProjectRoot": "projects",  
  5.   "projects": {  
  6.     "ng": {  
  7.       "root": "",  
  8.       "sourceRoot": "src",  
  9.       "projectType": "application",  
  10.       "architect": {  
  11.         "build": {  
  12.           "builder": "@angular-devkit/build-angular:browser",  
  13.           "options": {  
  14.             "outputPath": "dist",  
  15.             "index": "src/index.html",  
  16.             "main": "src/main.ts",  
  17.             "tsConfig": "src/tsconfig.app.json",  
  18.             "polyfills": "src/polyfills.ts",  
  19.             "assets": [  
  20.               "src/assets"  
  21.             ],  
  22.             "styles": [  
  23.               "node_modules/datatables.net-dt/css/jquery.dataTables.css",  
  24.               "node_modules/bootstrap/dist/css/bootstrap.css",  
  25.               "node_modules/ngx-toastr/toastr.css",  
  26.               "node_modules/@coreui/icons/css/coreui-icons.css",  
  27.               "node_modules/flag-icon-css/css/flag-icon.css",  
  28.               "node_modules/font-awesome/css/font-awesome.css",  
  29.               "node_modules/simple-line-icons/css/simple-line-icons.css",  
  30.               "src/scss/style.scss"  
  31.             ],  
  32.             "stylePreprocessorOptions": {  
  33.               "includePaths": ["./node_modules"]  
  34.             },  
  35.             "scripts": [  
  36.               "node_modules/chart.js/dist/Chart.min.js",  
  37.               "node_modules/jquery/dist/jquery.js",  
  38. "node_modules/datatables.net/js/jquery.dataTables.js",  
  39. "node_modules/bootstrap/dist/js/bootstrap.js"  
  40.             ]  
  41.           },  
  42.           "configurations": {  
  43.             "production": {  
  44.               "optimization": true,  
  45.               "outputHashing": "all",  
  46.               "sourceMap": false,  
  47.               "extractCss": true,  
  48.               "namedChunks": false,  
  49.               "aot": true,  
  50.               "extractLicenses": true,  
  51.               "vendorChunk": false,  
  52.               "buildOptimizer": true,  
  53.               "fileReplacements": [  
  54.                 {  
  55.                   "replace": "src/environments/environment.ts",  
  56.                   "with": "src/environments/environment.prod.ts"  
  57.                 }  
  58.               ]  
  59.             }  
  60.           }  
  61.         },  
  62.         "serve": {  
  63.           "builder": "@angular-devkit/build-angular:dev-server",  
  64.           "options": {  
  65.             "browserTarget": "ng:build"  
  66.           },  
  67.           "configurations": {  
  68.             "production": {  
  69.               "browserTarget": "ng:build:production"  
  70.             }  
  71.           }  
  72.         },  
  73.         "extract-i18n": {  
  74.           "builder": "@angular-devkit/build-angular:extract-i18n",  
  75.           "options": {  
  76.             "browserTarget": "ng:build"  
  77.           }  
  78.         },  
  79.         "test": {  
  80.           "builder": "@angular-devkit/build-angular:karma",  
  81.           "options": {  
  82.             "main": "src/test.ts",  
  83.             "karmaConfig": "./karma.conf.js",  
  84.             "polyfills": "src/polyfills.ts",  
  85.             "tsConfig": "src/tsconfig.spec.json",  
  86.             "scripts": [  
  87.               "node_modules/chart.js/dist/Chart.min.js"  
  88.             ],  
  89.             "styles": [  
  90.   
  91.              ],  
  92.             "stylePreprocessorOptions": {  
  93.               "includePaths": ["./node_modules"]  
  94.             },  
  95.             "assets": [  
  96.               "src/assets",  
  97.               "src/favicon.ico"  
  98.             ]  
  99.           }  
  100.         },  
  101.         "lint": {  
  102.           "builder": "@angular-devkit/build-angular:tslint",  
  103.           "options": {  
  104.             "tsConfig": [  
  105.               "src/tsconfig.app.json",  
  106.               "src/tsconfig.spec.json"  
  107.             ],  
  108.             "exclude": [  
  109.               "**/node_modules/**"  
  110.             ]  
  111.           }  
  112.         }  
  113.       }  
  114.     },  
  115.     "ng-e2e": {  
  116.       "root": "",  
  117.       "sourceRoot": "",  
  118.       "projectType": "application",  
  119.       "architect": {  
  120.         "e2e": {  
  121.           "builder": "@angular-devkit/build-angular:protractor",  
  122.           "options": {  
  123.             "protractorConfig": "./protractor.conf.js",  
  124.             "devServerTarget": "ng:serve"  
  125.           }  
  126.         },  
  127.         "lint": {  
  128.           "builder": "@angular-devkit/build-angular:tslint",  
  129.           "options": {  
  130.             "tsConfig": [  
  131.               "e2e/tsconfig.e2e.json"  
  132.             ],  
  133.             "exclude": [  
  134.               "**/node_modules/**"  
  135.             ]  
  136.           }  
  137.         }  
  138.       }  
  139.     }  
  140.   },  
  141.   "defaultProject": "ng",  
  142.   "schematics": {  
  143.     "@schematics/angular:component": {  
  144.       "prefix": "app",  
  145.       "styleext": "scss"  
  146.     },  
  147.     "@schematics/angular:directive": {  
  148.       "prefix": "app"  
  149.     }  
  150.   }  
  151. }  
 app.module
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { BrowserAnimationsModule } from '@angular/platform-browser/animations';  
  3.  import { NgModule ,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';  
  4. import { LocationStrategy, HashLocationStrategy } from '@angular/common';  
  5. // import { DataTablesModule } from 'angular-datatables';  
  6. import { FormsModule }   from '@angular/forms';  
  7. import {HttpModule} from '@angular/http'  
  8. import { HttpClient } from '@angular/common/http';  
  9. import { HttpClientModule } from '@angular/common/http';  
  10.   
  11. // import { Observable } from 'rxjs/observable';  
  12. import 'rxjs/add/observable/of';  
  13. import 'rxjs/add/operator/catch';  
  14. import 'rxjs/add/operator/map';  
  15. import 'rxjs/add/operator/concatMap';  
  16.   
  17. import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';  
  18. import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';  
  19. import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';  
  20. const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {  
  21.   suppressScrollX: true  
  22. };  
  23.   
  24. import { AppComponent } from './app.component';  
  25.   
  26. // Import containers  
  27. import { DefaultLayoutComponent } from './containers';  
  28.   
  29. import { P404Component } from './views/error/404.component';  
  30. import { P500Component } from './views/error/500.component';  
  31. import { LoginComponent } from './views/login/login.component';  
  32. import { RegisterComponent } from './views/register/register.component';  
  33.   
  34. const APP_CONTAINERS = [  
  35.   DefaultLayoutComponent  
  36. ];  
  37.   
  38. import {  
  39.   AppAsideModule,  
  40.   AppBreadcrumbModule,  
  41.   AppHeaderModule,  
  42.   AppFooterModule,  
  43.   AppSidebarModule,  
  44.   
  45. } from '@coreui/angular';  
  46.   
  47. // Import routing module  
  48. import { AppRoutingModule } from './app.routing';  
  49.   
  50. // Import 3rd party components  
  51. import { BsDropdownModule } from 'ngx-bootstrap/dropdown';  
  52. import { TabsModule } from 'ngx-bootstrap/tabs';  
  53. import { ChartsModule } from 'ng2-charts';  
  54. import { AdmincpwebComponentComponent } from './admincpweb/admincpweb-component/admincpweb-component.component';  
  55.    
  56.  import { CategoryService } from './serv/category.service';  
  57. import { ToastrModule } from 'ngx-toastr';  
  58. @NgModule({  
  59.   imports: [  
  60.     BrowserModule,      
  61.     HttpModule,  
  62.     BrowserAnimationsModule,  
  63.     // CommonModule,  
  64.       
  65.     AppRoutingModule,  
  66.     AppAsideModule,  
  67.     FormsModule,  
  68.     // DataTablesModule,  
  69.     AppBreadcrumbModule.forRoot(),  
  70.     AppFooterModule,  
  71.     AppHeaderModule,  
  72.     AppSidebarModule,  
  73.     PerfectScrollbarModule,  
  74.     // Observable,  
  75.     BsDropdownModule.forRoot(),  
  76.     TabsModule.forRoot(),  
  77.     ToastrModule.forRoot(),  
  78.     HttpClientModule,  
  79.   
  80.     ChartsModule,  
  81.     // CategoryModule,  
  82.     // CategoryRoutingModule  
  83.   ],  
  84.   declarations: [  
  85.     AppComponent,  
  86.     ...APP_CONTAINERS,  
  87.     P404Component,  
  88.     P500Component,  
  89.     LoginComponent,  
  90.     RegisterComponent,  
  91.     AdmincpwebComponentComponent,  
  92.         
  93.   ],  
  94.   schemas: [ CUSTOM_ELEMENTS_SCHEMA ]  
  95. ,  
  96.   providers: [{  
  97.      provide: CategoryService  
  98.    }],  
  99.     
  100.   bootstrap: [ AppComponent ]  
  101. })  
  102. export class AppModule { }  
 CategoryService
  1.   
  2. import { Injectable } from '@angular/core';  
  3. import { HttpClientModule } from '@angular/common/http';  
  4.   
  5.   import {Http , Response , Headers , RequestOptions ,RequestMethod } from '@angular/http';  
  6. import { ajax } from 'rxjs/ajax';  
  7.   
  8. import "rxjs/add/operator/map";  
  9.   
  10.   
  11. import { catchError } from 'rxjs/operators';  
  12.   
  13. import { throwError,Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from 'rxjs';  
  14. import 'rxjs/Rx';  
  15.    
  16. //import { map, filter, scan } from 'rxjs/operators';  
  17. import 'rxjs/add/operator/map';  
  18.    
  19. import { webSocket } from 'rxjs/webSocket';  
  20. import { map } from 'rxjs/operators';  
  21.  import { ICategoryModule } from '../Class/i-news/i-news.module';  
  22.   
  23.   
  24.    
  25. import { TestScheduler } from 'rxjs/testing';  
  26. import {formatDate } from '@angular/common';  
  27.   
  28. @Injectable({  
  29.   providedIn: 'root'  
  30. })  
  31. export class CategoryService {  
  32.   baseUrl='http://localhost:1858/api/Cat_News';  
  33.   _ICategoryModule : ICategoryModule;  
  34.   CatList : ICategoryModule[];  
  35.   today= new Date();  
  36.    
  37.   constructor(private http :Http,private _http: HttpClientModule) {  
  38. formatDate(this.today, 'dd-MM-yyyy hh:mm:ss a', 'en-US', '+0530');}   
  39.   
  40. addCat_News(_ICategoryModu: ICategoryModule){  
  41.     var body = JSON.stringify(_ICategoryModu);  
  42.     var headerOptions = new Headers({'Content-Type': 'application/json'});  
  43.   
  44.     var requsetOptions = new RequestOptions({method : RequestMethod.Post,headers :headerOptions});  
  45.       
  46.     return this.http.post(this.baseUrl,body,requsetOptions).pipe(map(x => x.json()));  
  47.   }  
  48.   putCat_News(id,_INewsModu){  
  49.     var body = JSON.stringify(_INewsModu);  
  50.     var headerOptions = new Headers({'Content-Type': 'application/json'});  
  51.     var requsetOptions = new RequestOptions({method : RequestMethod.Put,headers :headerOptions});  
  52.     return this.http.put('http://localhost:1858/api/Cat_News/' + id,body,requsetOptions).pipe(map(res => res.json()));  
  53.   }  
  54.   
  55.   public getJSON(): Observable {  
  56.     return this.http.get("http://localhost:1858/api/Cat_News").map(res => res.json());  
  57. }  
  58.   
  59.     
  60.   deleteCat_News(id :number){  
  61.     return this.http.delete('http://localhost:1858/api/Cat_News/' + id).map(res =>   
  62.       res.json());  
  63.   
  64.       
  65.   }  
  66.   
  67.  getCat()  
  68.   {  
  69.      this.http.get('http://localhost:1858/api/Cat_News').map((data : Response) =>{  
  70.         return data.json() as ICategoryModule[];  
  71.       }).toPromise().then(x=>{  
  72.         this.CatList = x;  
  73.       });  
  74.   }  
  75.   
  76.  }  
 CatpagingComponent
 
  1.  import { Component, OnInit, Injectable,OnDestroy } from '@angular/core';  
  2. import { Subject } from 'rxjs/Subject';  
  3. import 'rxjs/add/operator/map';  
  4. import { HttpClientModule } from '@angular/common/http';  
  5.  import { DataTablesModule } from 'angular-datatables';  
  6. import { Http, Response } from '@angular/http';  
  7. import { CategoryService } from '../../serv/category.service';  
  8.   
  9. @Injectable({  
  10.   providedIn: 'root'  
  11. })  
  12. @Component({  
  13.   selector: 'app-catpaging',  
  14.   templateUrl: './catpaging.component.html',  
  15.   styleUrls: ['./catpaging.component.scss']  
  16. })  
  17. export class CatpagingComponent implements OnInit {  
  18.   
  19.   dtOptions: DataTables.Settings = {};  
  20.   dtTrigger: Subject = new Subject();  
  21.   cats : any[] = [];  
  22.   
  23.   constructor(private http:HttpClientModule,private sxerh:CategoryService) { }  
  24.   
  25.   ngOnInit() {      
  26.     this.dtOptions = {  
  27.         pagingType: 'full_numbers',  
  28.         pageLength: 2,  
  29.         processing: true  
  30.   
  31.       };  
  32.         
  33.     this.sxerh.getJSON().subscribe(data => {  
  34.         this.cats = data;  
  35.         this.dtTrigger.next();  
  36.       });     
  37.   }  
  38.   ngOnDestroy(): void {  
  39.     this.dtTrigger.unsubscribe();  
  40.   }  
  41.   
  42. }  
  1. <table class="table table-striped table-bordered table-sm row-border hover" datatable [dtOptions]="dtOptions"    
  2.   [dtTrigger]="dtTrigger">    
  3.     
  4.     
  5.   <thead>    
  6.     <tr>    
  7.       <th>Id</th>    
  8.       <th>Name</th>    
  9.       <th>Title</th>    
  10.           
  11.     </tr>    
  12.   </thead>    
  13.   <tbody>    
  14.     <tr *ngFor="let b of cats">    
  15.       <td>{{b.NameCategory}}</td>    
  16.       <td>{{b.DateCategory}}</td>    
  17.       <td>{{b.IDCategoery}}</td>    
  18.           
  19.     </tr>    
  20.   </tbody>    
  21. </table>

Answers (4)