JavaScript如何提取嵌套数组并正确渲染项目对应发票明细

一、后端PHP代码修改 #

问题原因：原逻辑仅当项目存在对应发票时才会将项目加入返回数组，导致无发票的项目不会出现在接口结果中。
修改list_all_projects_invoice方法：

public function list_all_projects_invoice($data) //project section display with ALL Category
{ 
     $array_store = array();
     foreach($this->one_allcategory($data) as $row) {
           $child = $this->many_allcategory($row['project_ID']);
           // 去掉if($child)判断，无论是否有发票都返回项目信息
           $return = array_merge(array("parent" => $row), array("child" => $child ? $child : []));               
           array_push($array_store, $return);                                              
     }
     return $array_store;    
}

二、前端JS代码修改 #

问题原因：

1. 子发票处理循环放在父项目循环外部，仅会处理最后一个项目的发票数据
2. 全局匹配.tableinvoice_proj类，会给所有项目的发票表格追加同一份数据
3. 无发票时没有空状态提示
   修改后的完整JS代码：

for (var i = 0; i < new_data.projectinvoicesection.length; i++) {
  var sl = i + 1;
  var parentItem = new_data.projectinvoicesection[i]['parent'];
  var t1 = parentItem.project_amount;
  var t2 = parentItem.particulars;
  var t3 = parentItem.project_ID;
  var t4 = parentItem.project_title;
  var t5 = parentItem.type;
  var t56 = parentItem.period_type || '';

  var invoiceList = new_data.projectinvoicesection[i]['child'];

  // 拼接项目行HTML，删除重复的id属性tableinvoice_proj（id不能重复）
  var tr = "<tr data-toggle='collapse' data-target='#demo" + t3 + "' style='background-color: #337ab7;color: white;' class='accordion-toggle'><td>" + sl + "</td><td>" + t4 + "</td><td>" + t1 + "</td><td style='white-space: nowrap;'>" + t5 + " " + t56 + "</td><td><button class='open-button-project-edit btn' data-toggle='modal' data-backdrop='static' data-keyboard='false' data-target='#exampleModal_2' onclick='openForm3(" + t3 + ")' style='color: #fff;background-color: #398439;border-color: #255625;'>EDIT</button></td></tr><tr><td colspan='6' class='hiddenRow'><div class='accordian-bodyproj collapse' id='demo" + t3 + "'> <table class='tableinvoice_proj' style='border-collapse:collapse;'><thead><tr><th>Invoice Date</th><th>Invoice Number</th><th>Invoice Amount</th><th>Received Amount</th><th>Generate Receipt</th></tr></thead><tbody></tbody></table>";
  $("#tableproject").append(tr);
  $("#tableproject").append('</div></td></tr>');

  // 子发票处理逻辑移入父项目循环内，每个项目单独处理自己的发票
  var $currentInvoiceTable = $('#demo' + t3 + ' .tableinvoice_proj tbody');
  if (invoiceList.length === 0) {
    // 无发票时显示空状态
    $currentInvoiceTable.append("<tr><td colspan='5' style='text-align:center;'>暂无记录</td></tr>");
  } else {
    for (var j = 0; j < invoiceList.length; j++) {
      var invoiceItem = invoiceList[j];
      var t6 = format(invoiceItem.invoice_Date);
      var t7 = invoiceItem.invoice_No;
      var t8 = invoiceItem.invoice_amount;
      var t9 = invoiceItem.received_Amt;
      var trtoggle = "<tr><td>" + t6 + "</td><td>" + t7 + "</td><td>" + t8 + "</td><td class=''>" + t9 + "</td><td class=''><input type='checkbox' name='myTextEditBox' value='checked' /> checkbox</td></tr>";
      $currentInvoiceTable.append(trtoggle);
    }
  }
}

内容的提问来源于stack exchange，提问作者Remesh sree