Http get request in angular 2 to fetch data from a json file placed in assets

Question

I am trying to fetch data from a json file placed in my assets folder.I am using angular material in my application.

I have created a account component which has account.component.ts,account.component.html,account.component.scss,accountdetail.service.ts files.

I have implemented a simple dropdown using mat-select component of angular material for which i applied search filter by creating filter.pipe.ts file.

Below shown are my application files

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms';
import { FilterPipe } from './filter.pipe';
import { FormsModule } from '@angular/forms';
import { HttpModule} from '@angular/http';

import { AppMaterialModule } from './app-material.module';


import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AccountComponent } from './account/account.component';

import { AccoundetailService } from './account/accountdetail.service';



import './rxjs-operators';


@NgModule({
  declarations: [
    AppComponent,
    AccountComponent ,
    FilterPipe      
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    AppMaterialModule,
    FormsModule ,
    HttpModule   
  ],
  providers: [AccoundetailService ],
  bootstrap: [AppComponent]
})
export class AppModule { }

account.component.ts

import {Component, ViewChild, Inject, OnInit} from '@angular/core';
import {MatPaginator, MatTableDataSource} from '@angular/material';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';
import { ReactiveFormsModule } from '@angular/forms';
import { FormGroup } from '@angular/forms';

import { AccoundetailService } from './accountdetail.service';



@Component({
  selector: 'app-account',
  templateUrl: './account.component.html',
  styleUrls: ['./account.component.scss'],

  providers: [AccoundetailService],
})


export class AccountComponent implements OnInit {

 filtertext:string;
 departments = [];


constructor(private _accdetailservice :AccountdetailService ) { }

ngOnInit(){
  this._accdetailservice.accountdetails()
  .subscribe(data => this.departments = data);
}




  /* Table Starts here
  ---------------------- */
 displayedColumns1 = ['accno', 'accdesc', 'investigator', 'accCPC','location','cdeptid','depdesc'];
  dataSource1= new MatTableDataSource<Element>(ELEMENT_DATA);


  @ViewChild(MatPaginator) paginator: MatPaginator;

   ngAfterViewInit() {
    this.dataSource1.paginator = this.paginator;
  }
}

export interface Element {
  accno: number;
  accdesc: string;
  investigator: string;
  accCPC: string;
  location:string;
  cdeptid: number;
  depdesc: string;
}

const ELEMENT_DATA: Element[] = [
  {accno: 5400343, accdesc: 'ASTRALIS LTD', investigator:'Kruger, James G.', accCPC: 'OR',location:'ON',cdeptid: 110350,depdesc: 'Kruger Laboratory'},

  {accno: 5400344, accdesc: 'ASTRALIS LTD', investigator:'Gelbard, Alyssa.', accCPC: 'OR',location:'ON',cdeptid: 110350,depdesc: 'Kruger Laboratory'}

];

account.component.html

<mat-toolbar color="primary" style="width:100%"> WELCOME </mat-toolbar><br/>

<h3>Department</h3><br/>

            <mat-form-field>
                      <mat-select style="min-width: 200px;" placeholder="Type to search"  [(value)]="dept">
                      <input class="input1" matInput type="text" [(ngModel)]="filtertext">
                        <mat-option *ngFor="let dep of departments  | filter:filtertext >
                          {{ dep.department }}
                        </mat-option>
                      </mat-select>
                    </mat-form-field>

<br/> <br/> <br/> 




<!-- Table starts here -->

<mat-card>
<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource1">

    <!-- Account No. Column -->
    <ng-container matColumnDef="accno">
      <mat-header-cell *matHeaderCellDef> Account No. </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.accno}}</mat-cell>
    </ng-container>

    <!-- Account Description Column -->
    <ng-container matColumnDef="accdesc">
      <mat-header-cell *matHeaderCellDef> Account Description </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.accdesc}} </mat-cell>
    </ng-container>

    <!-- Investigator Column -->
    <ng-container matColumnDef="investigator">
      <mat-header-cell *matHeaderCellDef> Investigator </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.investigator}} </mat-cell>
    </ng-container>

    <!-- Account CPC Column -->
    <ng-container matColumnDef="accCPC">
      <mat-header-cell *matHeaderCellDef> Account CPC </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.accCPC}}</mat-cell>
    </ng-container>

     <!-- Location Column -->
    <ng-container matColumnDef="location">
      <mat-header-cell *matHeaderCellDef> Location </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.location}}</mat-cell>
       </ng-container>


     <!-- Client Dept ID Column -->
    <ng-container matColumnDef="cdeptid">
      <mat-header-cell *matHeaderCellDef> ClientDeptID </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.cdeptid}}</mat-cell>
       </ng-container>


    <!-- Dept Description Column -->
    <ng-container matColumnDef="depdesc">
      <mat-header-cell *matHeaderCellDef> Dept Description  </mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.depdesc}}</mat-cell>
       </ng-container>


    <mat-header-row *matHeaderRowDef="displayedColumns1" ></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns1;"></mat-row>
  </mat-table>

  <mat-paginator #paginator
                 [pageSize]="10"
                 [pageSizeOptions]="[5, 10, 20]">
  </mat-paginator>
</div>
</mat-card>

accountdetail.service.ts

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
import {RouterModule, Router} from '@angular/router';
import { AccountComponent } from './account.component';


@Injectable()
export class AccountdetailService {

  constructor(private _http:Http ) { }

  private _url="assets/accountdetails.json";

  accountdetails(){
  return this._http.get(this._url)
    .map((response:Response)=>response.json());
  }

}

I have separately created app-material.module.ts to import the angular material components.

app-material.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  MatToolbarModule,
  MatCardModule,
  MatInputModule,
  MatButtonModule,
  MatSidenavModule,
  MatIconModule,
  MatExpansionModule,
  MatPaginatorModule,
  MatTableModule,
  MatChipsModule,
  MatSelectModule,
  MatTooltipModule,
  MatCheckboxModule,
  MatGridListModule,
  MatDialogModule
} from '@angular/material';

@NgModule({
  imports: [CommonModule],
  exports: [
  MatToolbarModule,
  MatCardModule,
  MatInputModule,
  MatButtonModule,
  MatSidenavModule,
  MatIconModule,
  MatExpansionModule,
  MatPaginatorModule,
  MatTableModule,
  MatChipsModule,
  MatSelectModule,
  MatTooltipModule,
  MatCheckboxModule,
  MatGridListModule,
  MatDialogModule
   ]
})
export class AppMaterialModule {}

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet> `,
  })

export class AppComponent {}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AccountComponent } from './account/account.component';

const routes: Routes = [
  { path: 'account', component: AccountComponent},
  { path: '**', redirectTo: ''}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

filter.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(departments1: any, filtertext: string) {
    if(filtertext=== undefined){
    return departments1;
    } else if(departments1)
    {
         return departments1.filter(function(department){
         return department.value.toLowerCase().includes(filtertext.toLowerCase());

         }) } }}

when I compile and run my application I am getting the error as shown below

can anybody please help me to resolve this issue and implement the get request for my department dropdown.

Answer 1

It's a simple error. You should probably look closely at your code and troubleshoot instead of straight away asking on StackOverflow. You should also shorten your code snippets so that we can straight away trace where the error came from.

---

Anyways, the problem here is that you spelt your service wrongly. In your service file, it was spelt as AccountdetailService, but in your module file, it was imported as AccoundetailService. This causes the problem.

app.module.ts:

import { AccountdetailService } from './account/accountdetail.service'; // <- Over here

@NgModule({
  // ...
  providers: [AccountdetailService]
  // ...
})
export class AppModule {}

accountdetail.service.ts:

@Injectable()
export class AccountdetailService {
  // ...
}

---

By the way, you should rename your service to AccountDetailService since "account" and "detail" are two different words altogether and the word "detail" should start with a capital letter "D" instead. This will follow the PascalCase syntax.