Creating multilevel hierarchies

Using the mapping object for JSON, you can create multilevel hierarchies from fields of any type.

In this guide, we’ll create a Food hierarchy with Category, Item, and Serving Size levels based on the data below:

[
  {
    "Category": "Breakfast",
    "Item": "Frittata",
    "Serving Size": "4.8 oz (136 g)",
    "Calories": 300
  },
  {
    "Category": "Breakfast",
    "Item": "Boiled eggs",
    "Serving Size": "4.8 oz (135 g)",
    "Calories": 250
  }
]

Step 1. In the mapping object, set the type of Category, Item, and Serving Size fields as "level":

[
  {
    "Category": {
      type: "level"
    },
    "Item": {
      type: "level"
    },
    "Serving Size": {
      type: "level"
    },
    "Calories": {
      type: "number"
    }
  },
  {
    "Category": "Breakfast",
    "Item": "Frittata",
    "Serving Size": "4.8 oz (136 g)",
    "Calories": 300
  },
  {
    "Category": "Breakfast",
    "Item": "Boiled eggs",
    "Serving Size": "4.8 oz (135 g)",
    "Calories": 250
  }
]

Step 2. Use the hierarchy, parent, and level properties of the mapping object to create the Food hierarchy:

[
  {
    "Category": {
      type: "level",
      hierarchy: "Food"
    },
    "Item": {
      type: "level",
      hierarchy: "Food",
      level: "Dish",
      parent: "Category"
    },
    "Serving Size": {
      type: "level",
      hierarchy: "Food",
      level: "Size",
      parent: "Dish"
    },
    "Calories": {
      type: "number"
    }
  },
  {
    "Category": "Breakfast",
    "Item": "Frittata",
    "Serving Size": "4.8 oz (136 g)",
    "Calories": 300
  },
  {
    "Category": "Breakfast",
    "Item": "Boiled eggs",
    "Serving Size": "4.8 oz (135 g)",
    "Calories": 250
  }
]

See how this dataset will be visualized in WebDataRocks:

Total Average of Calories

Beef & PorkDish

BeveragesDish

BreakfastDish

Chicken & FishDish

Grand Total

520

300

367.5

490

402.30

Food

Created using

Check out a live demo on CodePen.

Creating multilevel hierarchies

See also