0

JSON response is as below:

{
    "clientInfo": [
        {
            "clientId": "1234",
            "clientName": "Test1234"
        },
        {
            "clientId": "4356",
            "clientName": "Test4356"
        }],
    "realTimeClientInfo": [
        {
            "clientId": "1234",
            "clientName": "Test1234",
           "Location": "Test1234",
            "Designation" :"Test1234"

        },
        {
            "clientId": "4356",
            "clientName": "Test7896",
           "Location": "Test7896",
            "Designation" :"Test7896"
        }]
        }

I want to fetch the data from the second JSON array.

In client.component.ts invoke the clientService as below:

@Input() clientInfo$: Observable<any>;
constructor(private clientService: ClientService) { }

 ngOnInit() {  this.clientInfo$ = Observable
                            .interval(1000)
                            .startWith(0).switchMap(() => 
  this.clientService.getAllInfo()); }

client.service.ts is as below : 

getAllInfo(): Observable<ClientInfo[]> {
    this.http.get<ClientInfo[]>('http://localhost:8080/api/auth/clientInfo');

In client.component.html

                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th *ngFor="let col of clientH">{{ col }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let client of clientInfo$ | async ">
                            <td *ngFor="let col of clientH"> {{client [col]}}</td>
                        </tr>
                    </tbody>
                </table>

If the JSON contains only one single array this is working. How we can use the same logic to retrieve some values from first array and some other values from the second array

Improve this question
2
  • Please refer these links. stackoverflow.com/questions/40495483/… stackoverflow.com/questions/46700055/… stackoverflow.com/questions/50091731/… Commented Nov 20, 2018 at 15:54
  • Modified client.compoennt.ts as ngOnInit() { Observable .interval(10000) .startWith(0) .switchMap(() => this.clientService.getAllInfo()).subscribe(clientInfo$ => this.clientInfo$ = clientInfo$ } } and Changed client.component.html as <table class="table table-hover" *ngIf="clientInfo$"> <tbody> <tr *ngFor="let client of clientInfo$.realTimeClientInfo "> <td *ngFor="let col of clientH"> {{client [col]}}</td> </tr> </tbody> </table> Commented Nov 22, 2018 at 11:24
Related questions
0
Iterate through json string in Observable angular js 2
1
Extract data from JSON response in a angular 2 service
0
angular 2 how to assign an array of JSON response using Observable and map in typescript interface and retrieve in html using *ngFor?
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.