Inputting JSON data in Angular Ionic Page

Question

I'm new in Angular Ionic framework and I'm also currently working on inputting some numbers in the input bar. How to include JSON data to my Angular Ionic page, so that only JSON Data can be inputted? I already see my JSON data on my console.

Here is my sample JSON data

   {
        "Number": "381238",
        "Status": "In Progress",

    }

Here is my html code for input bar

<div class="ion-padding basic">
Enter Tracking Number
<div><input type="text" name="track"></div>
</div>

So basically if it enters a number that is from my JSON data it must proceed to the next page and it will show as "In progress" (which is also from JSON data)

Here's the code for data.service.ts which is for loading local/remote JSON data

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {
    private status: any[];
    constructor(private http: HttpClient){}

    getLocalData(){
      return this.http.get("assets/data/data.json");
    }

    getRemoteData(){
      return this.http.get("");
    }

    public getStatusFor(trackingNumber: string): string {
    return this.status.filter(state => state.Number === trackingNumber).status;
}
}

Here's for home.page.ts

import { Component } from '@angular/core';
import { DataService } from '../services/data.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  providers: [DataService]
})
export class HomePage {
  status;
  constructor(private dataService: DataService) {}


  ngOnInit() {
    this.dataService.getLocalData().subscribe(data => {
      console.log("Local Data:");
      console.log(data);
      this.status = data;
    });
  }

}

Answer 1

Make the input with ngModel and check if it is equal to the number from the json, then show a button to proceed with *ngIf and send the object.status to the next page.
Something like:

    <div class="ion-padding basic">
      Enter Tracking Number
      <div><ion-input type="text" [(ngModel)]="track" name="track"></ion-input></div>
      <button *ngIf="track == myData.Number" ion-button full (click)="toStatusPage(myData.Status)">Proceed</button>
    </div>

In your .ts file:

myData = {
    "Number": "381238",
    "Status": "In Progress",
}
track: any;

Answer 2

I think this is what you meant...

you have a page where you take tracking number as input, reroute to a different page and display the status.

solutions:

Angular best practice is that a component should not get data directly nor should it provide false data even for testing. so have the json in a service . then get the data in any component from this service.

The service can even have a method that accepts a tracking number and returns the status. This said, you can do one of the following

1. route to the page that shows the tracking status and pass the tracking number as a query param. in the page where you want to display the tracking status, read the params from the activated route snapshot and get the status of the tracking number from the json (through the service call) and display the status. that's it.!!!

2. check if you can show the status in the same page as the input field. If so as soon as user enters the tracking id get the status from the json data (through the service call).

Edit

With the code you added, you can

1) have a attribute in the service the holds the fetched json. like

private status: any[];

2) inside the subscribe where you are logging the data. populate this attribute.

this.status = data;

3) add a method that returns the status of the given tracking number.

public getStatusFor(trackingNumber: string): string {
    return this.status.filter(state => state.Number === trackingNumber).Status;
}

4) finally in your page where you are redirecting call this function with the required tracking number;

Observations:-

• have the keys of the json object in camel case.
• make sure what kind of data type the tracking number is going to be like string or number.