.each не ведет себя, как и ожидалось

Question

У меня есть функция, которая принимает данные от толчка уведомлений и форматирует его в JSON как это:

{ 
    "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" 
} 

Как вы можете видеть, что они могут или не могут иметь все имя пар/значение доступный.

код предназначен для отображения начальной загрузки Accordian на модальном всплывающее окне:

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"); 
} 

Если вы раскомментировать любого из закомментированного кода, список взрывает и не отображать. Значение if (val.length> 0) признает, что значение есть и что оно имеет контент, но не отображает содержимое.

Что мне здесь не хватает?

Answer 1

Это потерпит неудачу там нет ключа картины:

if (obj.picture.length > 0) {

Если вы посмотрите в консоли вы увидите что-то вроде:

не может прочитать длину неопределенных

изменить его на:

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

же с этим:

if (obj.link.length > 0) {

obj.link не всегда существует, изменить его

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