Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Consumindo uma API pessoal

Referente ao curso Angular parte 1: produtividade e organização com framework SPA, no capítulo Integração com Web API's e atividade Consumindo dados da API

por Ana Paula Fagundes Gomes
| 76.1k xp | 33 posts
Estagiária

Oi professor!

Eu fiz uma API em Spring Boot e ela consiste em uma lista com itens dentro, porém, ao tentar colocar estes itens no Angular ele não consegue pegar os itens pois eles estão em um segundo array:

{
  "id": 1,
  "item": [
    {
      "id": 2,
      "name": "Item teste",
      "description": null,
      "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Sultan_the_Barbary_Lion.jpg/440px-Sultan_the_Barbary_Lion.jpg",
      "cloth": null,
      "color": null,
      "location": "google.com",
      "price": 10.0
    },
    {
      "id": 4,
      "name": "Item de outro teste",
      "description": null,
      "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Lioness_Etosha_NP.jpg/500px-Lioness_Etosha_NP.jpg",
      "cloth": null,
      "color": null,
      "location": "google.com",
      "price": 10.0
    }
  ],
  "userName": "Fulano"
}

No primeiro array eu tenho id, item e userName, porém no array interno eu possuo o image e description que eu gostaria de inserir durante as suas aulas.

Sintaxe atual do app.component:

<ap-photo *ngFor="let photo of photos" 
    [url]="photo.image" 
    [description]="photo.description">
</ap-photo>

A dúvida é: Como eu poderia capturar os dados dentro deste segundo array chamado item ?

3 respostas
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala aí Ana, tudo bem? Vamos lá:

Isso pode ser feito de N maneiras, eu precisaria ver a tela como você quer montar.

Mas, algumas opções para conseguir isso:

  1. Fazer dois ngFor , um para o primeiro array e outro para o segundo.
  2. Criar uma função onde vai transformar o segundo array para alguma estrutura que você possa acessá-lo.
  3. Ao chamar a API, você pode fazer um pipe e map para modelar os dados na estrutura que você precisa.
  4. Criar uma classe modelo para te dar os dados na estrutura correta.
  5. etc...

Tem várias opções, precisa entender o seu cenário para saber qual a recomendável.

Espero ter ajudado.

por Ana Paula Fagundes Gomes
| 76.1k xp | 33 posts
Estagiária

Oi professor. No meu caso cada pessoa tem uma lista por isso o userName e no perfil delas elas teriam esta lista de itens.

Exemplo: eu quero a lista da Ana

http://localhost:8080/wishlist?userName=Ana

Retorno

  1. Id da lista
  2. Nome do dono
  3. Lista de itens que serão exibidos

No final será uma página que terá somente os itens pegos dentro desta lista da Ana (que é um array dentro de um array).

solução!
por Gabriel Leite
| 3485k xp | 5398 posts
Instrutor

Boa noite, Ana Paulo! Como vai?

Veja que a resposta da sua API na realidade não é um array e sim um objeto! Para conseguir diferenciar um do outro veja que o valor da chave item começa e termina com colchetes enquanto que a sua resposta começa e termina com chaves!

Entendida essa parte, vamos a solução! Para resolver essa questão basta fazer:

http
    .get('http://localhost:8080/wishlist?userName=Ana')
    .subscribe(resposta => this.items = resposta.item);

onde this.items é um atributo da sua classe do tipo de dado que representa um array com cada um dos itens da lista! E, por fim, mas não menos importante, para listar:

<ap-photo *ngFor="let item of items" 
    [url]="item.image" 
    [description]="item.description">
</ap-photo>

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, minha aluna!