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

Поделиться
HTML-код
  • Опубликовано: 24 янв 2025

Комментарии •

  • @evertondev
    @evertondev  15 дней назад

    🚀 Está com dificuldades para estudar ou desenvolver um projeto? Sou professor de Desenvolvimento de Sistemas e quero te ajudar!
    Preencha o formulário:
    → evertonfigueiredo.com.br/proposta.html

  • @co.capital
    @co.capital 11 месяцев назад +6

    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  11 месяцев назад

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

  • @eujoaoxavier
    @eujoaoxavier 4 месяца назад +4

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

  • @davigarcia5794
    @davigarcia5794 22 дня назад

    Muito top! Parabéns 👏🏻

  • @gustavoterrin7921
    @gustavoterrin7921 Месяц назад

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

  • @GuilhermeRodrigues-kk9le
    @GuilhermeRodrigues-kk9le 2 месяца назад

    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  2 месяца назад +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!

  • @Juninhokei
    @Juninhokei Год назад +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

  • @felipesanttos9751
    @felipesanttos9751 2 месяца назад

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

    • @evertondev
      @evertondev  2 месяца назад

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

  • @marciosantosvasconcelosdas3574
    @marciosantosvasconcelosdas3574 Год назад +1

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

  • @marcoswodbarros
    @marcoswodbarros 6 месяцев назад

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

  • @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!

  • @pablodeveloper
    @pablodeveloper 5 месяцев назад +1

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

  • @RichardsonASilva
    @RichardsonASilva 6 месяцев назад

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

  • @gauchognulinux257
    @gauchognulinux257 6 месяцев назад +1

    Show de bola ! Quero fazer uma de livros !

  • @HenriqueDias-h6r
    @HenriqueDias-h6r 4 месяца назад

    Simples, direto e funcional

  • @paulogabrieldeoliveira3054
    @paulogabrieldeoliveira3054 7 месяцев назад

    Exatamente oq eu precisava, valeu professor

  • @eduardosprangoski7230
    @eduardosprangoski7230 Год назад

    Showzaço Man...

  • @PalomaCardoso01
    @PalomaCardoso01 Год назад

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

    • @evertondev
      @evertondev  Год назад

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

  • @MarcosOliveira_dev
    @MarcosOliveira_dev 5 месяцев назад

    Muito boa a aula.

  • @LeidianaNascimentoPatricio
    @LeidianaNascimentoPatricio Год назад

    Show!!! Explicação maravilhosa!

  • @ImpurosSerie-hz7bm
    @ImpurosSerie-hz7bm 11 месяцев назад

    belo video. parabéns !!

  • @sarahpires2251
    @sarahpires2251 8 месяцев назад

    Muito obrigada pelo ensinamento ❤

  • @ICARO7
    @ICARO7 Год назад

    Parabéns irmão 👏🤙🤠

  • @se_orienta
    @se_orienta Год назад

    Sensacional! Me ajudou demais!

  • @rhuansouza8337
    @rhuansouza8337 11 месяцев назад +1

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

    • @evertondev
      @evertondev  11 месяцев назад

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

  • @Michel-jp5qn
    @Michel-jp5qn 7 месяцев назад +1

    seria possivel substiur o creatElement por innerhtlml ?

    • @evertondev
      @evertondev  7 месяцев назад

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

  • @estaciosantos6936
    @estaciosantos6936 5 месяцев назад

    top

  • @ThiagoGato-nu4gx
    @ThiagoGato-nu4gx 6 месяцев назад +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  6 месяцев назад

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

    • @ThiagoGato-nu4gx
      @ThiagoGato-nu4gx 6 месяцев назад

      @@evertondev é muito complicado de se fazer?

  • @pewwqa
    @pewwqa 10 месяцев назад +1

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

    • @evertondev
      @evertondev  10 месяцев назад

      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.

    • @pewwqa
      @pewwqa 10 месяцев назад +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  10 месяцев назад

      @@pewwqa esse é um passo inicial
      ruclips.net/video/zwWa9KKt4UY/видео.html&pp=ygUSbm9kZSBldmVydG9uIHRva2Vu

  • @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.

  • @DiegoChavesads
    @DiegoChavesads 8 месяцев назад

    como colocaria os cards em um carrosel?

    • @evertondev
      @evertondev  8 месяцев назад

      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.

  • @darkin756
    @darkin756 2 месяца назад +1

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

    • @evertondev
      @evertondev  2 месяца назад

      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 2 месяца назад

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

  • @juanlima8098
    @juanlima8098 8 месяцев назад +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  8 месяцев назад +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 8 месяцев назад

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

  • @luizarthurbrito9560
    @luizarthurbrito9560 2 месяца назад +1

    Mano disponibiliza ai seu código pra acesso por favor

    • @luizarthurbrito9560
      @luizarthurbrito9560 2 месяца назад

      Pra eu estudar mais afundo

    • @evertondev
      @evertondev  2 месяца назад

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

  • @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.

  • @luissantos-zb4gx
    @luissantos-zb4gx 2 месяца назад

    porque não async

    • @evertondev
      @evertondev  2 месяца назад +1

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

  • @nikolasvictor5253
    @nikolasvictor5253 10 месяцев назад

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

    • @evertondev
      @evertondev  10 месяцев назад

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

    • @evertondev
      @evertondev  10 месяцев назад

      Qualquer duvida me manda msg no instagram @evertondev

  • @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

    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  Год назад

      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.