PHP foreach categories and subcategories

Question

I am working with my project that has a capabality in making categories and subcategories. What I've made in my database is that the subcategory column has a relationship to category_key column

Meaning, all records that doesn't have a value in subcategory column is considered as category, the rest are subcategory.

In the picture below:

• b is a subcategory of a
• e, g, h is a subcategory of d

And now I am using this code to diplay it in my page:

<?php
    $query = "SELECT * FROM `categories`";
    $result = mysql_query($query);
    while($row = mysql_fetch_array($result)){
        if(empty($row['subcategory'])){
            echo '
                <li class="dd-item dd3-item" id="'.$row['category_key'].'" data-name="'.$row['category_name'].'" data-key="'.$row['category_key'].'">
                    <div class="dd-handle dd3-handle">
                        <i class="fa fa-bars" aria-hidden="true"></i>
                    </div>
                    <div class="dd-edit other-handle edit">
                        <i class="fa fa-pencil" aria-hidden="true"></i>
                    </div>
                    <div class="dd-edit other-handle delete">
                        <i class="fa fa-trash" aria-hidden="true"></i>
                    </div>
                    <div class="dd3-content">'.$row['category_name'].'</div>
                </li>
            '; 
        }else{
            echo '
                <ol class="dd-list">
                    <li class="dd-item dd3-item" id="'.$row['category_key'].'" data-name="'.$row['category_name'].'" data-key="'.$row['category_key'].'">
                        <div class="dd-handle dd3-handle">
                            <i class="fa fa-bars" aria-hidden="true"></i>
                        </div>
                        <div class="dd-edit other-handle edit">
                            <i class="fa fa-pencil" aria-hidden="true"></i>
                        </div>
                        <div class="dd-edit other-handle delete">
                            <i class="fa fa-trash" aria-hidden="true"></i>
                        </div>
                        <div class="dd3-content">'.$row['category_name'].'</div>
                    </li>
                </ol>
            ';
        }
    }
?>

The problem is <ol> element is repeating as it must be only one and also it must be inside the parent <li> of it's category.

Any help?

Answer 1

You need to structure your result array first:

  function appendChildren($input)
  {
      $output = [];
      foreach($input as $value)
      {
         $key = $value["category_key"];
         if(empty($input["subcategory"]))
         {
             $output[$key] = [];
             $output[$key]["value"] = $value;
             $output[$key]["children"] = [];
         } else {
             $parent_key = $value["subcategory"];
             $output[$parent_key]["children"][] = $value;
         }
      }

      return $output;
  }

then you'll have an array like this:

 |-- b
     |-- a
 |
 |-- c
 |-- d
     |-- e
     |-- g
     |-- h
 |
 |-- f

Now, begins the formatting:

$input = [];
$query = "SELECT * FROM `categories`";
$result = mysql_query($query);
while($row = mysql_fetch_array($result)){
   $input[] = $row;
}

$result = appendChildren($input);

foreach($result as $row)
{ 
   // open <li> tag
   if(count($row["children"]) > 0)
   {
      foreach($children as $child)
          // add ordered list
   }
   // close <li> tag
}