Преобразование вложенного объекта/ассоциативного массива в строку запроса с использованием JavaScript

Question

Я хочу использовать JavaScript для преобразования объекта в строку запроса.

Например, я хочу, чтобы преобразовать:

{ 
    a: 'hello', 
    b: { 
     b1: 'my', 
     b2: 'friend' 
     b3: { 
      c: 90 
     } 
    } 
} 

к:

?a=hello&b%5Bb1%5D=my&b%5Bb2%5D=friend&b%5Bb3%5D%5Bc%5D=90 

Я нашел довольно много ответов на этот здесь: Flatten a javascript object to pass as querystring, но они, кажется, не иметь дело с проблема ассоциативных массивов (или объектов внутри объектов).

Я нашел хороший ответ для JQuery, который отлично работает, используя jQuery.param, но мне бы хотелось получить ответ, используя либо родной JS, либо Underscore.js.

Как это сделать?

Answer 1

Я настоятельно рекомендую не пытаться изобретать существующие колеса. Ваша собственная реализация, вероятно, будет намного менее гибкой и более подверженной ошибкам (подумали вы, например, о кодировании параметров строки запроса, например?) Вместо этого взгляните на модуль query-string.

Answer 2

вы можете сделать это:

let obj = { 
     a: 'hello', 
     b: { 
      b1: 'my', 
      b2: 'friend', 
      b3: { 
       c: 90 
      } 
     } 
    } 

function getQueryString(obj, encode) { 

     function getPathToObj(obj, path = []) { 
     let result = []; 

     for (let key in obj) { 
      if (!obj.hasOwnProperty(key)) return; 

      //deep copy 
      let newPath = path.slice(); 
      newPath.push(key); 

      let everyPath = []; 
      if (typeof obj[key] === "object") { 
      everyPath = getPathToObj(obj[key], newPath); 
      } else { 
      everyPath.push({ 
       path: newPath, 
       val: obj[key] 
      }); 
      } 

      everyPath.map((item) => result.push(item)) 
     } 

     return result; 
     } 

     function composeQueryString(paths) { 
     let result = ""; 
     paths.map((item) => { 
      let pathString = ""; 
      if (item.path.length > 1) { 
      pathString = item.path.reduce((a, b, index) => { 
       return a + '['+ b +']'; 
      }) 
      } else { 
      pathString = item.path[0]; 
      } 

      if (result) { 
      pathString = "&" + pathString + '=' + item.val; 
      } else { 
      pathString = "?" + pathString + '=' + item.val; 
      } 

      result += pathString; 
     }); 

     return result; 
     } 

     const str = composeQueryString(getPathToObj(obj)); 
     return encode === true ? encodeURI(str) : str; 
    } 
    console.log(getQueryString(obj, true)); 

прибудет: а = привет & б% 5Bb1% 5D = мой & б% 5Bb2% 5D = друг & б% 5Bb3% 5D% 5ВС% 5D = 90