在使用ExtJS作為前端框架時,我們通常會遇到需要解析來自服務端的JSON數據的情況。如果服務端返回的數據類型是List類型,那么在ExtJS中我們可以使用Ext.data.reader.Json的方式來進行解析。
var jsonStr = '[{"name":"Tom","age":18},{"name":"Mary","age":20}]'; // 模擬服務端返回的數據 var reader = new Ext.data.reader.Json({ rootProperty: 'root', totalProperty: 'total', successProperty: 'success', messageProperty: 'message', idProperty: 'id', fields: [{ name: 'name', mapping: 'name' }, { name: 'age', mapping: 'age' }] }); var data = reader.readRecords(Ext.decode(jsonStr)); // 解析JSON數據 console.log(data.getCount()); // 輸出記錄數,此處為2 console.log(data.getAt(0).get('name')); // 輸出第一條記錄的name字段,此處為Tom
在以上代碼中,我們通過定義Ext.data.reader.Json對象來配置JSON數據的解析方式。rootProperty屬性用來指定服務端返回的JSON字符串中List數據的字段名,默認為root;totalProperty屬性是用來指定List數據總數字段名的,默認為total;successProperty屬性指定請求是否成功的字段名,默認為success;messageProperty屬性是用來指定錯誤信息字段名的,默認為message;idProperty屬性是用來指定記錄的唯一標識符,用在Grid等組件中,默認為id。
fields屬性是一個數組,用來定義服務端返回JSON字符串中每個List數據項的字段,通過mapping指定服務端返回JSON字符串中該字段的名稱。在以上例子中,我們定義了一個包含name和age字段的List數據。
通過創建Ext.data.reader.Json后,我們使用它的readRecords方法來解析JSON數據,此方法返回一個Ext.data.Store實例,該實例包含了解析后的數據。
通過上述代碼,我們可以方便地使用ExtJS解析來自服務端的List類型JSON數據。