Consumindo uma API pessoal | Angular parte 1: produtividade e organização com framework SPA

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

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

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

03/09/2019

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:

Fazer dois ngFor , um para o primeiro array e outro para o segundo.
Criar uma função onde vai transformar o segundo array para alguma estrutura que você possa acessá-lo.
Ao chamar a API, você pode fazer um pipe e map para modelar os dados na estrutura que você precisa.
Criar uma classe modelo para te dar os dados na estrutura correta.
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

03/09/2019

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

Id da lista
Nome do dono
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

| 3484k xp | 5398 posts

Instrutor

03/09/2019

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!