Manipulando JSON e criar elementos HTML - Criando Card HTML com arquivo JSON usando JavaScript

Поділитися
Вставка
  • Опубліковано 1 гру 2024

КОМЕНТАРІ • 67

  • @co.capital
    @co.capital 9 місяців тому +4

    Você está de parabéns pela maneira como lecionou.
    Assinei vários cursos e poucos foram os professores que tiveram tanta facilidade em explicar e lembrar que uma aula serve para ensinar alguém a fazer algo e não copiar, como sua grande maioria faz.
    Ganhou mais de um inscrito, pois tenho certeza que quem assistir ficará maravilhado.
    Sucesso meu jove.

    • @evertondev
      @evertondev  9 місяців тому

      Se inscreva que vem por aí um curso aqui para iniciantes, mas qualquer coisa só me procurar no Instagram @evertondev

  • @eujoaoxavier
    @eujoaoxavier 2 місяці тому +2

    Melhor aula de fetch e JSON que ja vi, finalmente entendi o por que de transformar o response em response.json()

  • @GuilhermeRodrigues-kk9le
    @GuilhermeRodrigues-kk9le 13 днів тому

    Muito bom o conteúdo, gostei demais. O react deixa a gente preguiçoso, não sabia muito bem fazer isso com js puro, mas agora aprendi

    • @evertondev
      @evertondev  10 днів тому +1

      É bom ver que você está se desafiando e aprendendo a fazer coisas com JS puro, o React é ótimo, mas o JS puro é fundamental para entender o que está acontecendo por baixo dos panos!

  • @felipesanttos9751
    @felipesanttos9751 15 днів тому

    otima explicação, aprendi muito em 17 min de video, parabens pelo trabalho !!

    • @evertondev
      @evertondev  15 днів тому

      Obrigado pela avaliação, fico feliz que tenha gostado!

  • @gustavoterrin7921
    @gustavoterrin7921 9 годин тому

    Cara você da de 10/0 em muitos professores ai, tua didatica em muito boa valeo mesmo.

  • @marcosbarros883
    @marcosbarros883 4 місяці тому

    Que didática sensacional, Everton.
    Parabéns e obrigado. 💪🏼

  • @marciosantosvasconcelosdas3574

    Parabéns pelo trabalho! Conteúdo bem elaborado e explicação coerente! Continue assim!!!

  • @pablodeveloper
    @pablodeveloper 4 місяці тому +1

    Foi uma boa introduão a fetch e arquivos JSON, obrigado Everton!

  • @erick_ggabriel
    @erick_ggabriel Рік тому +1

    Que aulaa! Didática sensacional. Era exatamente a explicação que eu procurava, obg

    • @evertondev
      @evertondev  Рік тому

      Bons estudos! Se precisar estou fazendo mentoria particular de programação para iniciantes!

  • @Juninhokei
    @Juninhokei 10 місяців тому +1

    Uns dos melhores vídeos que eu vi
    Continue assim, explicando cada coisa que vai adicionando, pois ajuda muito quem está aprendendo.
    Ex: você explica que está adicionando border-radium pra ficar arredondado, etc....
    Parabéns novamente

    • @evertondev
      @evertondev  10 місяців тому

      Obrigado pelo elogio 😁

  • @RichardsonASilva
    @RichardsonASilva 5 місяців тому

    Massa demais, curti sua explicação e didática.

  • @gauchognulinux257
    @gauchognulinux257 4 місяці тому +1

    Show de bola ! Quero fazer uma de livros !

  • @HenriqueDias-h6r
    @HenriqueDias-h6r 2 місяці тому

    Simples, direto e funcional

  • @paulogabrieldeoliveira3054
    @paulogabrieldeoliveira3054 6 місяців тому

    Exatamente oq eu precisava, valeu professor

  • @PalomaCardoso01
    @PalomaCardoso01 Рік тому

    Excelente, tava precisando fazer exatamente isso! 👏🏾 Salvou!

    • @evertondev
      @evertondev  Рік тому

      Que bom que ajudou, qualquer coisa dou mentoria de programação!

  • @LeidianaNascimentoPatricio
    @LeidianaNascimentoPatricio Рік тому

    Show!!! Explicação maravilhosa!

  • @MarcosOliveira_dev
    @MarcosOliveira_dev 4 місяці тому

    Muito boa a aula.

  • @sarahpires2251
    @sarahpires2251 6 місяців тому

    Muito obrigada pelo ensinamento ❤

  • @ImpurosSerie-hz7bm
    @ImpurosSerie-hz7bm 10 місяців тому

    belo video. parabéns !!

  • @eduardosprangoski7230
    @eduardosprangoski7230 10 місяців тому

    Showzaço Man...

  • @se_orienta
    @se_orienta Рік тому

    Sensacional! Me ajudou demais!

  • @ICARO7
    @ICARO7 Рік тому

    Parabéns irmão 👏🤙🤠

  • @estaciosantos6936
    @estaciosantos6936 3 місяці тому

    top

  • @JogueAqui-tc5zf
    @JogueAqui-tc5zf 8 місяців тому +1

    Agora entendi para que serve o json, vou fazer isso para grandes aplicações de jogos, nomes, ect.

    • @evertondev
      @evertondev  8 місяців тому

      Esse é apenas um exemplo, o ideal que para muita informações você tenha um banco de dados, e faça uma API de consulta aos dados no banco de dados, e a consulta retorne um JSON.
      Salvar os dados em um arquivo JSON não é uma boa prática, na aula mostro apenas como exemplo.

    • @JogueAqui-tc5zf
      @JogueAqui-tc5zf 8 місяців тому +1

      Seria mais seguro mesmo colocar os dados em uma Api? Tenho uma ideia do que é uma api, porém não sei como fazer.

    • @evertondev
      @evertondev  8 місяців тому

      @@JogueAqui-tc5zf esse é um passo inicial
      ua-cam.com/video/zwWa9KKt4UY/v-deo.html&pp=ygUSbm9kZSBldmVydG9uIHRva2Vu

  • @rhuansouza8337
    @rhuansouza8337 9 місяців тому +1

    olá, no lugar do Map() para percorrer os dados do json, poderia ser um forEach também?

    • @evertondev
      @evertondev  9 місяців тому

      Sim, nesse caso o importante é ter um loop para percorrer o array

  • @Michel-jp5qn
    @Michel-jp5qn 6 місяців тому +1

    seria possivel substiur o creatElement por innerhtlml ?

    • @evertondev
      @evertondev  6 місяців тому

      Pode sim, porém não é recomendado...

  • @juanlima8098
    @juanlima8098 6 місяців тому +1

    Bom dia rapaziada, eu cheguei na parte de JSON na minha pós de big data e ainda estou com dificuldade de entender bem a definição e a finalidade de utilização.
    Eu sei até o momento que o JSON e um tipo de arquivo que é composto de chave e valor e que esse nome e um acrônimo de Java Sricpt Object notation, Mai’s algo me diz que ainda estou sendo meio leigo na minha definição

    • @evertondev
      @evertondev  6 місяців тому +1

      Mais é isso mesmo, basicamente o JSON pode ser usado para armazenar valores, não recomendo no caso de dados sensíveis, melhor usar um banco de dados, por exemplo.
      O JSON também é usado como forma de passar os dados via API, pois fica mais fácil a comunicação entre os sistemas que estão se comunicando.
      Sua definição está certa.

    • @juanlima8098
      @juanlima8098 6 місяців тому

      @@evertondev vlw mano, estou a uns dias bugado nisso. Obrigadao mesmo 🙏🏻

  • @darkin756
    @darkin756 26 днів тому +1

    Consigo fazer isso para uma barra de pesquisa de um site com varias paginas?

    • @evertondev
      @evertondev  26 днів тому

      Consegue sim, mas para isso precisa usar um banco de dados, já que são muitas páginas precisa de algum lugar para armazenar os dados.

    • @darkin756
      @darkin756 26 днів тому

      @evertondev tentei fazer com um JSon guardando os conteúdos e importar ele no JS mas não funcionou muito bem kkkkk

  • @ThiagoGato-nu4gx
    @ThiagoGato-nu4gx 4 місяці тому +1

    como posso pegar informações de um livro num banco de dados por exemplo e transformar essas informações em json pra depois virar cards? , perdão caso eu tenha explicado errado

    • @evertondev
      @evertondev  4 місяці тому

      Para isso vc deve criar uma API que conecta ao banco de dados

    • @ThiagoGato-nu4gx
      @ThiagoGato-nu4gx 4 місяці тому

      @@evertondev é muito complicado de se fazer?

  • @jhonhtuzaki8721
    @jhonhtuzaki8721 Рік тому +1

    e se eu quiser colocar uma descrição??tipo um texto dentro como eu faço???

    • @evertondev
      @evertondev  Рік тому

      Só adicionar lá no Json um atributo chamado descrição.

  • @mundosenai-k3i
    @mundosenai-k3i Рік тому

    Opa, vídeo maravilhoso! Parabéns!
    seguinte, como eu faria se quisesse colocar um link em cada card pra poder direcionar para a página de um produto por exemplo. Tentei fazer aqui mas tá dando erro.

    • @evertondev
      @evertondev  Рік тому

      opa amigo, os links tem que ir no href da tag "a", espero ter ajudado.
      Qualquer coisa dou mentoria de programação.

  • @DiegoChavesads
    @DiegoChavesads 6 місяців тому

    como colocaria os cards em um carrosel?

    • @evertondev
      @evertondev  6 місяців тому

      Do mesmo jeito, você só vai precisar de um código HTML/CSS de carrossel, e o loop vai ser feito em cada item do carrossel.

  • @luizarthurbrito9560
    @luizarthurbrito9560 11 днів тому +1

    Mano disponibiliza ai seu código pra acesso por favor

    • @luizarthurbrito9560
      @luizarthurbrito9560 11 днів тому

      Pra eu estudar mais afundo

    • @evertondev
      @evertondev  10 днів тому

      O código você pode copiar ele direto do vídeo, se quiser, não tenho mais ele aqui.

  • @nikolasvictor5253
    @nikolasvictor5253 8 місяців тому

    Tive um problema com CORs ao tentar ler o arquivo JSON, sabe como posso resolver?

    • @evertondev
      @evertondev  8 місяців тому

      Adicione isso na requisição, no read que se resolve: "Access-Control-Allow-Origin: *"

    • @evertondev
      @evertondev  8 місяців тому

      Qualquer duvida me manda msg no instagram @evertondev

  • @luissantos-zb4gx
    @luissantos-zb4gx Місяць тому

    porque não async

    • @evertondev
      @evertondev  Місяць тому +1

      o async depende bastante do contexto, a maioria das vezes você pode usar async sem problemas.

  • @mundosenai-k3i
    @mundosenai-k3i Рік тому

    os links que eu quero usar estão no arquivo JSON

    • @evertondev
      @evertondev  Рік тому

      opa amigo, os links tem que ir no href da tag "a", espero ter ajudado.
      Qualquer coisa dou mentoria de programação.

  • @carloshenriquegoncalvesval1818
    @carloshenriquegoncalvesval1818 11 місяців тому

    cara eu queria criar um projeto onde seria um input para colocar foto porem cada input pedisse um pin de 4 digitos pra colocar as fotos e ouvesse esses inputs que seriam cards sabe por 100% da tela queria dar um site para minha namorada colocar fotos porem eu só daria os pins cada vez q a gente fosse sair pra algum lugar sabe. mas ta muito dificil pra quem comecou JS essa semana kakaka

    • @evertondev
      @evertondev  11 місяців тому

      Mano, começa estudando JS que você consegue, agora se for para guarda as fotos você vai precisar de um banco de dados.
      Qualquer coisa dou mentoria individual, só me chamar no Discord, o link do nosso Discord esta na descrição do video.