I am looking to create some logic for JSON data retrieved from a server request. As you can see from the raw data below, it is received in a particular format.
There is a "balances" entry which, in this case, has 5 different sub-values, of which names can vary dependent upon a given user.
For example:
- Barry has 5 bank accounts, each with different balances.
- Melissa has 2 bank accounts, each with different balances.
- Melissa's bank accounts are different to Barry's bank accounts, and vise versa.
- The Balance ID numbers that are assigned, may not necessarily match both Barry and Melissa.
In the Ext JS grid, the column headings which need to be displayed, must adjust to both Barry and Melissa's individual bank account balances.
Barry's JSON Data:
{
"firstName": "Foo",
"lastName": "Bar",
"balances":
{
Natwest: 9,
BankofScotland: 2,
Lloyds: 40,
Halifax: 89,
Lords: 12
},
}
Melissa's JSON Data:
{
"firstName": "Melissa",
"lastName": "Bar",
"balances":
{
DifferentNatwest: 10,
DiffferentBankofScotland: 45
},
}
At the moment, I only have one mapping in my store/model, called "balances" which only takes one value:
Store/Model definitions:
fields: ['firstName', 'lastName', 'balances']
So, obviously the following issue occurs when the grid is generated, as more than one value is being passed:
Results:
The Question:
Does anyone know what I can do to get the columns to dynamically generate in this Ext JS grid, dependant upon the JSON data being received for this balances information?