How do I output JSON data that has mutiple arrays with in it? Using an Interface?

Question

So I am still kind of a novice at Angular 2. My API call returns an object with several arrays and objects within it.

This is the JSON object I receive when i make the get request

{"report":[{"customer_name":"kaminto" , 
"customer_address":"Second","tel_no":"Second","id":"15","order_no":"RC13",
"total_amount":"28000","amount_paid":"30000","balance":"-2000",
"sale_date":"2017-08-15" ,"customer_id":"21"},"}], "message":"success" , 
"totalSales":[{"amount_paid":"1174300"}]}

I want to output the customer_name and address but they are within the Report array.

Using observables, How can I save this information into objects that i can bind to the html.

Please help.

Why can't you just display the information on the html as is in the array? Your information is already in objects. The objects are just also contained in an array. Can the report property contain more than 1 object in the array? — Jun Kang
– Jun Kang, Commented Sep 29, 2017 at 16:56

Kissa Eric · Accepted Answer · 2017-09-29 17:26:46Z

1

[SOLVED]

I know this is embarrassing, but i solved it. I just had to add the string type and array brackets to the interface report variable.

export interface ISalesReport{
 report:string[];
 message:string;
totalSales:string[];
}

I don't know exactly why, but after i did this, it worked.

answered Sep 29, 2017 at 17:26

Kissa Eric

771 silver badge11 bronze badges

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

Comments

Julius Dzidzevičius · Accepted Answer · 2017-09-29 17:00:38Z

0

You get that object from Observable? Yes, it is not necessary if you only need value of two properties. Something like this should help:

customer_name;
customer_address;

yourObservable.map(allReports => allReports.map(report => report
.map(val => { this.customer_name = val.customer_name; 
this.customer_address = val.customer_address } ));

answered Sep 29, 2017 at 17:00

Julius Dzidzevičius

11k11 gold badges41 silver badges84 bronze badges

1 Comment

Kissa Eric Over a year ago

I have tested this out as well and it appears to work as well.

amal · Accepted Answer · 2017-09-29 16:57:59Z

0

Suppose you called your service in your component that returns an observable of the GET call.

In your Service,

getCall() {
 return this.http.get(...).map((res) => res.json());
}

In your Component, (say you assign to a property),

responseObj: Observable<any>;

// say you receive values in ngOnInit(),

ngOnInit() {
 this.responseObj = this.service.getCall();
}

In your html, use the async pipe for eternally binding it to the observable,

<div [innerHTML]="(responseObj | async)?.report[0].customer_name"></div>
<div [innerHTML]="(responseObj | async)?.report[0].customer_address"></div>

Hope it helps.

answered Sep 29, 2017 at 16:57

amal

3,1801 gold badge15 silver badges21 bronze badges

Collectives™ on Stack Overflow

How do I output JSON data that has mutiple arrays with in it? Using an Interface?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related