I'm trying to add nested foreach Loop and want to show all the sub cats related to the to cat under the table row of the top cat and don't know how can I do exactly as the requirement

if any one can help much appreciated I search a lot but don't get the answer Please Have a look at my code and quid how can I do that.

Here is my view.

<div >
    <br/> 
    <br/>
    <button >Top Category Name </button>
    <div >
      <p>Sub Catorgies list under this top category</p>
    </div>
    <br/>
    </div>  

      <div >
        
      <table >
        <thead>
          <tr>
            <th>Flag No.</th>
            <th>Name</th>
            <th>On/Off</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <?php if ($subcats): ?>
          <?php foreach ($subcats as $key => $row): ?>
            <tr >
            <td><?php echo $row->flag_no?></td>
            <td><?php echo $row->cat_name?></td>
            <td>
            <label >
                <input type="checkbox">
                <span ></span>
            </label>

            </td>
            <td >
              <a style="margin-right: 30px;  " href="<?= site_url('Products/delete_cat/' .$row->id);?>"><img src="<?php echo base_url('assets/images1/bin.png');?>" width="20px"> Delete </a>    
          <a href="<?= site_url('Products/edit_cat/' .$row->id);?>"><img src="<?php echo base_url('assets/images1/edit.png');?>" width="20px"> Edit </a>
            </td>
            <td>
                <a href="#demo<?php echo $row->id?>" data-toggle="collapse"> </a>
            </td>
              </tr>
               </tr>
                   <?php foreach ($subt as  $row): ?>
               <tr>
      <?php if ($row->cat_id == $row->cat_id): ?>
                                  <td id="demo<?php echo $row->id?>" > <?php echo $row->sub_cat?></td>
                                  <td id="demo<?php echo $row->id?>" ><a href="<?= site_url('Products/delete_sub_cat/' .$row->sub_id);?>"><img src="<?php echo base_url('assets/images1/bin.png');?>" width="20px"></a>
          <a href="<?= site_url('Products/edit_sub_cat/' .$row->sub_id);?>"><img src="<?php echo base_url('assets/images1/edit.png');?>" width="20px"></a></td>
                           <?php endif ?>  
     </tr> 
      <?php continue;?>
               <?php endforeach ?>
            <?php endforeach ?>
              <?php endif;?>
        </tbody>
      </table>
      </div>
    </div>

Here is my conroller.

        public function categories()
        {
            $data['subcats']=$this->Pro_model->fetch_categories();
            $data['subt']=$this->Pro_model->fetch_sub_categories();
            $data['cat']=$this->Pro_model->fetch_cat();
            $this->load->view('admin-new/categories.php', $data);
        }

Here is my model.

    function fetch_categories(){
             $this->db->select('*');
      $this->db->from('subcat');
      
      $this->db->join('categories', 'subcat.sub_id = categories.id ');
      $this->db->group_by('subcat.sub_id');
      $this->db->order_by('sflag_no', 'asc');
     $query =  $this->db->get();
      return $query->result();
        }
      function fetch_sub_categories(){
             $this->db->select('*');
      $this->db->from('subcat');
      
      $this->db->join('categories', 'subcat.cat_id = categories.id ');
      $this->db->group_by('subcat.sub_id');
      $this->db->order_by('sflag_no', 'asc');
     $query =  $this->db->get();
      return $query->result();
        }

CodePudding user response：

You need to have table structured like this:

<table border="2" bordercolor="green">
    <tr>
        <td>main cat 1
            <table border="2" bordercolor="blue" id="cat-id-1">
                <tr >
                    <td>subcat 1 for table 1</td>
                </tr>
                <tr >
                    <td>subcat 2 for table 1</td>
                </tr>
                <tr >
                    <td>subcat 3 for table 1</td>
                </tr>
            </table>
        </td>
        <td><a herf="#"  data-cat-id="1"> </a></td>
    </tr>
    <tr>
        <td>main cat 2
            <table border="2" bordercolor="blue" id="cat-id-2">
                <tr >
                    <td>subcat 1 for table 2</td>
                </tr>
                <tr >
                    <td>subcat 2 for table 1</td>
                </tr>
            </table>
        </td>
        <td><a herf="#"  data-cat-id="2"> </a></td>
    </tr>
</table>

And then you can toggle the nested table using the jQuery:

<script type="text/javascript">
    $(document).ready(function() {

        $('.toggle').on('click', function() {   
            // Get the id of the table that is going to toggle
            catId = $(this).data('cat-id');
            // Select the sub-table to toggle
            table = $('#cat-id-' catId);
            table.toggle();
        });
        
    })
</script>

Note: You'll need to set nested table's id as cat-id-{ID OF MAIN CAT} and data-cat-id attribute of toggle button as {ID OF MAIN CAT}.

Here is the working fiddle: https://jsfiddle.net/5vp9a24r/2/

As for the data part, not sure about your db structure, but I think you should initially get main categories and join subs on them. Something like this:

function getCategories() {
  $this->db->select('*');
  $this->db->from('categories');

  $this->db->join('subcat', 'subcat.cat_id = categories.id ');
  $this->db->group_by('categories.id');
  $query =  $this->db->get();
  return $query->result();
}

Using this method in your Model, you should get categories that also have respective sub categories with them.

Update: example of embaded foreach.

<table>
<?php foreach ($categories as $categoryItem) : ?>
<tr>
    <td>main cat 1
        <table id="cat-id-<?= $categoryItem->id; ?>">
            <?php foreach ($categoryItem->subCats as $subcatItem) : ?>
            <tr >
                <td><?= $subcatItem->title ?></td>
            </tr>
            <?php endforeach; ?>
        </table>
    </td>
    <td><a herf="#"  data-cat-id="<?= $categoryItem->id ?>"> </a></td>
</tr>
<?php endforeach; ?>