2

Consumo uma Api cujo retorno é um array com 10 objetos dentro, quero mostrar na tela apenas os cinco primeiros do array, que são sempre os mais recentes na Api, como podem ver no código abaixo, no teste com o while consegui pegar 5, mas, somente os 5 últimos, tentei tbm dar um reverse() antes do length, porém, bugou mais ainda a lista:

let api = [
  {
    "id": 44,
    "owner": null,
    "ownerName": null,
    "bankAccountId": "e8b2eb06-0df8-43bb-8012-ea42b63fb91f",
    "description": "Filtro de data cartão virtual ",
    "institutionName": "0021 30** **** 7404",
  },
  {
    "id": 39,
    "owner": null,
    "ownerName": null,
    "bankAccountId": "e8b2eb06-0df8-43bb-8012-ea42b63fb91f",
    "description": "Testes mais testes",
    "institutionName": "0721 30** **** 7893",
  },
  {
    "id": 27,
    "owner": null,
    "ownerName": null,
    "bankAccountId": "e8b2eb06-0df8-43bb-8012-ea42b63fb91f",
    "description": "Transferi 100,00 reais",
    "institutionName": "0221 20** **** 4895",
  },
  {
    "id": 26,
    "owner": null,
    "ownerName": null,
    "bankAccountId": "e8b2eb06-0df8-43bb-8012-ea42b63fb91f",
    "description": "Transf. de 350 reais",
    "institutionName": "0021 30** **** 7404",
  },
  {
    "id": 25,
    "owner": null,
    "ownerName": null,
    "bankAccountId": "e8b2eb06-0df8-43bb-8012-ea42b63fb91f",
    "description": "Transferência de Duzentão",
    "institutionName": "0221 30** **** 0114",
  },
  {
    "id": 11,
    "owner": null,
    "ownerName": null,
    "bankAccountId": "e8b2eb06-0df8-43bb-8012-ea42b63fb91f",
    "description": "fdfdfd",
    "institutionName": "0221 20** **** 0843",
  },
  {
    "id": 9,
    "owner": null,
    "ownerName": null,
    "bankAccountId": "e8b2eb06-0df8-43bb-8012-ea42b63fb91f",
    "description": "Transferindo 400",
    "institutionName": "0721 30** **** 7893",
  },
  {
    "id": 8,
    "owner": null,
    "ownerName": null,
    "bankAccountId": "e8b2eb06-0df8-43bb-8012-ea42b63fb91f",
    "description": "Teste 200",
    "institutionName": "0321 20** **** 1995",
  },
  {
    "id": 7,
    "owner": null,
    "ownerName": null,
    "bankAccountId": "e8b2eb06-0df8-43bb-8012-ea42b63fb91f",
    "description": "recarga 100",
    "institutionName": "0021 30** **** 7404",
  },
  {
    "id": 5,
    "owner": null,
    "ownerName": null,
    "bankAccountId": "e8b2eb06-0df8-43bb-8012-ea42b63fb91f",
    "description": "Primeira Recarga",
    "institutionName": "0221 20** **** 0843",
  }
]

let i = 5;

while(i < api.length) {
  console.log(api[i]);
  i++;
}

Como posso pegar apenas os cinco primeiros resultados do array, e guardá-los se possível em um array, pois, estou utilizando em uma tabela com Angular e faço um ngFor.

2
  • 1
    tente mudar o let i = 5; pra let i = 0; e o while(i < api.length) para while(i < 5)
    – Sumback
    23/08/2019 às 14:14
  • 1
    @Sumback, poste uma resposta, é bom para ficar registrado no site.
    – LeAndrade
    23/08/2019 às 14:32

2 Respostas 2

3

Use o método splice, passando por parâmetro a posição de inicio e fim para atribuir as 5 primeiras posições em um novo array; Ai em seu ngFor utilize o array criado para iteração.

let api = [
  {
    "id": 44,
    "owner": null,
    "ownerName": null,
    "bankAccountId": "e8b2eb06-0df8-43bb-8012-ea42b63fb91f",
    "description": "Filtro de data cartão virtual ",
    "institutionName": "0021 30** **** 7404",
  },
  {
    "id": 39,
    "owner": null,
    "ownerName": null,
    "bankAccountId": "e8b2eb06-0df8-43bb-8012-ea42b63fb91f",
    "description": "Testes mais testes",
    "institutionName": "0721 30** **** 7893",
  },
  {
    "id": 27,
    "owner": null,
    "ownerName": null,
    "bankAccountId": "e8b2eb06-0df8-43bb-8012-ea42b63fb91f",
    "description": "Transferi 100,00 reais",
    "institutionName": "0221 20** **** 4895",
  },
  {
    "id": 26,
    "owner": null,
    "ownerName": null,
    "bankAccountId": "e8b2eb06-0df8-43bb-8012-ea42b63fb91f",
    "description": "Transf. de 350 reais",
    "institutionName": "0021 30** **** 7404",
  },
  {
    "id": 25,
    "owner": null,
    "ownerName": null,
    "bankAccountId": "e8b2eb06-0df8-43bb-8012-ea42b63fb91f",
    "description": "Transferência de Duzentão",
    "institutionName": "0221 30** **** 0114",
  },
  {
    "id": 11,
    "owner": null,
    "ownerName": null,
    "bankAccountId": "e8b2eb06-0df8-43bb-8012-ea42b63fb91f",
    "description": "fdfdfd",
    "institutionName": "0221 20** **** 0843",
  },
  {
    "id": 9,
    "owner": null,
    "ownerName": null,
    "bankAccountId": "e8b2eb06-0df8-43bb-8012-ea42b63fb91f",
    "description": "Transferindo 400",
    "institutionName": "0721 30** **** 7893",
  },
  {
    "id": 8,
    "owner": null,
    "ownerName": null,
    "bankAccountId": "e8b2eb06-0df8-43bb-8012-ea42b63fb91f",
    "description": "Teste 200",
    "institutionName": "0321 20** **** 1995",
  },
  {
    "id": 7,
    "owner": null,
    "ownerName": null,
    "bankAccountId": "e8b2eb06-0df8-43bb-8012-ea42b63fb91f",
    "description": "recarga 100",
    "institutionName": "0021 30** **** 7404",
  },
  {
    "id": 5,
    "owner": null,
    "ownerName": null,
    "bankAccountId": "e8b2eb06-0df8-43bb-8012-ea42b63fb91f",
    "description": "Primeira Recarga",
    "institutionName": "0221 20** **** 0843",
  }
]

let arr = api.splice(0,5);
console.log(arr)

2

Podes usar o .slice(0, 5) que te dá exatamente os primeiros 5. Ou seja cria uma nova array só com uma parte da array inicial.

A API do .slice é .slice(<indice onde começar>, <indice onde acabar>).

let api = [{
    "id": 44,
    "owner": null,
    "ownerName": null,
    "bankAccountId": "e8b2eb06-0df8-43bb-8012-ea42b63fb91f",
    "description": "Filtro de data cartão virtual ",
    "institutionName": "0021 30** **** 7404",
  },
  {
    "id": 39,
    "owner": null,
    "ownerName": null,
    "bankAccountId": "e8b2eb06-0df8-43bb-8012-ea42b63fb91f",
    "description": "Testes mais testes",
    "institutionName": "0721 30** **** 7893",
  },
  {
    "id": 27,
    "owner": null,
    "ownerName": null,
    "bankAccountId": "e8b2eb06-0df8-43bb-8012-ea42b63fb91f",
    "description": "Transferi 100,00 reais",
    "institutionName": "0221 20** **** 4895",
  },
  {
    "id": 26,
    "owner": null,
    "ownerName": null,
    "bankAccountId": "e8b2eb06-0df8-43bb-8012-ea42b63fb91f",
    "description": "Transf. de 350 reais",
    "institutionName": "0021 30** **** 7404",
  },
  {
    "id": 25,
    "owner": null,
    "ownerName": null,
    "bankAccountId": "e8b2eb06-0df8-43bb-8012-ea42b63fb91f",
    "description": "Transferência de Duzentão",
    "institutionName": "0221 30** **** 0114",
  },
  {
    "id": 11,
    "owner": null,
    "ownerName": null,
    "bankAccountId": "e8b2eb06-0df8-43bb-8012-ea42b63fb91f",
    "description": "fdfdfd",
    "institutionName": "0221 20** **** 0843",
  },
  {
    "id": 9,
    "owner": null,
    "ownerName": null,
    "bankAccountId": "e8b2eb06-0df8-43bb-8012-ea42b63fb91f",
    "description": "Transferindo 400",
    "institutionName": "0721 30** **** 7893",
  },
  {
    "id": 8,
    "owner": null,
    "ownerName": null,
    "bankAccountId": "e8b2eb06-0df8-43bb-8012-ea42b63fb91f",
    "description": "Teste 200",
    "institutionName": "0321 20** **** 1995",
  },
  {
    "id": 7,
    "owner": null,
    "ownerName": null,
    "bankAccountId": "e8b2eb06-0df8-43bb-8012-ea42b63fb91f",
    "description": "recarga 100",
    "institutionName": "0021 30** **** 7404",
  },
  {
    "id": 5,
    "owner": null,
    "ownerName": null,
    "bankAccountId": "e8b2eb06-0df8-43bb-8012-ea42b63fb91f",
    "description": "Primeira Recarga",
    "institutionName": "0221 20** **** 0843",
  }
]

const primeiros5 = api.slice(0, 5);

console.log(primeiros5);

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .