0

Preciso popular o input com dados vindo do jQuery.

Tenho o seguinte input:

 <label>
    <input type="checkbox" id="turmas"/>
</label>

No jQuery tenho o seguinte código:

    var turma= JSON.parse(data); 
    $.each(turma, function() {
       count++;
    });
    for (var i = 0; i < count; i++) {   
      $('<input>').val(turma['turma'][i]).text(turma['turma'][i]).appendTo('#turmas'); 
    }

Estrutura do JSON:

{"Turma A", "Turma B"}

Troquei o <input> por <label> e ele mostra as turmas, mas não mostra os checkboxes.

5
  • Larissa, tem pouco código aí! Não dá pra rodar/simular seu código. Você quer popular com dados vindos via ajax ou diretamente na renderização que, no caso, está fazendo com o PHP? Poste o restante do código...
    – LipESprY
    Commented 18/01/2019 às 14:32
  • Não é recomendado utilizar o comentário para implementar sua pergunta. Para tal, edite sua pergunta e adicione as informações que quer complementar. Lembre-se destas informações que mencionei.
    – LipESprY
    Commented 18/01/2019 às 14:40
  • os dados vem em forma de array por ajax Commented 18/01/2019 às 14:42
  • Qual a estrutura desse JSON? Onde você quer "encaixar" os checkboxes? Dentro da label? No seu script ele vai pra dentro do input. Tá errado! Veja: appendTo() / Outra coisa, já fez um Tour? Outra leitura recomendada: Perguntanto - central de ajuda
    – LipESprY
    Commented 18/01/2019 às 14:49
  • Edite a pergunta, coração!
    – LipESprY
    Commented 18/01/2019 às 14:55

1 Resposta 1

2

Para começar, veja isto:

estrutura do json: {"Turma A", "Turma B"}

Seu JSON segue uma sintaxe errada! Veja:

jsonlint.com

Teste seus JSONs com o JSONLint!

Uma rápida explicação:

  1. {} (chaves) para objetos. Logo, precisa informar a propriedade:

    { "nome" : "LipESprY" }
    
  2. [] (colchetes) para vetores (lista). Logo, não declaramos a propriedade:

    ["Valor 1", "Valor 2", "Valor 3"]
    
  3. Se temos mais de um objeto, aí devemos colocá-los dentro de um vetor (lista):

    [{
        "nome": "LipESprY"
    }, {
        "nome": "Larissa"
    }]
    

Seu JSON corrigido, fica assim:

["Turma A", "Turma B"]

Obviamente que você pode melhorar, e muito, seu JSON. Mas não é o objetivo da minha resposta "melhorar" aquilo que não se refere ao problema. Só mencionei este problema devido a necessidade de corrigi-lo.


Agora para popular os dados, pode fazer assim:

<!DOCTYPE html>
<html>
    <head>
        <title>Popular checkbox por LipESprY</title>
        <!-- <script type="text/javascript" src="jquery-3.3.1.min.js"></script> -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <label id="lb_checkbox">
        </label>
    </body>
    <script type="text/javascript">

        data = JSON.parse('["Turma A", "Turma B"]');

        for (let valor of data) {
            $("<input type='checkbox' value='"+valor+"'>"+valor+"<br>").appendTo('#lb_checkbox');
        }

    </script>
</html>

Foi o que pude desenvolver com o pouco de código que você postou, depois de bastante esforço! Agora cabe a você adaptar ao seu projeto...

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .