JSFiddle - React, Tailwind, and code Playground

HTML

<pre id="json"></pre>

JavaScript

var json = [{
  "categories":"Food",
  "subcategories":"Shares",
  "pid":"111",
  "title":"Smoked Salmon Dip",
  "description":"Rich and savory salmon dip, whipped with fresh dill accompanied with     croustades"
   },
   {
  "categories":"Food",
  "subcategories":"Shares",
  "pid":"112",
  "title":"Sweet Goat Cheese Flatbread",
  "description":"Delicate grilled Naan flatbread coated with delish tomato jam and topped with melted goat cheese, roasted garlic, fennel, onion, pear, shiitake mushroom and arugula."
 },
 {
  "categories":"Food",
  "subcategories":"Snacks",
  "pid":"100",
  "title":"Beer Chili",
  "description":"Hot & satisfying short rib chili with black beans, smoked jalapenos, and fresh corn. Topped with aged cheddar cheese and sour cream."
 }];

categories = [];
json.forEach(function(entry) {  
    var cindex = categories.map(function(category) { 
        return category.name; 
    }).indexOf(entry.categories);
    
    console.log(cindex);
    if (cindex < 0) {
        // Not found in categories array
        cindex = categories.push({
            name: entry.categories,
            subcategories: []
        }) - 1; // -1 to fix the index
    }
    // Lets search the subcategory
    var category = categories[cindex];
    
    var sindex = category.subcategories.map(
        function(subcategory) {
            return subcategory.name;
        }
    ).indexOf(entry.subcategories);
    
    if (sindex < 0) {
      // Not Found
        sindex = category.subcategories.push({
            name: entry.subcategories,
            items: []
        }) - 1; 
    } 
    // Subcategory exists. Just push
    category.subcategories[sindex].items.push({
        pid: entry.pid,        
        description: entry.description,
        title: entry.title
    });
});

var menu = {
  menu: {
    categories: categories
  }
};

$("#json").text(JSON.stringify(menu));
console.log(menu.menu);