There is an application:

enter image description here

You need to set the data in the Dropdown button from JSON. The data comes from here:

 https://dog.ceo/api/breeds/list/all

Almost solved the problem, but for some reason instead of data comes [object Object] .

Here is the code:

 app.component.html <div class="row"> <div class="dropdown col-sm-12" > <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria- expanded="false"> Dropdown button </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" > <app-dog *ngFor="let d of dogs" [dog]="d"> <a class="dropdown-item">{{ d.message }}</a> </app-dog> </div> </div> </div> app.component.ts import { Component } from '@angular/core'; import { DogsService } from './dog/dogs.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], providers: [DogsService] }) export class AppComponent { dogs = []; constructor(private dogsService: DogsService) {} ngOnInit() { this.dogsService.getDogs().subscribe(dogs => { this.dogs = dogs }) } }

dogs.services.ts

 import { Http } from '@angular/http'; import { Injectable } from '@angular/core'; import { map } from 'rxjs/operators/'; @Injectable() export class DogsService { constructor(private http: Http) {} getDogs() { return this.http.get('https://dog.ceo/api/breeds/list/all') .pipe(map(response => response.json())) .pipe(map(response => response.message)) .pipe(map(response => { return response.map(d => { return { message: d.message } }) })) } }

    2 answers 2

    D.message is an object. Go to the object and the output values ​​on the index. Ty d.message [0]. I do not know, how in ng, but in vanilla it is normal for I ++

    • Thank! I'll try. - Marat Zaynullin

    Add Pipe 'keys' based on Object.keys;

     import { PipeTransform, Pipe } from '@angular/core'; @Pipe({name: 'keys'}) export class KeysPipe implements PipeTransform { transform(value: any, args: any[] = null): any { return Object.keys(value); } }

    And already use it to display information:

      <div *ngFor="let key of obj | keys">