Ionic 4 & 3 Get data from local json file

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

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:

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.