How to get JSON data and show in component HTML with input type for Angular 8

Question

EDIT

Hi, let me clear my below issue.. I have edited all the source code below, firstly I have two json file (one is from payment and other is from sale) but after checked with the API again.. I can use only one JSON with all the data showing.

Please check my revised JSON report and all the source code for your reff, my concern is when I put "pzrgb2l1lc8w7dp5" (from the payment object) in html.component, the table will be show "sale_id" & "status" (from the payment object) and "firstname", "lastname" & "email" (from the customer object with same "sale_id").

EDIT

previously apologize if this question already exists, but it seems not yet because it has been a week I looked for a solution to my problem and have not found the answer.

I have managed to get JSON data from the HTTP service using angular, I have two JSON Urls and want to be made into one report and succeed. But I want to use input and buttons to get the JSON report, I haven't found the tutorial.

{
  "success": 1,
  "object": "list",
  "total_count": 2,
  "data": [
    {
      "object": "sale",
      "id": "j9cncjq0",
      "status": "Completed",
      "customer": {
        "object": "customer",
        "id": "uj56cbj3943sq1sg",
        "email": "iron.man@email.com",
        "firstname": "Iron",
        "lastname": "Man"
      },
      "payments": {
        "object": "list",
        "total_count": 1,
        "data": [
          {
            "object": "payment",
            "id": "pzrgb2l1lc8w7dp5",
            "sale_id": "j9cncjq0",
            "status": "COMPLETED",
          }
        ]
      }
    },
    {
      "object": "sale",
      "id": "sl8hcw26",
      "status": "Completed",
      "customer": {
        "object": "customer",
        "id": "upwvs7xqbc6zhwxh",
        "email": "black.widows@email.com",
        "firstname": "Black",
        "lastname": "Widows"
      },
      "payments": {
        "object": "list",
        "total_count": 1,
        "data": [
          {
            "object": "payment",
            "id": "pjd79f1yygqrm43q",
            "sale_id": "sl8hcw26",
            "status": "COMPLETED",
          }
        ]
      }
    }
  ]
}

Below is the json.service.ts code

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

@Injectable({
  providedIn: 'root'
})

export class JsonService {

  api_key = '1237bb46b22ee';

  private _urlSale: string = 'https://source-website-api/sales?apiKey='+this.api_key;

  constructor(private http: HttpClient) { }

  getSale() {
    return this.http.get(this._urlSale)
  }

}

Below is json.component.ts code

import { Component, OnInit } from '@angular/core';
import { JsonService } from '../../service/json.service';

@Component({
  selector: 'app-json',
  templateUrl: './json.component.html',
  styleUrls: ['./json.component.css']
})
export class JsonComponent implements OnInit {

  saleJSON: object;

  constructor(private _http: JsonService) { }

  ngOnInit() {
    this._http.getSale().subscribe(data => {
      this.saleJSON = data;
      console.log(this.saleJSON);
    })
  }
}

Below is json.component.html code

<h1>JSON Receive Data</h1>

<p>Payment Number</p>

<input type="text"> <br><br>
<button type="submit">Check</button>
<p></p>

<table style="width:70%">
    <tr>
      <th>Sale ID</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
      <th>Status</th>
    </tr>
    <tr align="center">
      <td> payment.sale_id </td>
      <td> customer.firstname </td>
      <td> customer.lastname </td>
      <td> customer.email </td>
      <td> payment.status </td>
    </tr>
  </table> 

<p>{{errorMsg}}</p>

I hope there is someone who can help me, thank you.

Answer 1

If you are referring to making the value from the input accessible to the button click function, there are a couple ways to do this. An easy option would be to create a variable for the input and bind to the html input element. This value can then be accessed from your click button function. E.g.

  export class JsonService {
    inputValue: string
  ...

  check(){
    console.log('running check',this.inputValue)
  }

<input type="text" [(ngModel)]="inputValue"> <br><br>
<button type="submit" (click)="check()">Check</button>

Alternatively you can cut out a little bit of code by giving the input html a local reference and refer to it in the button click function

  check(value){
    console.log('running check',value)
  }

<input type="text" #myInput> <br><br>
<button type="submit" (click)="check(myInput.value)">Check</button>