.each nicht wie erwartet verhalten

Question

Ich habe eine Funktion, die Daten von Push-Benachrichtigungen und formatiert sie in json wie dies akzeptiert:

{ 
    "sent": "02/17/2017", 
    "title": "Some Entry", 
    "body": "The main message here", 
    "picture": "http://example.com/me.jpg", 
    "phone": "555 641-6547" 
}, { 
    "sent": "02/13/2017", 
    "title": "Some Other Stuff", 
    "body": "Main content here", 
    "link": "http://mycom.com", 
    "phone": "555 555-6200" 
} 

Wie Sie können sie sehen können oder möglicherweise nicht alle Namen/Wert-Paare haben verfügbar.

Der Code soll auf einem modalen Popup eine Bootstrap accordian anzuzeigen:

function show8(arr) { 
    alert('here ** ' + arr); // lets you see incoming data 

      arr = '[' + arr + ']'; 
      var i = 50 ;  
      var out = '';  
      out += '<div class="panel-group no_wrap widget uib_w_' + i + ' d-margins" data-uib="twitter%20bootstrap/accordion" data-ver="1" '; 
      i++ ; 
      out += 'id="bs-accordion-11">'; 
     $.each(JSON.parse(arr), function(idx, obj) { 
      out += '<div class="panel widget uib_w_' + i + ' panel-info" data-uib="twitter%20bootstrap/collapsible" data-ver="1">'; 
      i++ ; 
      out += '<div class="panel-heading"><h4 class="panel-title">'; 
      out += '<a class="accordion-toggle" data-toggle="collapse" href="#bs-accordion-group-' + i + '" data-parent="#bs-accordion-11">'; 
      out += '<small>' + obj.sent + '</small><br><strong><big>' + obj.title + '</strong></big><br>'; 
      out += '</a></h4></div>'; 
      out += '<div id="bs-accordion-group-' + i + '" class="panel-collapse collapse">'; 
      i++ ; 
      out += '<div class="panel-body"><div class="col uib_col_' + i + ' single-col" data-uib="layout/col" data-ver="0">'; 
      i++ ; 
      out += '<div class="widget-container content-area vertical-col">'; 
/* 
      if (obj.picture.length > 0) { 
       out += '<div class="widget uib_w_' + i + ' scale-image d-margins" data-uib="media/img" data-ver="0">'; 
       i++ ; 
       out += '<figure class="figure-align"><img src="' + obj.picture + '"></figure></div>'; 
      } 
*/ 
      out += '<p>' + obj.body + '</p><br><br>'; 

/*   
    if (obj.phone.length > 0) {out += 'Call: <br><button class="btn widget uib_w_' + i + ' d-margins btn-xs btn-primary" '; 
      out += 'data-uib="twitter%20bootstrap/button" data-ver="1" '; 
      out += 'onclick= "placeCall(\'' + obj.phone + '\')">' + obj.phone + '</button><br>';} 
      i++; 
      if (obj.link.length > 0) {out += 'Website: <br><button class="btn widget uib_w_' + i + ' d-margins btn-xs btn-primary" '; 
      out += 'data-uib="twitter%20bootstrap/button" data-ver="1" '; 
      out += 'onclick= "viewPage(\'' + obj.link + '\')">' + obj.link + '</button><br>';} 
      i++; 
*/ 
      out += '<span class="uib_shim"></span></div></div></div></div></div>';  
     }); 
     out += '</div>'; 

       $(".recent").html(out); 
       $(".uib_w_8").modal("toggle"); 
} 

Wenn Sie eines der Kommentar gesetzt Code Kommentar-, die Liste sprengt und nicht angezeigt werden soll. Das if (val.length> 0) erkennt, dass der Wert vorhanden ist und Inhalt hat, aber den Inhalt nicht anzeigt.

Was fehlt mir hier?

Answer 1

Dies wird nicht der keine Tasten Bild ist:

if (obj.picture.length > 0) {

Wenn Sie in der Konsole sehen Sie so etwas wie sehen werden:

nicht Länge von undefined

lesen

ändern sie zu:

if ((obj.picture) && (obj.picture.length > 0)) {

gleiche mit diesem:

if (obj.link.length > 0) {

obj.link nicht immer vorhanden ist, ändern Sie ihn auf

if ((obj.link) && (obj.link.length > 0)) {