Need help with my API call implementation. Here's a snippet from my Input component:
Input.html
<form (submit)="getTransactions()">
<div class="form-group">
<label for="exampleInputEmail1"></label>
<input type="text" class="form-control" [(ngModel)]="address" name="address" placeholder="Bitcoin Address">
<button type="submit" class="btn btn-primary">Submit</button>
{{address}}
</div>
</form>
<app-display [address]="transactions"></app-display>
input.ts
export class InputComponent implements OnInit {
address = "3MvuMn4CESuvA89bfA1cT8mgC4JtKaReku";
transactions = [];
constructor(private blockchain: BlockchainService) { }
ngOnInit() {
}
submit(){
console.log(this.address)
}
getTransactions(){
this.blockchain.getTransactions().subscribe((data) => {
// console.log(data.json())
this.transactions = data.json();
console.log(this.transactions)
});
}
}
Console logging shows the json object correctly in my Input component, but in my Display component I'm getting "[object Object]". No errors are thrown.
display.htlm
<button (click)="hello()"></button>
display.ts
export class DisplayComponent implements OnInit {
@Input() address = [];
constructor(private blockchain: BlockchainService) { }
ngOnInit() {
}
hello(){
console.log(`data ${this.address}`);
}
}
service.ts
@Injectable()
export class BlockchainService {
baseurl: string = "http://localhost:4200/assets/info.json"
constructor(private http: Http) { }
getTransactions(){
return this.http.get(this.baseurl);
}
}