2

Estou com dificuldades em fazer um array em jquery com o "each" para salvar os valores de inputs contidos dentro de uma lista, no seguinte formato:

Obs: Na lista de questões, cada questão tem uma sublista com as alternativas.

 <ul class="questoes">
        <li class="questao">
            <div class="row">
                <div class="left-col col col-md-11">
                    <input type="number" name="numero_questao" class="form-input num_quest" style="max-width: 160px" placeholder="Nº da questão" data-chave="numero_questao"> 
                </div>
                <div class="right-col col-6 col-md-1">
                    <i data-toggle="collapse" data-parent="#accordion" href="#collapse-questao" aria-expanded="true" aria-controls="collapse-questao" class="questoes_arrow fa fa-caret-up" aria-hidden="true"></i></a>   
                </div>
            </div>
            <div id="collapse-questao" class="collapse questoes_arrow_container show" role="tabpanel" aria-labelledby="heading-questao"> 
                <div class="questao-body" id="questao"> 
                    <h4 class="h5">Enunciado da questão: </h4> 
                    <textarea name="enunciado" class="form-control enunciado" data-chave="enunciado">Enunciado da questão</textarea> 
                    <div class="line"></div> 
                    <h4 class="h5">Alternativas da questão: </h4> 
                    <ul id="alternativas">
                        <li class="alternativa">
                            <input type="text" class="form-control" value="a" style="max-width: 200px" placeholder="Indice da alternativa" data-chave="indice"> 
                            <div class="alternativa-body"> 
                                <h4 class="h5">Enunciado da alternativa: </h4> 
                                <textarea name="enunciado_alternativa" class="form-control" data-chave="descricao">Descrição da alternativa</textarea> 
                                <div class="align-items-center"><input type="checkbox" name="correta" value="1" data-chave="correta"> Esta é a alternativa correta.</div> 
                            </div> 
                        </li>
                        <li class="alternativa">
                            <input type="text" class="form-control" style="max-width: 200px" value="b" placeholder="Indice da alternativa" data-chave="indice"> 
                            <div class="alternativa-body"> 
                                <h4 class="h5">Enunciado da alternativa: </h4> 
                                <textarea name="enunciado_alternativa" class="form-control" data-chave="descricao">Descrição da alternativa</textarea> 
                                <div class="align-items-center"><input type="checkbox" name="correta" value="1" data-chave="correta"> Esta é a alternativa correta.</div> 
                            </div> 
                        </li>
                    </ul>
                </div> 
        </li>
    </ul>

Já tentei de varias formas, comecei a fazer assim para tentar salvar só as alternativas para fazer um teste e nem isso deu certo:

var questoes = Array();
            $("#alternativas li").each(function () {
                var alternativas = {}

                $(this).find('input').each(function () {
                    alternativas[$(this).attr('data-chave')] = $(this).val();
                });
                questoes.push(alternativas);
            });

Para deixar mais claro, isso ai é um questionário e como tal tem 'N' perguntas e cada pergunta 'N' alternativas. A ideia é formar o questionário sob medida, o usuário que vai adicionar iterativamente as perguntas e alternativas e isso já está funcionando com o append, o problema é que preciso pegar os valores dos inputs e organizar em um array e não estou sabendo fazer isso

3
  • 1
    Qual é o problema que estás a ter? Como seria o resultado esperado? Existe mais do que 1 #alternativas na página?
    – Sergio
    8/11/2017 às 19:21
  • Sim, isso ai é um questionário e como tal tem 'N' perguntas e cada pergunta 'N' alternativas. A ideia formar o questionário sob medida, o usuário que vai adicionar interativamente as perguntas e alternativas e isso já está funcionando com o append, o problema é que preciso salvar isso em um array para enviar via ajax e inserir no banco de dados. 8/11/2017 às 21:54
  • Coloquei aquele código html la em cima apenas para dar ideia de como são formadas as listas com as questões e suas alternativas @Sergio 8/11/2017 às 21:57

2 Respostas 2

1

Exemplo pegando id e values dos inputs.

    function shoe_types(){
       var shoeObj = {};
       $('.form-buscado').each(function(){
         shoeObj[this.id] = this.value;
       });
       return shoeObj;
    }


       var cazzo = ( JSON.stringify( shoe_types() ) );
       console.log(cazzo);
       
       console.log(JSON.parse(cazzo));
       
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="row">
                    <div class="left-col col col-md-11">
                    
                    
    <input type="number" name="numero_questao" class="form-input num_quest" style="max-width: 160px" placeholder="Nº da questão" data-chave="numero_questao"> 
                        
                        
                    </div>
                    <div class="right-col col-6 col-md-1">
                        <i data-toggle="collapse" data-parent="#accordion" href="#collapse-questao" aria-expanded="true" aria-controls="collapse-questao" class="questoes_arrow fa fa-caret-up" aria-hidden="true"></i></a>   
                    </div>
                </div>
                <div id="collapse-questao" class="collapse questoes_arrow_container show" role="tabpanel" aria-labelledby="heading-questao"> 
                    <div class="questao-body" id="questao"> 
                        <h4 class="h5">Enunciado da questão: </h4> 
                        <textarea name="enunciado" class="form-control enunciado" data-chave="enunciado">Enunciado da questão</textarea> 
                        <div class="line"></div> 
                        <h4 class="h5">Alternativas da questão: </h4> 
                        <ul id="alternativas">
                            <li class="alternativa">
                            
                            
    <input type="text" id="questaoA" class="form-buscado" value="a" style="max-width: 200px" placeholder="Indice da alternativa" data-chave="indice"> 
                                
                                
                                <div class="alternativa-body"> 
                                    <h4 class="h5">Enunciado da alternativa: </h4> 
                                    <textarea name="enunciado_alternativa" class="form-control" data-chave="descricao">Descrição da alternativa</textarea> 
                                    <div class="align-items-center">
                                    
                                    
    <input type="checkbox" id="enunciadoA" class="form-buscado" name="correta" value="1" data-chave="correta"> 
                                    
                                    
                                    Esta é a alternativa correta.</div> 
                                </div> 
                            </li>
                            <li class="alternativa">
                            
                            
    <input type="text" id="questaoB" class="form-buscado" style="max-width: 200px" value="b" placeholder="Indice da alternativa" data-chave="indice"> 


                                <div class="alternativa-body"> 
                                    <h4 class="h5">Enunciado da alternativa: </h4> 
                                    <textarea name="enunciado_alternativa" class="form-control" data-chave="descricao">Descrição da alternativa</textarea> 
                                    <div class="align-items-center">
                                    
                                    
    <input type="checkbox" id="enunciadoB" class="form-buscado" name="correta" value="1" data-chave="correta">
                                    
                                    
                                    
                                    Esta é a alternativa correta.</div> 
                                </div> 
                            </li>
                        </ul>
                    </div> 
            </li>
        </ul>
         <button id="get">Create Object</button>

2
  • Desse jeito não da certo, tem que ser associativo entende? O que seria mais ou menos ao equivalente em php assim: questoes[0] = array("questao" => 1, "enunciado" => "qualquer coisa", "alternativas" => array_alternativas). 9/11/2017 às 3:55
  • @LeandroSilvaCampos, esse html com seu proposito está meio confuso, tente melhorar seu código criando um exemplo Mínimo, Completo e Verificável, e mostrar uma provável saída desejável
    – user60252
    9/11/2017 às 12:34
1

Bom dia, Leandro.

Fiz um pequeno código pra você usar como apoio:
https://codepen.io/mathues/pen/oJJbWO

Utilizei o framework Vue.js por ser bem simples e de fácil utilização.

Se te interessar conhecer mais sobre o Vue.js aqui está um outro link com mais informações sobre.
https://br.vuejs.org/v2/guide/index.html

Fica bem!

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 .