I am currently in a "cart before the horse" situation as I do not have an actual JSON source yet, due to waiting on some access permissions.
However, in the meantime, I have created a JSON structure that resembles the data I am collecting. I will eventually have control over the PHP script generating this JSON, so it might change if needed.
My main objective is to parse this JSON and populate three dropdowns dynamically with the information from each level. However, I haven't started writing the JavaScript for this functionality yet.
My question revolves around whether this JSON format is suitable for my goal of filling the three dropdowns in sequence:
(For example, upon loading the page, only the first dropdown should display group options. Upon selecting a group, the second dropdown should load Fiscal Year options related to that group, followed by Quarter options upon selection. The dropdowns should reset if the group is changed.)
HTML Dropdowns (Not generated dynamically yet):
<div class="form-group">
<label>Choose Group</label>
<select id="Portfolio" class="form-control">
<option value="value1">Group1</option>
<option value="value2">Group2</option>
<option value="value3">Group3</option>
</select>
</div>
<div class="form-group">
<label>Choose FY</label>
<select id="FiscalYear" class="form-control">
<option value="value1">FY19</option>
<option value="value2">FY20</option>
<option value="value3">FY21</option>
</select>
</div>
<label>Choose Quarter</label>
<select id="Quarter" class="form-control">
<option value="value1">Q1</option>
<option value="value2">Q2</option>
<option value="value3">Q3</option>
<option value="value4">Q4</option>
</select>
Proposed JSON Format:
{
"FY19": [{
"q1": [{
"Group1": [{
"Rate1": 91.4,
"Rate2": 10.5,
"Rate3": 97.5,
"Rate4": 24,
"Rate5": 97.5,
"Rate6": 14.03,
"Rate7": 74,
"Rate8": 20,
"Rate9": 69
}]
}]
}],
"FY20": [{
"q2": [{
"Group2": [{
"Rate1": 91.4,
"Rate2": 10.5,
"Rate3": 97.5,
"Rate4": 24,
"Rate5": 97.5,
"Rate6": 14.03,
"Rate7": 74,
"Rate8": 20,
"Rate9": 69
}]
}]
}],
"FY21": [{
"q3": [{
"Group3": [{
"Rate1": 91.4,
"Rate2": 10.5,
"Rate3": 97.5,
"Rate4": 24,
"Rate5": 97.5,
"Rate6": 14.03,
"Rate7": 74,
"Rate8": 20,
"Rate9": 69
}]
}]
}]
}