現代前端開發中,使用JSON是非常普遍的。JSON能夠用來表示簡單的數據,但是復雜的數據結構就需要使用復雜的JSON來保存,而在ExtJS中處理復雜的JSON也是很常見的。下面我們來看一下如何使用ExtJS來處理復雜的JSON。
首先,讓我們定義一個復雜的JSON:
var data = { "企業01": { "員工01": { "name": "張三", "age": 25, "職位": "經理" }, "員工02": { "name": "李四", "age": 28, "職位": "高級技術員" } }, "企業02": { "員工01": { "name": "王五", "age": 30, "職位": "總經理" }, "員工02": { "name": "趙六", "age": 32, "職位": "高級技術員" } } };
上述JSON表示兩家企業,每家企業有兩名員工。如果要使用ExtJS來處理這個JSON,需要先將JSON轉換為ExtJS的store數據模型。下面是轉換為store數據模型的代碼:
// 定義模型對象 Ext.define('Employee', { extend: 'Ext.data.Model', fields: ['name', 'age', '職位'] }); // 將JSON轉換為store數據模型 var store = Ext.create('Ext.data.Store', { model: 'Employee', data: [] }); Ext.Object.each(data, function(key, value, myself){ Ext.Object.each(value, function(k, v, m){ store.add(new Employee(v)); }); });
在上面的代碼中,我們先定義了一個模型對象Employee,來表示每個員工。然后我們創建了一個store數據模型,并將每個員工添加到store中去。在循環遍歷JSON數據時,我們可以使用Ext.Object.each來遍歷對象。
最后,我們可以使用grid來展示store中的數據。這樣我們就可以利用于ExtJS處理復雜的JSON了。