1. 程式人生 > >資料相容介面卡--前後端JSON陣列相容介面卡

資料相容介面卡--前後端JSON陣列相容介面卡

專案中,通常會有前後端自定義資料的情況。前端在獲取後端資料格式轉化後,當兩邊的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());

轉換結果