Como Listar Dados do Array em Tabela HTML - Curso de Javascript Puro Orientado a Objetos - Aula 4

Listando Objetos do Array em Tabela.
➡️ Curso Completo:
bit.ly/PacoteF...
--- Links Importantes:
🎁 Curso Completo:
bit.ly/PacoteF...
✅ Curso que Recomendo:
programadoresp...
🎮 Desenvolvimento de Games:
programadoresp...
--- Equipamentos que uso nos vídeos:
💻 Notebook: amzn.to/3oXueE8
🎙️ Áudio: amzn.to/39JRHCx
🪑 Cadeira: amzn.to/3ssLGmd
🖱 Mouse: amzn.to/39AjDIQ
-
Nesta aula vamos aprender como listar os objetos do array e exibi-las em uma tabela HTML de forma dinâmica.
Vamos acessar os objetos de dentro do array utilizando laço de repetição (for), em seguida criaremos a tabela dinamicamente com as funções insertRow() e insertCell() nativas do javascript.
Todo o projeto é construído com a estrutura orientada a objetos.
Para o vídeo não ficar muito longo, dividimos essa aula em 2 partes, sendo essa a segunda parte do vídeo. A primeira parte está aqui na descrição, logo abaixo (vídeo 3).
Esta aula é um verdadeiro passo a passo pra você dar um salto na sua caminhada como desenvolvedor(a).
Espero que te ajude!
Um grande abraço e até o próximo vídeo!
-
--- Curso Completo Pacote Fullstack:
programadoresp...
⬇🔻 ASSISTA TODAS AS AULAS ⬇🔻
Aula 01 - Introdução O.O
• Programação Orientada ...
Aula 02 - Criando o Front-End
• Tela Front-End do Zero...
Aula 03 - Adicionando Item na Lista com Array
• Como Adicionar e Manip...
Aula 04 - Listando Itens do Array na Tabela
• Como Listar Dados do A...
Aula 05 - Removendo Itens do Array
• Como Remover Elementos...
🔻 Conecte-se comigo 🔻
💻 Blog:
📸 Insta: / programadorespartano
👍 Face: / programadorespartano
#listando #array #tabela #objetos #javascript #arrayJavascript #frontEnd #HTML #CSS #javascript #cursojs #cursoDeJavascript #js #OrientaçãoObjetos #programadorespartano
array, javascript, manipulando objetos e array, objetos array javascript, insertRow table, insertCell table, push js, listar dados array, criar tabela dinâmica javascript, laço de repetição js, for js, trabalhando com array js, front end e back end, html css javascript, orientada a objetos, curso de javascript, programação orientada a objetos, manipulação tabelas javascript, aprender programar, o que é orientação a objetos, paradigma de orientação a objetos, programador espartano.

[@soueujackson9723]

caramba cara! depois que você começa a ver resultado é muito top!!! vc é fera manoo. no começo é complicado mais depois de estudar muito começa a fazer sentido! programação é top d maisss

[@eduardoandrade6353]

Sou iniciante e nesse momento a clareza na explicação é fundamental. Parabéns pela didática!! + 1 inscrito!!

[@anthony_00500]

Muito boa a explicação!! Aproveitei e implementei a função focus() para sempre que eu salvar, eu poder digitar rapidamente o proximo produto. Tambem seria legal, após apertar 'enter' no input de produto, ele já focar no input de valor.

[@tiagoribeiro7037]

Cara que aula sensacional, explicou de forma direta e fácil um assunto complexo.

[@ProgramadorEspartano]

Valeu amigo. Estamos aqui para ajudar ao máximo possível. Bora programar!!!!

[@israelgomes6594]

meu nobre, você é o melhor professor que já conheci

[@ProgramadorEspartano]

Vlw amigo!!

[@auroragirardi5600]

Mano, essa playlist tá me ajudando muito, muito obrigada

[@minhacolecao]

Estava precisando exatamente disso aí, valeu!

[@fabiosantos1741]

Parabens amigo pelo incrivel trabalho, vou acompanhar até o fim de cada playlist

[@andersonaguiar4465]

SENSACIONAL.. Clareou muito, obrigado pela dedicação

[@sssouto241]

Mais uma aula top. Parabéns.

[@rafaelfacundo1529]

Cara! Você é show!

[@Jonataslks]

Esse video me salvou! Obrigado!!

[@nikegamer2779]

Vídeo muito bom man, obrigado 🙌

[@Wenderson117]

Cara, porquê você parou? Suas aulas são muito boas!

[@ProgramadorEspartano]

Não paramos não amigo, só está muita correria de projetos por aqui srsrsr....mas em breve retornaremos com mais vídeos no canal. Pode ficar tranquilo!

[@nandohanauer6611]

Amigos, eu consegui dar continuidade no código aonde cria um contador que soma o total das compras. Apenas mudei um pouco o formato do front-end, mas os códigos seguem a mesma linha da aula, e os ícones edit e delete acabei salvando na pasta img como PNG pois como SVG no site não me disponibilizava gratuitamente. Abaixo, segue o código 👇🏻👇🏻

[@ednaldo2796]

Parabéns

[@soueujackson9723]

aprendendo muito mano parabénss!!! o meu aqui paro no push mas to tentando achar o problema

[@soueujackson9723]

Dei um jeito aq kkk

[@rivaldosouza362]

excelente ganhou um inscrito

[@acoloniainvestimentos1159]

com muita sorte emcontrei seus videos com tutoriais e estou tendo acesso a seu curso gratuito, e com sua didática perfeita estou conseguindo fixar muitas coisas, porém acredito que não é o suficiente para realmente aprender a programar, ainda acredito que estou aprendendo da forma errada, pois não sou tão difícil de aprender as coisas , sempre fui auto de data mas esse js estar me deixando maluco.

[@ProgramadorEspartano]

Comece por partes...vá entendendo cada detalhe pra só depois dar um salto pro próximo conteúdo

[@dos.santos.trader]

Estou sofrendo também, estou fazendo o curso da alura, mas tá bem difícil.

[@jamotos2008]

Muito bom. Valeu!

[@adryelmartins6943]

Programador, não sei se falou no vídeo, mas para que posso usar o this? Quando usar

[@gadsgadsx]

Muito bom!

[@luizpaulofranca1482]

Show de bola!!!

[@washingtonvieira6595]

Execelente aula. Você pode me ajudar em como eu posso fazer exatamente a mesma tabela só que pra produtos independentes, por exemplo usar um "summary" no html para fazer uma ação e dentro disso ter essa tabela escrita para adicionar (nome do produto) e dentro desse nome de produtos adicionar outros infoprodutos que servem para produzir este (nome produto)? varias vezes em produtos diferentes ?

[@diegolima2652]

olá, amigo, você compartilhou esses codigos em alguma plataforma? github algo do tipo?

[@pinkloucalouca877]

Perfeitoooo

[@reydsonmartins3165]

Faz um exmeplo desses usando uma API, popular a tabela html com ps dados da API

[@PedroHenrique-zk9gt]

Vc não tem o código fonte deste projeto?

[@ivofrancisco1193]

Perfect!!!!!

[@concurseiropadrao1761]

show!!

[@Jhean_Perdido]

Eu não preciso criar o elemento td quando utilizo = tr.insertCell() ??

[@wesleyalves1141]

bom dia , você não teria uma vídeo aula de criar um CRUD , com conta bancaria , usando um Arraylist para simular um banco de dados .

[@guilhermepompeumascarenhas5761]

Por favor me ajuda!!!! no meu caso eu tenho já uma tabela pronta, que funciona basicamente como um documento que seria preenchido com os valores inseridos nos inputs, como eu faria para enviar os dados recebidos a esta tabela que seria teoricamente um documento, ela fica em outra pagina ou seja, tenho uma pagina que insere os valores e outra que mostra esse valor

[@rafaelfacundo1529]

Deixa eu perguntar, comprei um dashboard no Themeforest, insiro ele e tal, só que não sei sobre os dados

[@giovannifg123]

Irmão, poderia me ajudar? Minha página é sobre cadastro de Nome e Idade, porém na hora que eu clico no botão Salvar, ele inclui as informações na tela e elas somem em 1 segundo, depois volta a página do zero. O que eu faço? Na hora de imprimir na tela é como se fosse uma piscada, ela aparece e some rapidamente. No console também ocorre o mesmo e diz que não há nenhum problema.

[@sonicplays8740]

Troca o type dos botões para ''button''.

[@gsouzar]

Fala amigao. Rpz, estou fazendo o projeto linha por linha, mas, em listatabela ele esta reclamando que não pode ler as propriedades do array, como id e as outras. O meu codigo esta exatamente como o seu. Teria como vc me ajudar nesse sentido? Muito obrigado e sucesso.

[@acoloniainvestimentos1159]

olá @programadorespartano tudo bem? cara já faz um tempinho que comecei a tentar aprender a programar, já arranho bem HTML e CSS, porém estou apanhando de mas no Java Script, Só ainda não desisti porque não tenho essa opção em meus princípios, mas confesso que estou achando muito complicado devido ao fato de não estar conseguindo fixar em minha mente.

[@ProgramadorEspartano]

O segredo é praticar muito...

[@toitoesporte2610]

tô fazendo um projetinho pra dar aquela afiada no meu JavaScript , esse vídeo tem me auxiliado bastante porém , eu não estou conseguindo de jeito nenhum , somar os valores do atributo preço e exibir o resultado abaixo da tabela , tentei de tudo : com um for , reduce ... mas não vai o que eu poderia fazer ??

[@ProgramadorEspartano]

Opa, tenta colocar uma variável fora do laço, e dentro do laço atribua a está variável a soma dos valores, ex: let X += valor.... tem várias forma de resolver isso...tente assim pra ver se vc consegue. Abraços.

[@toitoesporte2610]

@@ProgramadorEspartano brother , matei a pau , eu não estava sabendo usar o reduce kkkkk

[@avfc-ec7in]

pra mim ta dando erro na hora de colocar a foto pelo JS, meu codigo ta igual o dele! nao sei mais o que fazer

[@rudgesantos7607]

Parabéns pelo vídeo, mas fiquei com uma dúvida sobre o tbody.innerText = ' ', por qual motivo ele só imprime a última repetição do array.

[@hyanguerra8568]

Porque toda vez que você clica no salvar ele recria tudo que já está executado mais uma vez, se você não definir que a ultima ação não deve ser recriada ele vai acumulando a ação e multiplicando.

[@lyrisnunes3982]

estou com uma dúvida, preciso fazer isso tudo no js ? ou consigo fazer a tabela pelo html ?

[@ProgramadorEspartano]

Como é um treinamento para aprendizado, fazer em JS, você pratica para entender o funcionamento por trás dos frameworks.

[@antonyalbuquerque7736]

Cometi algum erro em insertRow

[@delthapx7890]

Tem como liberar o codigo para a gente poder usar ?

[@lucianofran4696]

Parabéns, tem os arquivos para download ?

[@deborasousa3189]

como faço para pegar essa tabela que foi gerada e imprimir em PDF, mas ficando formatado? Consegui imprimir a lista, mas não consegui formatar para imprimir linha abaixo da outra. Alguém consegue me ajudar?

[@flandersonprates]

Eu queria saber uma forma de utilizar esses dados inseridos na tabela pelo usuário em uma outra função. Tem algum vídeo explicando isso? Porque depois que o usuário preenche tudo, se ele atualiza a página perde todos os dados que ele digitou.

[@isabellafrancine1287]

to com o mesmo problema.

[@hyanguerra8568]

@@isabellafrancine1287 Ai precisa mexer com banco de dados.

[@isabellafrancine1287]

@@hyanguerra8568 na vdd não precisa haha eu finalizei o projeto, mas fiz de outro jeito

[@marcosilva3859]

Não faltou o armazenamento de dados em localStorage ?

[@eletronicam]

Faltou um monte de coisas rsrs.

[@m.a5735]

O meu ta aparecendo indefinido

[@jfelipe_santosf]

libera o código ae

[@acoloniainvestimentos1159]

gostaria de saber de você se esse curso que vc vende abrange muito mais coisas do que esse seu curso gratuito " que por sinal é bem completo, para ser gratuito." eu achei espetacula e de muita serventia , porém gostaria de saber de você , se todo começo é difícil assim mesmo , se eu estou aprendendo da forma errada, se seu curso realmente vai fazer de mim o programador( e é lógico que sei que vai depender do meu empenho, esforço e persistência). Na verdade gostaria de ouvir uma palavra de apoio de que é possível sim kkkkkkk e se o curso realmente é completo.

[@ednetolls]

vai uma palavra de incentivo. Todos podemos chegar lá, e na programação o segredo esta na pratica constante, seria como um musculo que precisa ser exercitado diariamente, então comece com pequenos "desafios", por exemplo estudou algum conteúdo X então crie algo disso que você aprendeu, e repita o processo a cada novo passo. Isso vai te ajudar a fixa o que estudou, vai ajudar a correr atrás de respostas quando algo der errado, pois programação é pesquisa também para entender como resolver os problemas.

[@eletronicam]

Tá amigão e para saber em qual posição do array está cada registro??? kkkkk É o famoso "sabe fazer, mas não sabe ensinar" rsrs. O título deveria ser "como não programar em javascript"