How do I display http request data, with data from another http request as param?

Question

hi I'm trying to output multiple bootstrap 3 panels with a heading and list items with angular2 getting data from a web api

functions in my service.ts:

with the following function I get a json containing the panel headings which are components i will use

getComponents(type: string): Observable<string[]> {
    return this.http.get('http://localhost:14373/api/devices/components/' + type)
       .map((response: Response) => response.json());
}

And with this function I get a json containing all values which will be the list items

getComponentValues(type: string, component: string): Observable<string[]> {
   return this.http.get('http://localhost:14373/api/devices/components/' + type + '/' + component)
      .map((response: Response) => response.json());
}

in my component.ts I save the values of components (headings) in a string array with this function

ngOnInit() {
        this.subscription = this.route.params
            .subscribe(
                (params: any) => {
                    this.currentType = params['type'];
                    this.deviceService.getComponents(this.currentType).subscribe(
                        (data: string[]) => {
                            this.components = data;
                        }
                    );
                }
            );

    }

then I tried to write a function which will return the componentValues (list-items) as array and output them with a nested *ngFor loop.

 getComponentValues(type: string, component: string) {

        this.deviceService.getComponentValues(type, component)
            .subscribe(
                (data: string[]) => {
                    return data;
                }
            )
    }

template:

<div class="panel panel-default" *ngFor="let component of components">
    <!-- Default panel contents -->
    <div class="panel-heading">{{component}}</div>
    <!-- List group -->
    <ul class="list-group">
        <li class="list-group-item" *ngFor="let val of getComponentValues(currentType, component)">
            {{val}}
        </li>
    </ul>
</div>

but this doesn't seem to work and since I've never even touched angular2 or angular before I don't know if I'm on the right track or which approach would actually be best practice.. also I obviously don't understand observables yet

Pankaj Parkar · Accepted Answer · 2016-12-06 20:19:39Z

1

You could just return a observable from getComponentValues method which will be called for each component. And use that for inner ngFor with async pipe.

Markup

<div class="panel panel-default" *ngFor="let component of components">
    <!-- Default panel contents -->
    <div class="panel-heading">{{component}}</div>
    <!-- List group -->
    <ul class="list-group">
        <li class="list-group-item" *ngFor="let val of getComponentValues(currentType, component) | async">
            {{val}}
        </li>
    </ul>
</div>

Code

this.subscription = this.route.params
  .subscribe(
  (params: any) => {
    this.currentType = params['type'];
    this.deviceService.getComponents(this.currentType).subscribe(
      (data: string[]) => {
        this.components = data;
      }
    );
  }
);

getComponentValues(type: string, component: string) {
  return this.deviceService.getComponentValues(type, component);
}

edited Dec 6, 2016 at 20:19

answered Dec 6, 2016 at 20:06

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

13 Comments

jcal Over a year ago

thank for your quick answer, but do I have to do something else... cuz with your modifications. I get this error: Property 'componentValues' does not exist on type 'string'.

Pankaj Parkar Over a year ago

@jcal I thought component is object, give me a minute, let me edit my answer

jcal Over a year ago

I just tried to change the datatype to any[] which makes the error msg go away.. but nothing is outputted :(

Pankaj Parkar Over a year ago

@jcal tell me one thing, component is string/object?

jcal Over a year ago

its just a string

|

Collectives™ on Stack Overflow

How do I display http request data, with data from another http request as param?

1 Answer 1

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related