Stampare un array JSON restituito

Question

Stampare un array JSON restituito

14 ago 2012, 17:53:11

Visualizzazioni: 25.5K

Voti: 0

Ho il seguente 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"}]

E uso questo js per analizzarlo e stamparlo:

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

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

   }

Ma il display mostra solo "Undefined" e la Console non mostra errori.

Nel caso ve lo stiate chiedendo, questa è la parte HTML:

<form id="search" action="">
<div class="toolbar">
    <h1>Ricerca</h1>
    <a href="#" class="back">Indietro</a>
</div>
<ul class="rounded">
    <li><input type="text" name="search-text" placeholder="Cerca" id="search-text" /></li>
</ul>
<ul class="edgetoedge" id="search-results">
    <li class="sep">Risultati</li>                
</ul>
</form>

Qualche idea del perché? Grazie mille in anticipo!

Josef Young

1

array json parse

Tutte le risposte alla domanda

Impostare il corretto dataType per la richiesta è un dettaglio importante non considerato nella risposta precedente (questo fa sì che jQuery invii un header HTTP Accept con la richiesta - e si aspetterà anche dati JSON nella callback di successo):

dataType: 'json',
success:function(json){
   var content = '';
   jQuery.each(json, function(i, v){
      content += '<li>' + v.post_title + '</li>';
   });
   /* in questo modo i risultati non si accumuleranno */
   jQuery("#search-results").html(content);
}

Anche l'invio del corretto header HTTP con la risposta non era stato considerato:

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

Internet Explorer non gradisce questo header - ma questa è un'altra storia (leggi di più).

Martin Zeitler

183

18 ago 2012 01:07:43

Commenti

@syslogic, grazie per aver dedicato del tempo. Incollo sopra l'intero snippet di Ajax che ho utilizzato finora. Mentre probabilmente hai ragione sul fatto che "parseJSON" sia inutile, ricevevo errori null quando veniva omesso. Sto ancora riflettendo sul problema.

Josef Young

18 ago 2012 13:37:24

L'enigma risolto. Ho testato e testato. Ho scoperto questo: non c'è assolutamente alcun bisogno di analizzare i dati passati da Ajax, tranne quando c'è un conflitto tra le versioni di jQuery lato client e jQuery lato server!

Josef Young

19 ago 2012 20:00:58

Aggiungi var json = jQuery.parseJSON(data);
Definisci content aggiungendo var content
Posiziona content = ''; prima del ciclo each

In questo modo:

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

Commenti

Grazie. Ho provato i tuoi suggerimenti, ma il problema persisteva.

Josef Young

14 ago 2012 18:32:37

Anche se il #2 doveva essere quello giusto.

Josef Young

14 ago 2012 18:33:25

Scusa, ho riprovato e ora funziona.

Josef Young

14 ago 2012 18:41:14

Avevi ragione, tranne per il fatto che il mio server FTP era offline. Scusa e grazie!!!

Josef Young

14 ago 2012 18:42:00

Ehm... jQuery.parseJSON(data) è piuttosto inutile - perché la variabile "data" dovrebbe già essere un oggetto JS nella callback della funzione jQuery.ajax... questo si applicherebbe solo se fosse una stringa JSON. Piuttosto presumo che tu stia inviando il JSON senza header HTTP o con quelli sbagliati.

Martin Zeitler

18 ago 2012 00:50:23

Mostra i restanti 1 commenti

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

$.ajax({

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

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

                  dataType: 'JSON',

                  success:function(data){
                            // questa parte gestisce i dati JSON ricevuti

                            //console.log(data);

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

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

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

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

        });