깊은 자바 또는 JSON 객체의 jQuery 변환을 쿼리 문자열

Question

jQuery의 $ .param() 결함으로 인해 충분히 작동하지 않는 문제를 해결하고 더 깊은 JSON 중 일부를 %5D 등과 같이 남겨두고 도움이 필요합니다. .

하지 이것은 PayEezy 전자 상거래 API의 문제이지만, 자신의 샌드 박스 API처럼 보이는 쿼리 문자열을 필요로하는 다음과 같은 : 당신이에서 보면

https://api-cert.payeezy.com/v1/securitytokens?apikey=FAKEZdp9nJrKu46wX9evGNnRbGL38W6I&js_security_key=js-FAKE79a767d3fea1611ae66e1c6bfd2af8f879a767d3fea1&callback=respondPEZ&auth=true&ta_token=NOIW&type=FDToken&currency=USD&credit_card.cardholder_name=John+Doe&credit_card.card_number=4111111111111111&credit_card.exp_date=1218&credit_card.cvv=100&credit_card.type=visa&billing_address.street=&billing_address.city=&billing_address.state_province=&billing_address.zip_postal_code=&billing_address.country=&billing_address.email=&billing_address.phone.type=&billing_address.phone.number=

, 당신이 등을 발견 할 billing_address%5Bstate%5D이 아니라 billing_address[state]이 아닌 billing_address.state입니다. PayEezy를위한 특별한 방법이 필요합니다. 실행할 때, 지금

var o = { 
    apikey: 'FAKEZdp9nJrKu46wX9evGNnRbGL38W6I', 
    js_security_key: 'js-FAKE79a767d3fea1611ae66e1c6bfd2af8f879a767d3fea1', 
    callback: 'respondPEZ', 
    auth: true, 
    ta_token: 'NOIW', 
    type: 'FDToken', 
    currency: 'USD',     
    credit_card: { 
     type: 'visa', 
     cardholder_name: 'John Doe', 
     card_number: '4111111111111111', 
     exp_date: '1218', 
     cvv: '100' 
    }, 
    billing_address: { 
     street: undefined, 
     city: undefined, 
     state_province: undefined, 
     zip_postal_code: undefined, 
     country: undefined, 
     email: undefined, 
     phone: { 
      type: undefined, 
      number: undefined 
     } 
    } 
}; 

그 jQuery의 $ .PARAM()을 통해, 당신은 쿼리 문자열에 충분한을 닫습니다 아니에요 결과를 얻을 :

그래서, 자바 스크립트에서 이렇게 같은이 JSON 객체를 생성 :

apikey=FAKEZdp9nJrKu46wX9evGNnRbGL38W6I&js_security_key=js-FAKE79a767d3fea1611ae66e1c6bfd2af8f879a767d3fea1&callback=respondPEZ&auth=true&ta_token=NOIW&type=FDToken&currency=USD&credit_card%5Btype%5D=visa&credit_card%5Bcardholder_name%5D=John+Doe&credit_card%5Bcard_number%5D=4111111111111111&credit_card%5Bexp_date%5D=12%2F18&credit_card%5Bcvv%5D=100&billing_address%5Bstreet%5D=&billing_address%5Bcity%5D=&billing_address%5Bstate_province%5D=&billing_address%5Bzip_postal_code%5D=&billing_address%5Bcountry%5D=&billing_address%5Bemail%5D=&billing_address%5Bphone%5D%5Btype%5D=&billing_address%5Bphone%5D%5Bnumber%5D=

그 %5D 및 %5B 참조하십시오? 그것들은 바람직하지 않으며 PayEezy가 API에서 원하는 것이 아닙니다.

그래서, 나는이 수행하여 문제를 해결 가까이 얻을 관리 :

var s = decodeURIComponent($.param(o,false)); 

을하지만 내가 더이 수행하여 문제를 해결할 수 발견 : 당신

이

var s = decodeURIComponent($.param(o,false)) 
    .replace(/\]\=/g,'=') 
    .replace(/\]\[/g,'.') 
    .replace(/\[/g,'.'); 

내 질문을 즉, 객체 내장 JSON 객체를 대괄호를 포함하지 않고 점 표기법을 포함하고 정규 표현식보다 적은 코드 행을 포함하는 더 URL 친화적 인 쿼리 문자열로 변환하는 더 세련된 방법이 있습니까? 나는 정착 한 기술을 대체 하는가? 예를 들어 jQuery 나 Javascript에 이미 몇 가지 함수가 있습니까?이를 조합하면 잘 알지 못하는이 함수를 처리 할 수 ​​있습니까?

Answer 1

나는 내 자신의 재귀 직렬기를 만들었다. 다행히 요청대로 작동합니다.

이 함수는 객체의 모든 속성을 반복합니다. 값이 객체 인 경우 자체를 호출하고 "breadcrum"을 전달합니다. breadcrum은 함수가있는 곳으로 이동하기 위해 취한 속성의 "경로"일뿐입니다. 예를 들어 청구서 수신 주소의 전화 유형을보고있는 경우 breadcrum은 billing_address.phone.입니다.

값이 객체가 아니면 breadcrum에 자신을 추가하고 쿼리 문자열에 자신을 추가합니다.

값이 undefined 인 경우이 값을 빈 문자열로 설정했습니다.

var o = { 
 
    apikey: 'FAKEZdp9nJrKu46wX9evGNnRbGL38W6I', 
 
    js_security_key: 'js-FAKE79a767d3fea1611ae66e1c6bfd2af8f879a767d3fea1', 
 
    callback: 'respondPEZ', 
 
    auth: true, 
 
    ta_token: 'NOIW', 
 
    type: 'FDToken', 
 
    currency: 'USD',     
 
    credit_card: { 
 
     type: 'visa', 
 
     cardholder_name: 'John Doe', 
 
     card_number: '4111111111111111', 
 
     exp_date: '1218', 
 
     cvv: '100' 
 
    }, 
 
    billing_address: { 
 
     street: undefined, 
 
     city: undefined, 
 
     state_province: undefined, 
 
     zip_postal_code: undefined, 
 
     country: undefined, 
 
     email: undefined, 
 
     phone: { 
 
      type: undefined, 
 
      number: undefined 
 
     } 
 
    } 
 
}; 
 

 
function convertToQueryString(object, currentBreadcrum = '') { 
 
    var queryString = ''; 
 
    
 
    for (var property in object) { 
 
     var potentialObject = object[property]; 
 
     
 
     if (typeof potentialObject === 'undefined') { 
 
      potentialObject = ''; 
 
     } // set undefined values to an empty string 
 
     
 
     if (typeof potentialObject === 'object') { 
 
      queryString += convertToQueryString(potentialObject, currentBreadcrum + property + '.'); 
 
     } else { 
 
      if (currentBreadcrum === '' && queryString === '') { // don't prepend an '&' if it's the first item in the query string 
 
       queryString += currentBreadcrum + property + '=' + potentialObject; 
 
      } else { 
 
       queryString += '&' + currentBreadcrum + property + '=' + potentialObject; 
 
      } 
 
     } 
 
    } 
 
    
 
    return queryString; 
 
} 
 

 
console.log(convertToQueryString(o));