Javascript Como exibir um Objeto Javascript dentro de uma div?

imDEV · 19 de setembro de 2022

Olá a todos, sou iniciante em programação e me deparei com a seguinte situação.

Sei criar um objeto, porêm não sei como exibilo dentro de uma div no meu html.

Suponhamos que eu quisesse exibir o seguinte objeto dentro da minha <div class="objeto">

let meuObjeto = {
  nome: 'Faca',
  marca: 'Tramontina',
  valor: 'R$ 45,00'
}

De que forma eu faria isso?

com inner.HTML ? inner.Text ? nenhum dos dois ?

DiF · 19 de setembro de 2022

@imDEV Podes fazer com InnerHTML.

<div id="objeto">

let meuObjeto = {
  nome: 'Faca',
  marca: 'Tramontina',
  valor: 'R$ 45,00'
}

document.getElementById("objeto").innerHTML = "Nome: " + meuObjeto.nome +
 "<br/>Marca: " + meuObjeto.marca + "<br/> Valor: " + meuObjeto.valor;

Exemplo online: https://jsfiddle.net/dife/4kcrg1sL/

NO exemplo acima, o elemento DIV precisa ser com "ID", caso queira usar "class".. fica dessa maneira:

<div class="objeto">

document.getElementsByClassName("objeto")[0].innerHTML = "Nome: " + meuObjeto.nome +
 "<br/>Marca: " + meuObjeto.marca + "<br/> Valor: " + meuObjeto.valor;

washalbano · 19 de setembro de 2022

Olá!
Exibir com que intuito?
Se for apenas para debugar, segue sugestão:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Debugar objeto</title>
  <style>
    div.objeto {
      font-family: monospace;
      white-space: pre;
    }
  </style>
</head>

<body>
  <div class="objeto"></div>

  <script>
    let meuObjeto = {
      nome: 'Faca',
      marca: 'Tramontina',
      valor: 'R$ 45,00'
    }

    document.querySelector('.objeto').innerHTML = JSON.stringify({ meuObjeto }, null, 2)
  </script>
</body>

</html>

GabrielSennaMs · 19 de setembro de 2022

@imDEV No caso de debbug você pode usar o proprio console do Web development tools.

Nesse caso eu usei o console.table.

imDEV · 30 de setembro de 2022

@DiF

Em 19/09/2022 às 05:28, DiF disse:

<div class="objeto">

document.getElementsByClassName("objeto")[0].innerHTML = "Nome: " + meuObjeto.nome +
 "<br/>Marca: " + meuObjeto.marca + "<br/> Valor: " + meuObjeto.valor;

@DiF entendi qual era o problema, eu estava tentando usar o class e não o ID.

bom, entendi a forma de usar o ID, agora essa forma de usar a class só não entendi essa array antes do innerHTML.

Teria como me explicar basicamente o porque usar essa array antes ?

DiF · 30 de setembro de 2022

@imDEV

12 horas atrás, imDEV disse:

agora essa forma de usar a class só não entendi essa array antes do innerHTML.

Teria como me explicar basicamente o porque usar essa array antes ?

O método getElementsByClassName retorna um vetor de objetos, o HTMLcollection que contém todos elementos filhos que possuem o nome da classe informado.
Ele vai pegar as várias ocorrências de uma classe.. é uma lista também. Então no caso, no exemplo continha apenas 1 elemento com essa classe, logo, seria necessário buscar o primeiro elemento dessa lista.. que é o índice zero. [0]

document.getElementsByClassName("objeto")[0]

Agora vamos a outro exemplo:

p.azul{ color: blue;}
p.vermelho{color: red;}

<div>
   <p class="azul">Este parágrafo contém uma frase em azul</p>
   <p class="vermelho">Este parágrafo contém uma frase em vermelho</p>
   <p class="vermelho">Este parágrafo contém uma frase em vermelho</p>
   <p class="vermelho">Este parágrafo contém uma frase em vermelho</p>
</div>

Vamos supor que você precisa alterar o texto e a cor do segundo paráfrafo de um dos filhos de um elemento

document.getElementsByClassName("vermelho")[1].innerHTML = "Agora este segundo parágrafo está na cor verde";
document.getElementsByClassName("vermelho")[1].style.color = "#52cf44";

Veja, que agora, o elemento possui 3 ocorrências da mesma classe, para buscar o segundo elemento, informamos ao getEelementsByClassName que seja pego o elemento no índice [1]

Veja na prática: https://jsfiddle.net/dife/t40z2m8x/1/