天天看點

vue實作百度翻譯API調用 翻譯數組對象

import md5 from 'js-md5';
              //需要翻譯的資料格式
			  this.routerPropsUs = {
			    "trackDetails":[
			     { "time":"2020-05-08 09:02", "event":"Out for Delivery", "eventCity":"NORTH WALES", "eventState":"PA" },
			     { "time":"2020-05-08 08:51", "event":"Arrived at Post Office", "eventCity":"NORTH WALES", "eventState":"PA" },
			     { "time":"2020-05-08 04:08", "event":"Departed USPS Regional Facility", "eventCity":"PHILADELPHIA PA NETWORK DISTRIBUTION CENTER", "eventState":"" },
			     { "time":"2020-05-07 22:59", "event":"Arrived at USPS Regional Facility", "eventCity":"PHILADELPHIA PA NETWORK DISTRIBUTION CENTER", "eventState":"" }
			     ]}
               var routeArr =  this.routerPropsUs.trackDetails || []
               var old = []; 
               var q='';
               //周遊資料将數組拼接成字元串
               for( let i = 0; i <  routeArr.length; i++ ){
                 for(var attr in routeArr[i]) {
                   old.push(attr)
                   routeArr[i][attr] == '' ? routeArr[i][attr] = ';': routeArr[i][attr]
                   q = q + routeArr[i][attr]+","
                 }
               }
               var appid = '20210714000887853';  //你的appid 需要注冊申請
               var key = 'mxaM9IlpEOtBvJpCkc84'; //開發者秘鑰
               var salt = (new Date).getTime();  //時間戳或者随機數
               var from = 'en';                  //翻譯源語言
               var to = 'zh';                    //翻譯的目智語言
               var str1 = appid + q + salt +key; //appid+q+salt+密鑰的MD5值
               var sign = md5(str1);             //簽名
               let data = {
                 q,
                 appid,
                 salt,
                 from,
                 to,
                 sign
               }
               //這裡使用vue-json實作跨域
               npm i -S vue-jsonp
               //main.js中引入vue-jsonp
               import {VueJsonp} from 'vue-jsonp'
               Vue.use(VueJsonp)
               //調用接口
               this.$jsonp("https://fanyi-api.baidu.com/api/trans/vip/translate", data).then((r)=> {
                 //傳回的資料字元串格式
                 var transResult = r.trans_result[0].dst;
                 //将字元串轉成數組
                 transResult = transResult.split(",")
                 //删除最後一個空的數組
                 transResult.pop()
                 var setArr = []
                 this.fanyi(transResult,setArr)
                 this.fanyiProps = setArr
               })
             }
            //資料處理函數
            fanyi(val,arr) {
		     if(val.length){
	          let arrData = val.splice(0,4)
	          let obj ={
	            time:arrData [0],
	            event:arrData [1],
	            eventCity:arrData [2],
	            eventState:arrData [3]
	          }
	          arr.push(obj)
	          this.fanyi(val,arr)
	        }else{
	          return
	        }
	      }