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": "[email protected]",
"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": "[email protected]",
"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.
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.
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