If you wonder how to get and retrieve data from local json file this tutorial will help you understand how to do that. So you only need to create a json file with a valid format of json data and under assets/ folder for me I'll create a file and name it data.json and if you want to check if your json file respects all json norms just go to jsonlint.com and verify if your local json file is valid or not.

Create a json file

Here is my local json file that I will use for learning purposes in this tutorial. this file will localize in assets/data.json

[
    {
        "id": 1,
        "question": "Who is this player ?",
        "img": "01.jpg"
    },
    {
        "id": 2,
        "question": "Who is this actor ?",
        "img": "02.jpg"
    }
]

Don't forget to check if your file is valid in json validator site.

Generate Provider File

Now it's time create a provider file if you didn't create one already, I assume you know how to generate a provider using ionic command line, So I will create a logic.ts provider using this command:

    ionic g provider logic

if you are using a ionic 4 just use this command

    ionic g service services/logic

a file logic.ts will be generated under services folder.

Add HttpClientModule to app.module.ts

The get() and set() methods needs HttpClientModule to be imported in order to works so don't be lazy and just add those two lines in app.module.ts you can also copy paste them from this code below

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { HttpClientModule } from '@angular/common/http';

import { MyApp } from './app.component';
import { LogicProvider } from '../providers/logic/logic';

@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    LogicProvider
  ]
})
export class AppModule {}

Now that you have add HttpClientModule to app.module.ts you have done the most of the work, remember you need to do this or it will not work for you.

Get data from local json file

Under the logic.ts it will all your logic code, retrieving and getting data from local json file and send data to other pages so if you love to work with observables like me you'll need to create an interface file, that's why I'll create a folder inside the src/ folder and I'll name it interfaces/ and inside it I'll create a file and name it data.interface.ts and I'll define it like that:

export interface IData {
    id?: number
    question?: string
    img?: string
}

Now you have to go to logic.ts and get data from local json file just like this bellow:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { IData } from '../../interfaces/data.interface';
import { Observable } from 'rxjs';

@Injectable()
export class LogicProvider {

    private dataUrl: string = "assets/data.json"

      constructor(private http: HttpClient) { }

      getData(): Observable<IData[]> {
        return this.http.get<IData[]>(this.dataUrl)
     }

}

Use the data

Now that you have the data in your hands you can use it how you want, you only need to import the logic.ts provider and use the dependency injection and use that data in your views or html pages for me I'll use this data in home page.

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, Slides } from 'ionic-angular';
import { LogicProvider } from '../../providers/logic/logic';
import { Observable } from "rxjs";
import { IData } from '../../interfaces/data.interface';

@IonicPage()
@Component({
  selector: 'home-quiz',
  templateUrl: 'home.html',
})
export class HomePage {

    @ViewChild(Slides) slides: Slides;

    questions$: Observable<IData[]>;
    totalQuestions: number;

    constructor(public navCtrl: NavController,
                public navParams: NavParams,
                public _logic: LogicProvider) {
    }

  ionViewWillEnter() {
    this.questions$ = this._logic.getData()
    this.questions$.subscribe((res) => {
      this.totalQuestions = res.length
    })
  }
}

As you can see I have my data in this.questions$ observable and I can use asynchronous way in my html code like that:

<ion-content padding>

<div class="screen" *ngFor="let q of questions$ | async">

    <div class="header">
        <p class="steps">{{ totalQuestions }} / {{ q.id }}</p>
    </div>

    <div class="body">
        <p class="question">{{ q.question }}</p>
        <img src="assets/imgs/quizimages/{{ q.img }}" />
    </div>

</div>

</ion-content>

That's it, this is how you can get data from local json in an easy way.