Imprimiendo array JSON devuelto

Question

Imprimiendo array JSON devuelto

14 ago 2012, 17:53:11

Vistas: 25.5K

Votos: 0

Tengo el siguiente array JSON:

[{"occurences":"1","post_title":"Test 1","ID":"16"},    
 {"occurences":"1","post_title":"Test 2","ID":"19"},
 {"occurences":"1","post_title":"\u543b\u60a8\u7684\u5c41\u80a1","ID":"21"}]

Y uso este JavaScript para analizarlo e imprimirlo:

success:function(data){
     $.each(data, function(i, post){
     content = '';
     content += '<li>' + post.post_title + '</li>';
   });

   $(content).appendTo("#search-results");

   }

Pero la pantalla solo muestra "Undefined", y la Consola no mostró errores.

En caso de que pregunten, esta es la parte HTML:

<form id="search" action="">
<div class="toolbar">
    <h1>Búsqueda</h1>
    <a href="#" class="back">Atrás</a>
</div>
<ul class="rounded">
    <li><input type="text" name="search-text" placeholder="Buscar" id="search-text" /></li>
</ul>
<ul class="edgetoedge" id="search-results">
    <li class="sep">Resultados</li>                
</ul>
</form>

¿Alguna idea de por qué sucede esto? ¡Muchas gracias de antemano!

Josef Young

1

array json análisis

Todas las respuestas a la pregunta

Establecer el dataType correcto para la solicitud es un detalle importante que no se consideró en la respuesta anterior (esto hace que jQuery envíe un encabezado HTTP Accept con la solicitud - y también esperará datos JSON en la callback de éxito):

dataType: 'json',
success:function(json){
   var content = '';
   jQuery.each(json, function(i, v){
      content += '<li>' + v.post_title + '</li>';
   });
   /* de esta manera los resultados no se acumularán */
   jQuery("#search-results").html(content);
}

Y enviar el encabezado HTTP correcto con la respuesta tampoco se consideró:

header("content-type: application/json; charset=utf8");

Internet Explorer no es compatible con ese encabezado - pero eso es otra historia (leer más).

Martin Zeitler

183

18 ago 2012 01:07:43

Comentarios

@syslogic, gracias por tomarte el tiempo. He pegado arriba el fragmento completo de Ajax que he usado todo este tiempo. Si bien probablemente tengas razón sobre que "parseJSON" es innecesario, obtenía errores nulos cuando lo omitía. Todavía estoy reflexionando sobre el problema.

Josef Young

18 ago 2012 13:37:24

El rompecabezas resuelto. He probado y probado. Encontré esto: no hay absolutamente ninguna necesidad de analizar los datos pasados por Ajax, ¡excepto que hay un conflicto entre las versiones de jQuery del lado del cliente y del lado del servidor!

Josef Young

19 ago 2012 20:00:58

Añade var json = jQuery.parseJSON(data);
Define content añadiendo var content
Coloca content = ''; antes del bucle each

Así:

function (data) {
    var content = '';
    var json = jQuery.parseJSON(data);

    $.each(json, function(i, post) {
        content += '<li>' + post.post_title + '</li>';
    });

    $(content).appendTo("#search-results");
}

Jasper Denkers

309

14 ago 2012 18:25:08

Comentarios

Gracias. He probado tus sugerencias, pero el problema persistió.

Josef Young

14 ago 2012 18:32:37

Aunque el #2 debe haber sido correcto.

Josef Young

14 ago 2012 18:33:25

Lo siento, lo intenté de nuevo y logré que funcionara.

Josef Young

14 ago 2012 18:41:14

Lo entendiste bien excepto que mi servidor FTP estaba caído. ¡Lo siento y gracias!

Josef Young

14 ago 2012 18:42:00

Emm... jQuery.parseJSON(data) es bastante inútil - porque la variable "data" ya debería ser un objeto JS en el callback de la función jQuery.ajax... esto solo aplicaría si es un string JSON. Más bien asumo que envías el JSON sin los encabezados HTTP correctos.

Martin Zeitler

18 ago 2012 00:50:23

Mostrar los 1 comentarios restantes

Josef Young 1 · Accepted Answer · 2012-08-18T05:59:26Z

$.ajax({

                  url: 'http://mipath/wp-admin/admin-ajax.php',

                  data:{
                       'action':'go_ajax',
                       'fn':'spw_autosugerencia',  
                       'queryString': $.trim(inputString.val())
                       },  

                  dataType: 'JSON',

                  success:function(data){
                            // esta parte es lo que ocurre con los datos JSON

                            //console.log(data);

                            var contenido = '';
                            var data = $.parseJSON(data);

                            $.each(data, function(i, post) {
                                contenido += '<li>' + post.post_title + '</li>';
                            });

                            $(contenido).appendTo("#resultados-busqueda");
                    },

                    error: function(errorThrown){
                       alert('error');
                       console.log(errorThrown);
                    }

        });