3
respostas

App que pegue aleatoriamente dados de um objeto JS e exiba na tela (COM REACT)

Bom dia pessoal,estou com um desafio para uma entrevista de emprego e gostaria da ajuda de vocês (se possível) para conseguir essa vaga.

É uma aplicação simples ,porém ainda tenho algumas dúvidas. O desafio é pegar dados de um Objeto JS que está na seguinte url https://swapi.co/ (no caso,dados de um determinado planeta https://swapi.co/api/planets/ ) e exibir numa tela algumas informações sobre aquele planeta.

As ideias que vieram em minha mente foram as seguintes :

1º Ver ,através da url fornecida , o número de planetas e armazenar numa variável para fazer a randomização (já vi que no caso são 61 planetas).

2º Criar uma varíavel com a url base. (https://swapi.co/api/planets/)

2º Criar uma variável que concatenaria o número gerado pela randomização com a url base e geraria a "nova url". (https://swapi.co/api/planets/ + 1 )

3º Fazer um AJAX com essa nova url (https://swapi.co/api/planets/1 por exemplo).

4º Jogar no template os dados retornados (que me importam) dessa requisição.

Segue um exemplo feito que achei na internet ,para que não fique tão confusa a ideia desse app.

https://ymello-sw.netlify.com/

Acredito que a ideia até o momento está correta,mas se não tiver,podem me dar uma luz do que estaria errado ou incompleto ? Fiquei com dúvida em como fazer essa concatenação da url com o número gerado pela randomização e como,de fato,jogar no template os dados retornados da requisição. Poderiam me dar uma ajuda quanto a isso?

Eles estão recomendando utilizar o ReactJS,mas não é algo obrigatório nem restrito.

Fico no aguardo,MUITO obrigado.

3 respostas

Oi João tudo bem ?

Aqui tem um exemplo de requisição usando fetch, o principio é o mesmo que você precisa usar.

https://blog.alura.com.br/comecando-com-fetch-no-javascript/

Aqui tem um exemplo em React usando esta API:

http://blog.mycode.website/swapi-app/

Obrigado pelas respostas,pessoal. No caso,Daniel Bins,a minha lógica está correta? Comecei a estudar React por agora,então não tenho muito entendimento do código desse exemplo que você postou.