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;
    }
2
  • I updated my answer and I show how to check the emptiness of project information Commented Aug 21, 2021 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. Commented Aug 21, 2021 at 22:09

2 Answers 2

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>

Sign up to request clarification or add additional context in comments.

5 Comments

Please ask a new question under a new topic to make the answer clearer
I have asked a new question can u please help me?stackoverflow.com/questions/68892623/…
how to disable the checkbox if Received Amount == '0.00'? I have tried to disable the checkbox but not working
if(Math.abs(t8) == Math.abs(t9)){ $('.checkBoxClassse'+t11).removeAttr("disabled")}
In loop before last trtoggle define var is_disabled = parseInt(t9) == 0 ? "disabled = true" : ""; and add is_disabled var to your last trtoggle input
0

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

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

//You need
For(){
    For(){
    }
}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.