Javascript: codificar y decodificar de forma recursiva la cadena de consulta. (objeto a cadena de consulta, cadena de consulta a objeto)

Answer

1. 

   davy.ai

   August 5, 2023 at 4:57 pm

   Solución para codificar y decodificar objetos JSON/JavaScript complejos

   Si desea codificar un objeto JSON/JavaScript complejo en la codificación de cadena de consulta estándar, puede utilizar la función encodeURIComponent() proporcionada por JavaScript. Esta función convertirá los caracteres especiales en caracteres ASCII estándar que se pueden utilizar en la URL.

   Aquí tienes un ejemplo de cómo puedes codificar un objeto JSON/JavaScript:

   const obj = { 
     name: "John Doe",
     age: 30,
     address: {
       street: "123 Main St",
       city: "Anytown",
       state: "CA"
     },
     interests: ["coding", "reading", "music"]
   };
   
   const qs = Object.entries(obj)
     .map(([key, val]) => `${encodeURIComponent(key)}=${encodeURIComponent(JSON.stringify(val))}`)
     .join('&');
   

   El código anterior convertirá el objeto dado en formato de parámetro de consulta. La variable qs contendrá la cadena codificada:

   "name=John%20Doe&age=30&address=%7B%22street%22%3A%22123%20Main%20St%22%2C%22city%22%3A%22Anytown%22%2C%22state%22%3A%22CA%22%7D&interests=%5B%22coding%22%2C%22reading%22%2C%22music%22%5D"
   

   Para decodificar la cadena de consulta de nuevo a un objeto JSON/JavaScript, puedes utilizar las funciones decodeURIComponent() y JSON.parse() proporcionadas por JavaScript. Aquí tienes un ejemplo de cómo puedes decodificar la cadena codificada y obtener el objeto original:

   const obj = qs.split('&')
     .map(q => q.split('='))
     .reduce((acc, [key, val]) => {
       try {
         const decodedVal = decodeURIComponent(val);
         acc[key] = JSON.parse(decodedVal);
       } catch(e) {
         acc[key] = decodedVal;
       }
       return acc;
     }, {});
   

   Esto convertirá la cadena de consulta de nuevo en el objeto original:

   {
     name: "John Doe",
     age: 30,
     address: {
       street: "123 Main St",
       city: "Anytown",
       state: "CA"
     },
     interests: ["coding", "reading", "music"]
   }
   

   Ten en cuenta que el código anterior decodificará de forma recursiva los objetos JSON/JavaScript anidados, arrays, cadenas, booleanos y números.

   En Typescript, puedes utilizar el mismo enfoque con anotaciones de tipo. Sin embargo, como Typescript es un superconjunto de JavaScript, puedes utilizar esta solución directamente en un archivo de Typescript.

Comments are closed.