資料相容介面卡--前後端JSON陣列相容介面卡
阿新 • • 發佈:2018-11-27
專案中,通常會有前後端自定義資料的情況。前端在獲取後端資料格式轉化後,當兩邊的JSON物件中鍵名不一致時,需要先進行鍵名的相容處理,才能進行資料渲染。
上個栗子:
轉換前獲取的資料:
var demoJSON = [
{stu_name:"張三",stu_id:"1111",stu_no:"110"},
{stu_name:"李四",stu_id:"2222",stu_no:"120"},
{stu_name:"王五",stu_id:"3333",stu_no:"130"}
];
轉換關係:
var relations = {"stu_name":"name","stu_id":"id","stu_no":"no" };
轉換後的資料:
var result= [
{name:"張三",id:"1111",no:"110"},
{name:"李四",id:"2222",no:"120"},
{name:"王五",id:"3333",no:"130"}
];
以下是針對該問題,採用閉包的方式封裝的JSON鍵名介面卡。
1.首先搭建介面卡的結構。
(function(){
function myAdapter(demoJSON,relations) {
function newJson(){
//進行json鍵名轉換的私有方法
var changeJson=function(){
}
this.getJson=function(){
//返回新的json
return changeJson();
}
}
newJson.prototype=myAdapter.prototype;
var jsonObj= new newJson();
return jsonObj;
}
window.adapter=myAdapter;
})();
採用閉包最常用的方式,函式作為返回值被返回,保證外部只能獲得轉換後的結果,而不能對內部實現進行修改。
此處,
newJson.prototype=myAdapter.prototype;
預留了一個訪問newJson原型的介面,方便對該介面卡進行方法拓展。
2.在私有方法 changeJson()中實現對JSON物件的轉換操作。
主要思路是,提取轉換關係中的鍵名,轉換前JSON陣列鍵值,組合成新的JSON物件陣列。
var changeJson=function(){
// var oldKeys=Object.keys(demoJSON[0]);
var newKeys=Object.keys(relations);
var tempArr=[];
for(var i=0;i<demoJSON.length;i++){
var tempObj={};
for(var j=0;j<Object.keys(demoJSON[i]).length;j++){
//物件[keys]=values
tempObj[relations[newKeys[j]]]=demoJSON[i][Object.keys(demoJSON[i])[j]];
}
tempArr.push(tempObj);
}
newJson=tempArr;
return newJson;
}
注意迴圈結構中獲取JSON物件鍵名、鍵值時,對自增變數的使用,此處易出錯。
該介面卡可單獨作為一個檔案引入專案,方便全域性呼叫。
3.引入介面卡,呼叫並引數傳遞,列印結果。
專案中引入myAdapter介面卡檔案。呼叫介面卡傳入目標JSON陣列demoJSON,轉換關係relation,列印結果。
var demoJSON = [
{stu_name:"張三",stu_id:"1111",stu_no:"110"},
{stu_name:"李四",stu_id:"2222",stu_no:"120"},
{stu_name:"王五",stu_id:"3333",stu_no:"130"}
];
var relations = {"stu_name":"name","stu_id":"id","stu_no":"no" };
console.log("demoJSON");
console.log(demoJSON);
console.log("轉換關係");
console.log(relations);
console.log("newJSON");
//介面卡呼叫
console.log(adapter(demoJSON,relations).getJson());