1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Ayuda Mostrar contenido Json en html con jquery

Tema en 'Jquery' comenzado por elviingoomez, 27 de Septiembre de 2015.

  1. elviingoomez

    elviingoomez Nuevo Miembro

    Se incorporó:
    31 de Enero de 2015
    Mensajes:
    7
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Estoy pasando informacion desde un json que pasa por un javascript el cual lo imprime en un html,
    el json contiene un arreglo con información y unos url de imagenes.


    Aqui el codigo del Json:

    Código (Text):
    {
      "friends": [
        {
          "text_info": "Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu",
          "src": "http://farm6.staticflickr.com/5693/21576483260_5e25bef074_m.jpg"
        },
        {
          "text_info": "illium adipisicing pecu, sed do eiusmod tempor incididunt ut ",
          "src": "http://farm6.staticflickr.com/5814/21738363616_c345a74fb9_m.jpg"
        },
        {
          "text_info": "Lot lamet, consectetaur cillium adipisicing pecu, sed  ",
          "src": "http://farm1.staticflickr.com/719/21748540992_2c31d1b8f8_m.jpg"
        },
        {
          "text_info": "Fri lamet, consectetaur cillium adipisicing pecu, sed",
          "src": "http://farm6.staticflickr.com/5693/21576483260_5e25bef074_m.jpg"
        },
        {
          "text_info": "Mon Lot lamet, consectetaur cillium",
          "src": "http://farm1.staticflickr.com/753/21760181905_88fa06885a_m.jpg"
        }
      ]
    }


    Estos datos los paso a un javascript usando jquery.

    Aqui el codigo:

    Código (Javascript):
    $.getJSON( "data.json", function( data ) {
      var items = [];

        $.each( data.friends[0], function( key, val ) {
          items.push( "<li clas='row'>");
          items.push( "<img src='" + val + "'/>");
          items.push( "<p class='text'>" + val + "</p>");
          items.push( "</li>" );
        });

    $( "<ul/>", {
      "class": "my-new-list",
      html: items.join( "" )
    }).appendTo( "body" );
    });
    El problema esta en que no se como hacer con el jquery para que me imprima el "src" que pasa como una clase de imagen en el html y seguido "text_info" que pasa como una clase de texto, ya que lo que esta haciendo es imprimir el contenido del "texte_info" en donde va el "src" de la imagen.

    Si alguien me puede ayudar se lo agradesco
     
  2. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    825
    Me gusta recibidos:
    399
    Puntos de trofeos:
    63
    Género:
    Hombre
    Hola, pues tienes que especificar que es lo que quieres en cada espacio.
    Para lograr eso mejor repasa el json con un for y obtiene cada valor especifico, prueba mi código.
    HTML:
    <!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>es</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    </head>
    <body>
        <script>      
            $.getJSON( "data.json", function( data ) {
                var items = [];
                for(var i = 0; i < data.friends.length; i++) {
                     items.push( "<li clas='row'>");
                      items.push( "<img src='" + data.friends[i].src + "'/>");
                      items.push( "<p class='text'>" + data.friends[i].text_info + "</p>");
                      items.push( "</li>" );
                    console.log(data.friends[i]);
                }

            $( "<ul/>", {
              "class": "my-new-list",
              html: items.join( "" )
            }).appendTo( "body" );
            });
        </script>
    </body>
    </html>
    Y acá está tu Json
    Código (Text):
    {
        "friends": [{
                "text_info": "Primero Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu",
                "src": "http://farm6.staticflickr.com/5693/21576483260_5e25bef074_m.jpg"
            },
            {
                "text_info": "Segundo adipisicing pecu, sed do eiusmod tempor incididunt ut ",
                "src": "http://farm6.staticflickr.com/5814/21738363616_c345a74fb9_m.jpg"
            },
            {
                "text_info": "Tercero  lamet, consectetaur cillium adipisicing pecu, sed  ",
                "src": "http://farm1.staticflickr.com/719/21748540992_2c31d1b8f8_m.jpg"
            },
            {
                "text_info": "Cuarto lamet, consectetaur cillium adipisicing pecu, sed",
                "src": "http://farm6.staticflickr.com/5693/21576483260_5e25bef074_m.jpg"
            },
            {
                "text_info": "Quinto Lot lamet, consectetaur cillium",
                "src": "http://farm1.staticflickr.com/753/21760181905_88fa06885a_m.jpg"
            }
        ]
    }
    Lo que hice es agregar un for para repasar el Json y nada mas.
    Lo que hacías tu era usar un ciclo pero usando solo el primer parámetro data.friends[0] donde el arreglo tienes que ir repasando cada sección del arreglo y debería ir aumentando el indice del arreglo.
     

Comparte esta página