Javascript Falha com propriedade que tem uma lista dentro de um objeto no JAVASCRIPT

Endmmans · 25 de maio de 2023

Preciso adicionar as propriedades do meu objeto "dados" de JAVASCRIPT em uma tabela HTML, porém uma dessas propriedades contém uma lista com outras 2 propriedades. Quero adicionar apenas uma delas. Como faço isso? Rodem o código para entenderem melhor o problema que acontece.

<!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>Tabela</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="god">
        <div class="entradas">
            <input type="text" id="nome" placeholder="Nome" autofocus>
            <select name="" id="cidade">
                <option value="" selected hidden>Selec. a cidade</option>
                <option value="0">São Paulo</option>
                <option value="1">Campinas</option>
                <option value="2">Limeira</option>
                <option value="3">Ribeirão Preto</option>
            </select>
            <input type="number" name="" id="idade" placeholder="Idade">
            <button id="adicionar">Adicionar</button>
        </div>
        <table id="tabela">
            <thead>
                <tr>
                    <th>Nome</th>
                    <th>Cidade</th>
                    <th>Idade</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <script>
        let adicionar = document.querySelector("#adicionar");
        adicionar.addEventListener("click", add);

        function add(){
            let tabela = document.querySelector("#tabela");
            let nome = document.querySelector("#nome").value;
            let cidade = document.querySelector("#cidade");
            let indice = cidade.selectedIndex;
            let cidadeTexto = cidade.options[indice].text;
            let cidadeValor = cidade.value;
            let idade = document.querySelector("#idade").value;


            let dados = {"nome" : nome, 
            "Cidade" : [{"cidadeValor" : cidadeValor, "cidadeTexto" : cidadeTexto}], //Aqui está o problema. Como faço para adicionar apenas apenas a cidadeTexto ali no laço? Pois do jeito que está, na tabela não aparece nenhuma dessas 2.
            "idade":idade}; 
            
            tr = document.createElement("tr"); 
            for(item of Object.values(dados)){ //Crio um laço de repetição para adicionar uma célula para cada propriedade, estou com problema na propriedade cidade.
                td = document.createElement("td");
                tdTexto = document.createTextNode(item);
                td.appendChild(tdTexto);
                tr.appendChild(td);
            } tabela.appendChild(tr);

        }
    </script>
</body>

</html>

RodrigoJP · 25 de maio de 2023

tabela.appendChild(tr);

Aqui, não deveria fazer isso no tbory da table? Experimente fazer um id no tbory e usar ele aqui para incluir.

washalbano · 26 de maio de 2023

Olá!
Não entendi porque você criou essa variável dados.

você pode resolver de outra forma. segue sugestão:

<script>
    const tabela = document.querySelector("#tabela");
    const cidade = document.querySelector("#cidade");

    const adicionar = document.querySelector("#adicionar");
    adicionar.addEventListener("click", add);

    function add() {
      const nome = document.querySelector("#nome").value;
      const indice = cidade.selectedIndex;
      const cidadeTexto = cidade.options[indice].text;
      const cidadeValor = cidade.value;
      const idade = document.querySelector("#idade").value;

      // insere uma linha na tabela
      const row = tabela.querySelector('tbody').insertRow()

      // insere a primeira célula na linha
      row.insertCell().innerHTML = nome
      // insere a segunda célula na linha
      row.insertCell().innerHTML = cidadeTexto
      // insere a terceira célula na linha
      row.insertCell().innerHTML = idade

    }
  </script>

Se é trabalho de escola e você é obrigado a usar uma estrutura de repetição, segue outra sugestão

<script>
    const tabela = document.querySelector("#tabela");
    const cidade = document.querySelector("#cidade");

    const add = () => {
      const rowData = [
        document.querySelector("#nome").value,
        cidade.options[cidade.selectedIndex].text,
        document.querySelector("#idade").value
      ]

      // insere uma linha na tabela
      const row = tabela.querySelector('tbody').insertRow()

      for (item of rowData) {
        row.insertCell().innerHTML = item
      }

    }

    document.querySelector("#adicionar").addEventListener("click", add);
  </script>