0

Here is my Json array. I want to retrieve child arrays and I need to display all the invoices details under the project section. Please check the attached screenshot. In the screenshot you can see only last invoice details only displaying to all other projects. The last invoice number 1005 is showing for all. How can I show invoice details based on the project details?

When child row is empty,project details (parent) also not showing.Am getting projectinvoicesection: [] Array 0. I need to display project details and no record found in invoice section. But now am getting array zero.

[{
    "parent": {
      "project_ID": "1",
      "project_title": "Network and Telephone Points",
      "particulars": "Test Description",
      "project_amount": "10000.00",
      "type": "One Time",
    },
    "child": [{
      "invoice_No": "1002",
      "received_Amt": "0.00",
      "invoice_amount": "472.50",
      "proje_ID": "1",
      "invoice_Date": "2021-08-31"
    }]
  },
  {
    "parent": {
      "project_ID": "2",
      "project_title": "Configuration and Programming",
      "particulars": "test description",
      "project_amount": "2000.00",
      "type": "One Time",
      "period_type": " ",
    },
    "child": [{
      "invoice_No": "1004",
      "received_Amt": "0.00",
      "invoice_amount": "245.70",
      "proje_ID": "2",
      "invoice_Date": "2021-08-30"
    }]
  },
  {
    "parent": {
      "project_ID": "3",
      "project_title": "Coffee ERP",
      "particulars": "test",
      "project_amount": "50000.00",
      "type": "One Time",
      "period_type": " ",
    },
    "child": [{
        "invoice_No": "1000",
        "received_Amt": "0.00",
        "invoice_amount": "1820.70",
        "proje_ID": "3",
        "invoice_Date": "2021-08-19"
      },
      {
        "invoice_No": "1001",
        "received_Amt": "0.00",
        "invoice_amount": "1773.45",
        "proje_ID": "3",
        "invoice_Date": "2021-08-24"
      }
    ]
  },
  {
    "parent": {
      "project_ID": "6",
      "project_title": "sample project new design",
      "particulars": "Test Project new",
      "project_amount": "4000.00",
      "type": "One Time",
      "period_type": " ",
    },
    "child": [{
      "invoice_No": "1005",
      "received_Amt": "0.00",
      "invoice_amount": "283.50",
      "proje_ID": "6",
      "invoice_Date": "2021-08-21"
    }]
  }
]

I have tried this code below:

for (var i = 0; i < new_data.projectinvoicesection.length; i++) {
  var sl = i + 1;

  //alert(t6)                   

  var t1 = new_data.projectinvoicesection[i]['parent'].project_amount;
  //alert(t1)
  var t2 = new_data.projectinvoicesection[i]['parent'].particulars;
  var t3 = new_data.projectinvoicesection[i]['parent'].project_ID;
  var t4 = new_data.projectinvoicesection[i]['parent'].project_title;
  var t5 = new_data.projectinvoicesection[i]['parent'].type;
  var t56 = new_data.projectinvoicesection[i]['parent'].period_type;

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

  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 id='tableinvoice_proj' 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>');
}

for (var property in object) {
  //alert(object[property].invoice_No);
  var t6 = format(object[property].invoice_Date);
  var t7 = object[property].invoice_No;
  var t8 = object[property].invoice_amount;
  var t9 = object[property].received_Amt;
  var t10 = object[property].proje_ID; //invoice table's project id

  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>";
  
  $(".tableinvoice_proj").append(trtoggle);

}

Here is the screenshot

PHP MODAL:

 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));               
                array_push($array_store, $return);                                              
           }   
        }
        return $array_store;    
}

public function one_allcategory($data) {
        $query = $this->db->select("*")
        ->where("comp_ID", $data)
        ->get("project_details")
        ->result_array();
        return $query;
    }

    public function many_allcategory($id) {
        $query = $this->db->select('invoice_No,received_Amt,invoice_amount,proje_ID,invoice_Date')        
        ->where("proje_ID", $id)
        ->get("invoice_details")
        ->result_array();
        return $query;
    }
  • I updated my answer and I show how to check the emptiness of project information – jiali Aug 21 '21 at 21:56
  • Tip: `one_allcategory` is more professionally write as: `public function one_allcategory(int $compId): array { return $this->get_where("project_details", ["comp_ID", $compId])->result_array(); }` That said, your script is making iterated model method calls (which means iterated trips to the database -- this is a no-no. You should create a single modele method that makes just one trip to the database with a sql query that uses a join. That result set should be converted into your exact desired array structure and passed back to the controller for delivery to the view. – mickmackusa Aug 21 '21 at 22:09

2 Answers2

0

Your second for loop needs to be inside of the first for loop (nested):

//You have
For(){
}
For(){
}

//You need
For(){
    For(){
    }
}
jc555
  • 21
  • 3
0

It's because you append trtoggle to .tableinvoice_proj without specifying the exact element with this class then trtoggle append to all of element with .tableinvoice_proj class.

According to the code you can try

$(".tableinvoice_proj").last().append(trtoggle);

instead of

$(".tableinvoice_proj").append(trtoggle);

new_data = new Object();
new_data.projectinvoicesection = [{
    "parent": {
      "project_ID": "1",
      "project_title": "Network and Telephone Points",
      "particulars": "Test Description",
      "project_amount": "10000.00",
      "type": "One Time",
    },
    "child": [{
      "invoice_No": "1002",
      "received_Amt": "0.00",
      "invoice_amount": "472.50",
      "proje_ID": "1",
      "invoice_Date": "2021-08-31"
    }]
  },
  {
    "parent": {
      "project_ID": "2",
      "project_title": "Configuration and Programming",
      "particulars": "test description",
      "project_amount": "2000.00",
      "type": "One Time",
      "period_type": " ",
    },
    "child": [{
      "invoice_No": "1004",
      "received_Amt": "0.00",
      "invoice_amount": "245.70",
      "proje_ID": "2",
      "invoice_Date": "2021-08-30"
    }]
  },
  {
    "parent": {
      "project_ID": "3",
      "project_title": "Coffee ERP",
      "particulars": "test",
      "project_amount": "50000.00",
      "type": "One Time",
      "period_type": " ",
    },
    "child": [{
        "invoice_No": "1000",
        "received_Amt": "0.00",
        "invoice_amount": "1820.70",
        "proje_ID": "3",
        "invoice_Date": "2021-08-19"
      },
      {
        "invoice_No": "1001",
        "received_Amt": "0.00",
        "invoice_amount": "1773.45",
        "proje_ID": "3",
        "invoice_Date": "2021-08-24"
      }
    ]
  },
  {
    "parent": {
      "project_ID": "6",
      "project_title": "sample project new design",
      "particulars": "Test Project new",
      "project_amount": "4000.00",
      "type": "One Time",
      "period_type": " ",
    },
    "child": [{
      "invoice_No": "1005",
      "received_Amt": "0.00",
      "invoice_amount": "283.50",
      "proje_ID": "6",
      "invoice_Date": "2021-08-21"
    }]
  },
  {
    "parent": {
      "project_ID": "9",
      "project_title": "TEST",
      "particulars": "NO RESULT",
      "project_amount": "0",
      "type": "One Time",
      "period_type": " ",
    },
    "child": []
  }
]




for (var i = 0; i < new_data.projectinvoicesection.length; i++) {
    
    var sl = i + 1;

    //alert(t6)                   

    var t1 = new_data.projectinvoicesection[i]['parent'].project_amount;
    //alert(t1)
    var t2 = new_data.projectinvoicesection[i]['parent'].particulars;
    var t3 = new_data.projectinvoicesection[i]['parent'].project_ID;
    var t4 = new_data.projectinvoicesection[i]['parent'].project_title;
    var t5 = new_data.projectinvoicesection[i]['parent'].type;
    var t56 = new_data.projectinvoicesection[i]['parent'].period_type;

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

    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 id='tableinvoice_proj' 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>');

    if( !object || object.length < 1)
    {
        var trtoggle = `<tr ><td style='text-align:center;' colspan='5' > No records found!</td></tr>`;
    } else
    {
    var trtoggle = '';
        for ( var property in object ) {
            
            //alert(object[property].invoice_No);
            var t6 = object[property].invoice_Date;
            var t7 = object[property].invoice_No;
            var t8 = object[property].invoice_amount;
            var t9 = object[property].received_Amt;
            var t10 = object[property].proje_ID; //invoice table's project id

            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>";
        }
        
        
    }
  $(".tableinvoice_proj").last().append(trtoggle);
 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tableproject">
</table>
jiali
  • 616
  • 9
  • 20
  • Please ask a new question under a new topic to make the answer clearer – jiali Aug 23 '21 at 07:21
  • I have asked a new question can u please help me?https://stackoverflow.com/questions/68892623/how-to-update-multiple-table-rows-into-mysql-table-when-click-save-button-using?noredirect=1#comment121753891_68892623 – Remesh sree Aug 23 '21 at 12:59
  • how to disable the checkbox if Received Amount == '0.00'? I have tried to disable the checkbox but not working – Remesh sree Aug 26 '21 at 05:40
  • if(Math.abs(t8) == Math.abs(t9)){ $('.checkBoxClassse'+t11).removeAttr("disabled")} – Remesh sree Aug 26 '21 at 05:42
  • 1
    In loop before last `trtoggle` define `var is_disabled = parseInt(t9) == 0 ? "disabled = true" : ""; ` and add `is_disabled` var to your last `trtoggle` input – jiali Aug 26 '21 at 18:51