Connecting to nested JSON data using the dataRootPath property

Data source

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div>
  <h2>Connecting to nested JSON data using the dataRootPath property</h2>
  <p>
    This example shows how to connect to data stored in a nested JSON property.
  </p>
  <p>
    We are connecting to the following JSON file:
    <a target="_blank" href="https://cdn.flexmonster.com/data/nested-data.json"
    >https://cdn.flexmonster.com/data/nested-data.json</a>. This file stores data
    for Flexmonster in the <code>userData.flexmonsterData</code> property. To connect 
    to the data, specify the path to the <code>flexmonsterData</code> property in the
    <a
      href="https://www.flexmonster.com/api/data-source-object/#datarootpath"
      target="_blank"
    >dataSource.dataRootPath</a> property (line 9 in the JavaScript box).
  </p>
  <p>
    Learn more about
    <a href="https://www.flexmonster.com/doc/json-data-source/" target="_blank"
    >connecting to JSON</a>.
  </p>
</div>

<div id="pivot-container"></div>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

JavaScript

let pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 430,
  toolbar: true,
  report: {
    dataSource: {
      filename: "https://cdn.flexmonster.com/data/nested-data.json",
      dataRootPath: "userData.flexmonsterData"
    },
    slice: {
      rows: [
      	{
        	uniqueName: "Color"
      	}
      ],
      columns: [
      	{
        	uniqueName: "Country",
          filter: {
          	exclude: ["Australia", "Germany"]
          }
        },
      	{
        	uniqueName: "[Measures]"
      	}
      ],
      measures: [
      	{
        	uniqueName: "Price"
      	}
      ]
    }
  }
});