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;
    });
  }

}

Getsov · Accepted Answer · 2020-02-11 09:31:00Z

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 *ngIfand 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;

answered Feb 11, 2020 at 9:31

Getsov

343 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Vista Over a year ago

I should put all of my data in my ts file?

Getsov Over a year ago

You can make a service, or store it in a database, this is just a sample.

Getsov Over a year ago

From your comment below, I see, that you can't get the data from the service. Show your code then.

Vista Over a year ago

Hello, I have added services and .ts codes in my question

saivishnu tammineni · Accepted Answer · 2020-02-12 03:25:57Z

1

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

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.!!!
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.

edited Feb 12, 2020 at 3:25

answered Feb 11, 2020 at 9:41

saivishnu tammineni

1,2821 gold badge10 silver badges17 bronze badges

7 Comments

Vista Over a year ago

I have already created a service for my json and loaded it. I dont know how to get my data in any component/page from the service.

saivishnu tammineni Over a year ago

create an instance of service in the component. access the methods of the service in the component. Creation and use of services is the basic part of angular. Dont' feel bad but please go through he tour of heroes it will help u start up with angular.

saivishnu tammineni Over a year ago

quick link for using service using services. Accept the answer if it helped.

Vista Over a year ago

Thanks for this! but I'm still having trouble on loading/applying JSON data to my pages.

Vista Over a year ago

I'm receiving an error when I'm putting "this.status = data;" inside the subscribe: Property 'status' does not exist on type 'HomePage'. I already put "private status: any[];" in my data service. Is it correct that I will put the no.3 (method) in data service also?

|

Collectives™ on Stack Overflow

Inputting JSON data in Angular Ionic Page

2 Answers 2

4 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related