Afișarea unui array JSON returnat

Question

Afișarea unui array JSON returnat

14 aug. 2012, 17:53:11

Vizualizări: 25.5K

Voturi: 0

Am următorul 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"}]

Și folosesc acest JavaScript pentru a-l parsa și afișa:

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

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

   }

Dar afișarea arată doar "Undefined", iar Consola nu afișează nicio eroare.

În cazul în care întrebați, aceasta este partea HTML:

<form id="search" action="">
<div class="toolbar">
    <h1>Căutare</h1>
    <a href="#" class="back">Înapoi</a>
</div>
<ul class="rounded">
    <li><input type="text" name="search-text" placeholder="Căutare" id="search-text" /></li>
</ul>
<ul class="edgetoedge" id="search-results">
    <li class="sep">Rezultate</li>                
</ul>
</form>

Aveți vreo idee de ce? Mulțumesc mult în avans!

Josef Young

1

array json parsare

Toate răspunsurile la întrebare

Setarea corectă a dataType pentru cerere este un detaliu important care nu a fost luat în considerare în răspunsul de mai sus (acest lucru determină jQuery să trimită un antet HTTP Accept împreună cu cererea - și va aștepta, de asemenea, date JSON în callback-ul de succes):

dataType: 'json',
success:function(json){
   var content = '';
   jQuery.each(json, function(i, v){
      content += '<li>' + v.post_title + '</li>';
   });
   /* în acest fel rezultatele nu se vor acumula */
   jQuery("#search-results").html(content);
}

De asemenea, nu a fost luat în considerare trimiterea antetului HTTP corect cu răspunsul:

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

Internet Exploder nu prea apreciază acest antet - dar asta e altă poveste (citește mai mult).

Martin Zeitler

183

18 aug. 2012 01:07:43

Comentarii

@syslogic, mulțumesc pentru timpul acordat. Am inserat mai sus întregul fragment de Ajax pe care l-am folosit până acum. Deși probabil ai dreptate în legătură cu "parseJSON" fiind inutil, am primit erori de null când l-am omis. Încă analizez problema.

Josef Young

18 aug. 2012 13:37:24

Enigma rezolvată. Am testat și retestat. Am descoperit următoarele: nu este absolut nicio nevoie să parsezi datele transmise prin Ajax, cu excepția cazului în care există un conflict între versiunile de jQuery de pe partea de client și cele de pe server!

Josef Young

19 aug. 2012 20:00:58

Adaugă var json = jQuery.parseJSON(data);
Definește content adăugând var content
Plasează content = ''; înainte de bucla each

Astfel:

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 aug. 2012 18:25:08

Comentarii

Mulțumesc. Am încercat sugestiile tale, dar problema a persistat.

Josef Young

14 aug. 2012 18:32:37

Deși al doilea punct trebuia să fie corect.

Josef Young

14 aug. 2012 18:33:25

Scuze, am încercat din nou și acum funcționează.

Josef Young

14 aug. 2012 18:41:14

Ai înțeles corect, doar că serverul meu FTP era în jos. Îmi pare rău și mulțumesc!!!

Josef Young

14 aug. 2012 18:42:00

Păi... jQuery.parseJSON(data) este destul de inutil - deoarece variabila "data" ar trebui deja să fie un obiect JS în callback-ul funcției jQuery.ajax... acest lucru s-ar aplica doar dacă este un șir JSON. Mai degrabă presupun că trimiteți JSON fără sau cu antete HTTP greșite.

Martin Zeitler

18 aug. 2012 00:50:23

Arată celelalte 1 comentarii

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){
                            // acest cod se execută când primim răspunsul JSON

                            //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('Eroare');
                       console.log(errorThrown);
                    }

        });