Sunday, 6 September 2020

Generate navigation menu items from JSON structure

I have this JSON example into which I want to store navigation menu for Angular project:

{
  "menus": [{
    "name": "nav-menu",
    "style": "nav navbar-toggler",
    "items": [{
      "id": "1",
      "name": "Navigation menu",
      "parent_id": null,
      "style": "btn btn-default w-100"
    }, {
      "id": "2",
      "name": "Home and garden",
      "parent_id": "1",
      "style": "btn btn-default w-100"
    }, {
      "id": "3",
      "name": "Cookers",
      "parent_id": "2",
      "style": "btn btn-default w-100"
    }, {
      "id": "4",
      "name": "Microwave ovens",
      "parent_id": "2",
      "style": "btn btn-default w-100"
    }, {
      "id": "5",
      "name": "Fridges",
      "parent_id": "2",
      "style": "btn btn-default w-100"
    }, {
      "id": "6",
      "name": "PC peripherials",
      "parent_id": "1",
      "style": "btn btn-default w-100"
    }, {
      "id": "7",
      "name": "Head phones",
      "parent_id": "6",
      "style": "btn btn-default w-100"
    }, {
      "id": "8",
      "name": "Monitors",
      "parent_id": "6",
      "style": "btn btn-default w-100"
    }, {
      "id": "9",
      "name": "Network",
      "parent_id": "6",
      "style": "btn btn-default w-100"
    }, {
      "id": "10",
      "name": "Laptop bags",
      "parent_id": "6",
      "style": "btn btn-default w-100"
    }, {
      "id": "11",
      "name": "Web Cams",
      "parent_id": "6",
      "style": "btn btn-default w-100"
    }, {
      "id": "12",
      "name": "Remote cameras",
      "parent_id": "11",
      "style": "btn btn-default w-100"
    }, {
      "id": "13",
      "name": "Laptops",
      "parent_id": "6",
      "style": "btn btn-default w-100"
    }, {
      "id": "14",
      "name": "15' Laptops",
      "parent_id": "13",
      "style": "btn btn-default w-100"
    }, {
      "id": "15",
      "name": "17' Laptops",
      "parent_id": "13",
      "style": "btn btn-default w-100"
    }]
  }]
}

The idea is the edit the JSON when it's needed and to generate the navigation menu based on this data. How this can be implemented?



from Generate navigation menu items from JSON structure

No comments:

Post a Comment