0

Necesito agregar toda mi informacion que tengo en el JSON al HTML desde JQuery, pero el inconveniente que llego a tener es que me pierdo con los tantos arreglos que tengo (son pocos).

Necesito saber si hay alguna otra forma que sea más fácil de realizar con alguna función, si este no es el caso, estoy atorado en una cierta parte ya que no se acomodan de la forma en la que yo requiero en el codigo (después de agregar la variable salto necesito seguir poniendo otro input y se repite el ciclo 5 veces, despues de eso, todo lo que esta encerrado en un "div" va a abarcar mi primera pregunta asi que hasta ahí se cierra mi div y abro nuevamente otro div para otra pregunta y se vuelve a cerrar, esto es 3 veces para poder cerrar mi div con clase main), pero no sé qué está mal, por esa parte propuse la primera idea antes explicada.

JSON

var informacion={
    "titulo":"Pratica 1",
    "cantidad_Preguntas":3,
    "preguntas":[{
        "pregunta_1":"¿África, América, Antártida, Asia, Europa, y Oceanía son?",
            "respuestas_pregunta1":[{
                "respuesta1_pregunta1":[{
                    "respuesta1_pregunta1_A":"Países",
                    "ayuda1_pregunta1_A":"Territorio, con características geográficas y culturales propias, que puede constituir una entidad política dentro de un Estado."
                }],
                "respuesta2_pregunta1":[{
                    "respuesta2_pregunta1_B":"Municipios",
                    "ayuda2_pregunta1_B":"División territorial administrativa en que se organiza un estado, que está regida por un ayuntamiento."
                }],
                "respuesta3_pregunta1":[{
                    "respuesta3_pregunta1_C":"Estados_/_provincias",
                    "ayuda3_pregunta1_C":"División territorial administrativa en que se organiza un estado, que está regida por un ayuntamiento."
                }],
                "respuesta4_pregunta1":[{
                    "respuesta4_pregunta1_D":"Continentes",
                    "ayuda4_pregunta1_D":"Es cada una de las grandes extensiones en que se divide la superficie terrestre, separadas entre sí por los océanos.",
                    "correcta":true
                }],
                "respuesta5_pregunta1":[{
                    "respuesta5_pregunta1_E":"Islas",
                    "ayuda5_pregunta1_E":"Es una zona de masa terrestre estable, más o menos extensa, rodeada completamente por una masa de agua."
                }]
            }],
        "pregunta_2":"¿África, América, Antártida, Asia, Europa, y Oceanía son?",
            "respuestas_pregunta2":[{
                "respuesta1_pregunta2":[{
                    "respuesta1_pregunta2_A":"Países",
                    "ayuda1_pregunta2_A":"Territorio, con características geográficas y culturales propias, que puede constituir una entidad política dentro de un Estado."
                }],
                "respuesta2_pregunta2":[{
                    "respuesta2_pregunta2_B":"Municipios",
                    "ayuda2_pregunta2_B":"División territorial administrativa en que se organiza un estado, que está regida por un ayuntamiento."
                }],
                "respuesta3_pregunta2":[{
                    "respuesta3_pregunta2_C":"Estados_/_provincias",
                    "ayuda3_pregunta2_C":"División territorial administrativa en que se organiza un estado, que está regida por un ayuntamiento."
                }],
                "respuesta4_pregunta2":[{
                    "respuesta4_pregunta2_D":"Continentes",
                    "ayuda4_pregunta2_D":"Es cada una de las grandes extensiones en que se divide la superficie terrestre, separadas entre sí por los océanos.",
                    "correcta":true
                }],
                "respuesta5_pregunta2":[{
                    "respuesta5_pregunta2_E":"Islas",
                    "ayuda5_pregunta2_E":"Es una zona de masa terrestre estable, más o menos extensa, rodeada completamente por una masa de agua."
                }],
        "pregunta_3":"¿África, América, Antártida, Asia, Europa, y Oceanía son?",
            "respuestas_pregunta3":[{
                "respuesta1_pregunta3":[{
                    "respuesta1_pregunta3_A":"Países",
                    "ayuda1_pregunta3_A":"Territorio, con características geográficas y culturales propias, que puede constituir una entidad política dentro de un Estado."
                }],
                "respuesta2_pregunta3":[{
                    "respuesta2_pregunta3_B":"Municipios",
                    "ayuda2_pregunta3_B":"División territorial administrativa en que se organiza un estado, que está regida por un ayuntamiento."
                }],
                "respuesta3_pregunta3":[{
                    "respuesta3_pregunta3_C":"Estados_/_provincias",
                    "ayuda3_pregunta3_C":"División territorial administrativa en que se organiza un estado, que está regida por un ayuntamiento."
                }],
                "respuesta4_pregunta3":[{
                    "respuesta4_pregunta3_D":"Continentes",
                    "ayuda4_pregunta3_D":"Es cada una de las grandes extensiones en que se divide la superficie terrestre, separadas entre sí por los océanos.",
                    "correcta":true
                }],
                "respuesta5_pregunta3":[{
                    "respuesta5_pregunta3_E":"Islas",
                    "ayuda5_pregunta3_E":"Es una zona de masa terrestre estable, más o menos extensa, rodeada completamente por una masa de agua."
                }]
            }]
        }]
    }]
}

JQUERY

$(document).ready(function()
{
    var div_main=$("<div></div>").addClass("main");
    var body=$("body");
    var div_pregunta=$("<div></div>")
    var pregunta1=$("<p></p>").text(informacion.preguntas[0].pregunta_1);
    var formm=$("<form></form>").attr("action","");
    //
    var input_pregunta1_respuesta1001=$("<input>",{
         type:"radio", 
         name:"pregunta1", 
         value:"1001", 
         id:"respuesta1001"
    });
    var label_input_pregunta1_respuesta1001=$("<label></label>").attr("for","respuesta1001").text(informacion.preguntas[0].respuestas_pregunta1[0].respuesta1_pregunta1[0].respuesta1_pregunta1_A);
    var p_ayuda1_pregunta1_A=$("<p></p>").attr("id","ayuda1001").text(informacion.preguntas[0].respuestas_pregunta1[0].respuesta1_pregunta1[0].ayuda1_pregunta1_A);
    var salto=$("<br>");
    /*
    var input_pregunta1_respuesta1002=$("<input>",{
         type:"radio", 
         name:"pregunta1", 
         value:"1002", 
         id:"respuesta1002"
    });
    var label_input_pregunta1_respuesta1002=$("<label></label>").attr("for","respuesta1002").text(informacion.preguntas[0].respuestas_pregunta1[1].respuesta2_pregunta1[0].respuesta2_pregunta1_B);
    var p_ayuda2_pregunta1_B=$("<p></p>").attr("id","ayuda1002").text(informacion.preguntas[0].respuestas_pregunta1[1].respuesta2_pregunta1[0].ayuda2_pregunta1_B);
*/
    body.append(
        div_main.prepend(
            div_pregunta.prepend(pregunta1).append(
                    formm.append(input_pregunta1_respuesta1001).append(label_input_pregunta1_respuesta1001).append(p_ayuda1_pregunta1_A).append(salto)
            )
        )
    );

HTML Este es el resultado que necesito realizar

<body>
	<div class="main">
		<!--PREGUNTA1-->
<div>
    <p>¿África, América, Antártida, Asia, Europa, y Oceanía son?</p>
    <form action="">
        <input type="radio" name="pregunta1" value="1001" id="respuesta1001">
        <label for="respuesta1001">Países</label><br>
            <p id="ayuda1001">Territorio, con características geográficas y culturales propias, que puede constituir una entidad política dentro de un Estado.</p>

        <input type="radio" name="pregunta1" value="1002" id="respuesta1002">
        <label for="respuesta1002">Municipios</label><br>
            <p id="ayuda1002">División territorial administrativa en que se organiza un estado, que está regida por un ayuntamiento.</p>

        <input type="radio" name="pregunta1" value="1003" id="respuesta1003">
        <label for="respuesta1003">Estados / provincias</label><br>
            <p id="ayuda1003">Pueblo organizado en un territorio sometido a un único poder.</p>

        <input type="radio" name="pregunta1" value="1004" id="respuesta1004">
        <label for="respuesta1004">Continentes</label><br>
            <p id="ayuda1004">Es cada una de las grandes extensiones en que se divide la superficie terrestre, separadas entre sí por los océanos.</p>

        <input type="radio" name="pregunta1" value="1005" id="respuesta1005">
        <label for="respuesta1005">Islas</label><br>
            <p id="ayuda1005">Es una zona de masa terrestre estable, más o menos extensa, rodeada completamente por una masa de agua.</p><br>
            <input type="button" name="pregunta1" id="boton1" value="Validar">
    </form> 
</div>
<!--PREGUNTA2-->
<div>
    <p>¿África, América, Antártida, Asia, Europa, y Oceanía son?</p>
    <form action="">
        <input type="radio" name="pregunta2" value="2001" id="respuesta2001">
        <label for="respuesta2001">Países</label><br>
            <p id="ayuda2001">Territorio, con características geográficas y culturales propias, que puede constituir una entidad política dentro de un Estado.</p>

        <input type="radio" name="pregunta2" value="2002" id="respuesta2002">
        <label for="respuesta2002">Municipios</label><br>
            <p id="ayuda2002">División territorial administrativa en que se organiza un estado, que está regida por un ayuntamiento.</p>

        <input type="radio" name="pregunta2" value="2003" id="respuesta2003">
        <label for="respuesta2003">Estados / provincias</label><br>
            <p id="ayuda2003">Pueblo organizado en un territorio sometido a un único poder.</p>

        <input type="radio" name="pregunta2" value="2004" id="respuesta2004">
        <label for="respuesta2004">Continentes</label><br>
            <p id="ayuda2004">Es cada una de las grandes extensiones en que se divide la superficie terrestre, separadas entre sí por los océanos.</p>

        <input type="radio" name="pregunta2" value="2005" id="respuesta2005">
        <label for="respuesta2005">Islas</label><br>
            <p id="ayuda2005">Es una zona de masa terrestre estable, más o menos extensa, rodeada completamente por una masa de agua.</p><br>
            <input type="button" name="pregunta2" id="boton2" value="Validar">
    </form> 
</div>
<!--PREGUNTA3-->
<div>
    <p>¿África, América, Antártida, Asia, Europa, y Oceanía son?</p>
    <form action="">
        <input type="radio" name="pregunta3" value="3001" id="respuesta3001">
        <label for="respuesta3001">Países</label><br>
            <p id="ayuda3001">Territorio, con características geográficas y culturales propias, que puede constituir una entidad política dentro de un Estado.</p>

        <input type="radio" name="pregunta3" value="3002" id="respuesta3002">
        <label for="respuesta3002">Municipios</label><br>
            <p id="ayuda3002">División territorial administrativa en que se organiza un estado, que está regida por un ayuntamiento.</p>

        <input type="radio" name="pregunta3" value="3003" id="respuesta3003">
        <label for="respuesta3003">Estados / provincias</label><br>
            <p id="ayuda3003">Pueblo organizado en un territorio sometido a un único poder.</p>

        <input type="radio" name="pregunta3" value="3004" id="respuesta3004">
        <label for="respuesta3004">Continentes</label><br>
            <p id="ayuda3004">Es cada una de las grandes extensiones en que se divide la superficie terrestre, separadas entre sí por los océanos.</p>

        <input type="radio" name="pregunta3" value="3005" id="respuesta3005">
        <label for="respuesta3005">Islas</label><br>
            <p id="ayuda3005">Es una zona de masa terrestre estable, más o menos extensa, rodeada completamente por una masa de agua.</p><br>
            <input type="button" name="pregunta3" id="boton3" value="Validar">
    </form> 
</div>
</div>
</body>

3
  • Podrías ser un poco mas descriptivo con lo que esperas obtener. Quisiera ayudarte pero es algo confusa tu pregunta. Colocar un resultado de ejemplo sería conveniente.
    – DMA VE
    el 15 jun. 2018 a las 15:57
  • ya agrege el como necesito que sea ve cuando se abra el HTML el 15 jun. 2018 a las 17:54
  • Puedes indicarme si te ha funcionado o no la solución propuesta?
    – DMA VE
    el 19 jun. 2018 a las 16:34

1 respuesta 1

0

Si la estructura del JSON no puede ser modificada, acá está la solución.

var informacion={
    "titulo":"Pratica 1",
    "cantidad_Preguntas":3,
    "preguntas":[{
        "pregunta_1":"¿África, América, Antártida, Asia, Europa, y Oceanía son?",
        "respuestas_pregunta1":{
            "respuesta1_pregunta1":{
                "respuesta1_pregunta1_A":"Países",
                "ayuda1_pregunta1_A":"Territorio, con características geográficas y culturales propias, que puede constituir una entidad política dentro de un Estado."
            },
            "respuesta2_pregunta1":{
                "respuesta2_pregunta1_B":"Municipios",
                "ayuda2_pregunta1_B":"División territorial administrativa en que se organiza un estado, que está regida por un ayuntamiento."
            },
            "respuesta3_pregunta1":{
                "respuesta3_pregunta1_C":"Estados_/_provincias",
                "ayuda3_pregunta1_C":"División territorial administrativa en que se organiza un estado, que está regida por un ayuntamiento."
            },
            "respuesta4_pregunta1":{
                "respuesta4_pregunta1_D":"Continentes",
                "ayuda4_pregunta1_D":"Es cada una de las grandes extensiones en que se divide la superficie terrestre, separadas entre sí por los océanos.",
                "correcta":true
            },
            "respuesta5_pregunta1":{
                "respuesta5_pregunta1_E":"Islas",
                "ayuda5_pregunta1_E":"Es una zona de masa terrestre estable, más o menos extensa, rodeada completamente por una masa de agua."
            }
        }
    },{
        "pregunta_2":"¿África, América, Antártida, Asia, Europa, y Oceanía son?",
        "respuestas_pregunta2":{
            "respuesta1_pregunta2":{
                "respuesta1_pregunta2_A":"Países",
                "ayuda1_pregunta2_A":"Territorio, con características geográficas y culturales propias, que puede constituir una entidad política dentro de un Estado."
            },
            "respuesta2_pregunta2":{
                "respuesta2_pregunta2_B":"Municipios",
                "ayuda2_pregunta2_B":"División territorial administrativa en que se organiza un estado, que está regida por un ayuntamiento."
            },
            "respuesta3_pregunta2":{
                "respuesta3_pregunta2_C":"Estados_/_provincias",
                "ayuda3_pregunta2_C":"División territorial administrativa en que se organiza un estado, que está regida por un ayuntamiento."
            },
            "respuesta4_pregunta2":{
                "respuesta4_pregunta2_D":"Continentes",
                "ayuda4_pregunta2_D":"Es cada una de las grandes extensiones en que se divide la superficie terrestre, separadas entre sí por los océanos.",
                "correcta":true
            },
            "respuesta5_pregunta2":{
                "respuesta5_pregunta2_E":"Islas",
                "ayuda5_pregunta2_E":"Es una zona de masa terrestre estable, más o menos extensa, rodeada completamente por una masa de agua."
            }
        }
    },{
        "pregunta_3":"¿África, América, Antártida, Asia, Europa, y Oceanía son?",
        "respuestas_pregunta3":{
            "respuesta1_pregunta3":{
                "respuesta1_pregunta3_A":"Países",
                "ayuda1_pregunta3_A":"Territorio, con características geográficas y culturales propias, que puede constituir una entidad política dentro de un Estado."
            },
            "respuesta2_pregunta3":{
                "respuesta2_pregunta3_B":"Municipios",
                "ayuda2_pregunta3_B":"División territorial administrativa en que se organiza un estado, que está regida por un ayuntamiento."
            },
            "respuesta3_pregunta3":{
                "respuesta3_pregunta3_C":"Estados_/_provincias",
                "ayuda3_pregunta3_C":"División territorial administrativa en que se organiza un estado, que está regida por un ayuntamiento."
            },
            "respuesta4_pregunta3":{
                "respuesta4_pregunta3_D":"Continentes",
                "ayuda4_pregunta3_D":"Es cada una de las grandes extensiones en que se divide la superficie terrestre, separadas entre sí por los océanos.",
                "correcta":true
            },
            "respuesta5_pregunta3":{
                "respuesta5_pregunta3_E":"Islas",
                "ayuda5_pregunta3_E":"Es una zona de masa terrestre estable, más o menos extensa, rodeada completamente por una masa de agua."
            }
        }
    }]
};

function padLeft(nr, n, str){
    return Array(n-String(nr).length+1).join(str||'0')+nr;
}

$(document).ready(function()
{
    var div_main=$("<div></div>").addClass("main");
    var body=$("body");
    var salto=$("<br>");
    if (typeof informacion.preguntas !== "undefined") {
       $.each(informacion.preguntas, function(i, pregunta){
         var div_pregunta=$("<div></div>");
         var formm=$("<form></form>").attr("action","");
         var index = i+1;
    	   var pregunta_title=$("<p></p>").text(pregunta['pregunta_'+index]);
         var indexResp = 1;
         $.each(pregunta['respuestas_pregunta'+index], function(j, respuesta){
         	 var constante = index + "" + padLeft(indexResp, 3);
           var input_pregunta_respuesta=$("<input>",{
             type:"radio", 
             name:"pregunta"+index, 
             value:constante, 
             id:"respuesta"+constante
           });
           var label_input_pregunta_respuesta=$("<label></label>").attr("for","respuesta"+constante).text(respuesta['respuesta'+indexResp+"_pregunta"+index+"_"+String.fromCharCode(64+indexResp)]);
           var p_ayuda_pregunta=$("<p></p>").attr("id","ayuda"+constante).text(respuesta['ayuda'+indexResp+"_pregunta"+index+"_"+String.fromCharCode(64+indexResp)]);
             formm.append(input_pregunta_respuesta).append(label_input_pregunta_respuesta).append(p_ayuda_pregunta).append(salto);
           indexResp++;
         });
         div_main.prepend(
            div_pregunta.prepend(pregunta_title).append(formm)
         );
       });
       body.append(div_main);
    }
    
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body></body>

Sin embargo:

Lo mas conveniente sería reestructurar el JSON. Colocarlo de ésta manera sería mas genérico todo el código.

var informacion={
    "titulo":"Pratica 1",
    "cantidad_Preguntas":3,
    "preguntas":[{
        "titulo":"¿África, América, Antártida, Asia, Europa, y Oceanía son?",
        "respuestas":[
            {
                "texto":"Países",
                "ayuda":"Territorio, con características geográficas y culturales propias, que puede constituir una entidad política dentro de un Estado."
            },{
                "texto":"Municipios",
                "ayuda":"División territorial administrativa en que se organiza un estado, que está regida por un ayuntamiento."
            },{
                "texto":"Estados_/_provincias",
                "ayuda":"División territorial administrativa en que se organiza un estado, que está regida por un ayuntamiento."
            },{
                "texto":"Continentes",
                "ayuda":"Es cada una de las grandes extensiones en que se divide la superficie terrestre, separadas entre sí por los océanos.",
                "correcta":true
            },{
                "texto":"Islas",
                "ayuda":"Es una zona de masa terrestre estable, más o menos extensa, rodeada completamente por una masa de agua."
            }
        ]
    },{
        "titulo":"¿África, América, Antártida, Asia, Europa, y Oceanía son?",
        "respuestas":[
            {
                "texto":"Países",
                "ayuda":"Territorio, con características geográficas y culturales propias, que puede constituir una entidad política dentro de un Estado."
            },{
                "texto":"Municipios",
                "ayuda":"División territorial administrativa en que se organiza un estado, que está regida por un ayuntamiento."
            },{
                "texto":"Estados_/_provincias",
                "ayuda":"División territorial administrativa en que se organiza un estado, que está regida por un ayuntamiento."
            },{
                "texto":"Continentes",
                "ayuda":"Es cada una de las grandes extensiones en que se divide la superficie terrestre, separadas entre sí por los océanos.",
                "correcta":true
            },{
                "texto":"Islas",
                "ayuda":"Es una zona de masa terrestre estable, más o menos extensa, rodeada completamente por una masa de agua."
            }
        ]
    },{
        "titulo":"¿África, América, Antártida, Asia, Europa, y Oceanía son?",
        "respuestas":[
            {
                "texto":"Países",
                "ayuda":"Territorio, con características geográficas y culturales propias, que puede constituir una entidad política dentro de un Estado."
            },{
                "texto":"Municipios",
                "ayuda":"División territorial administrativa en que se organiza un estado, que está regida por un ayuntamiento."
            },{
                "texto":"Estados_/_provincias",
                "ayuda":"División territorial administrativa en que se organiza un estado, que está regida por un ayuntamiento."
            },{
                "texto":"Continentes",
                "ayuda":"Es cada una de las grandes extensiones en que se divide la superficie terrestre, separadas entre sí por los océanos.",
                "correcta":true
            },{
                "texto":"Islas",
                "ayuda":"Es una zona de masa terrestre estable, más o menos extensa, rodeada completamente por una masa de agua."
            }
        ]
    }]
};

function padLeft(nr, n, str){
    return Array(n-String(nr).length+1).join(str||'0')+nr;
}

$(document).ready(function()
{
    var div_main=$("<div></div>").addClass("main");
    var body=$("body");
    var salto=$("<br>");
    if (typeof informacion.preguntas !== "undefined") {
       $.each(informacion.preguntas, function(i, pregunta){
         var div_pregunta=$("<div></div>");
         var formm=$("<form></form>").attr("action","");
         var index = i+1;
    	   var pregunta_title=$("<p></p>").text(pregunta['titulo']);
         var indexResp = 1;
         $.each(pregunta['respuestas'], function(j, respuesta){
         	 var constante = index + "" + padLeft(indexResp, 3);
           var input_pregunta_respuesta=$("<input>",{
             type:"radio", 
             name:"pregunta"+index, 
             value:constante, 
             id:"respuesta"+constante
           });
           var label_input_pregunta_respuesta=$("<label></label>").attr("for","respuesta"+constante).text(respuesta['texto']);
           var p_ayuda_pregunta=$("<p></p>").attr("id","ayuda"+constante).text(respuesta['ayuda']);
             formm.append(input_pregunta_respuesta).append(label_input_pregunta_respuesta).append(p_ayuda_pregunta).append(salto);
           indexResp++;
         });
         div_main.prepend(
            div_pregunta.prepend(pregunta_title).append(formm)
         );
       });
       body.append(div_main);
    }
    
});
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body></body>

2
  • me puedes explicar tu funcion padLeft, porfavor el 18 jun. 2018 a las 18:12
  • @JorgeGutierrezYañez basándose en la función "padStart"(developer.mozilla.org/es/docs/Web/JavaScript/Referencia/…) la funcion padLeft rellena hacia la izquierda la cadena 'nr' con el valor dado en 'str'. Aunque por defecto está el 0. Estos es para transformar "3" a "003". En caso de que sea superior a 10 no colocar "00"+"10" sino mostrar "010".
    – DMA VE
    el 18 jun. 2018 a las 18:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.