Objeto a Cadena de Consulta

Introducción

En este laboratorio, exploraremos cómo generar una cadena de consulta a partir de los pares clave-valor de un objeto utilizando JavaScript. Utilizaremos el método Array.prototype.reduce() en Object.entries() para crear la cadena de consulta y determinar el símbolo adecuado a utilizar en función de la longitud de la queryString. Al final de este laboratorio, serás capaz de generar eficientemente una cadena de consulta para tus aplicaciones web.

Convertir un objeto a una cadena de consulta

Para convertir un objeto en una cadena de consulta, utiliza la función objectToQueryString() que genera una cadena de consulta a partir de los pares clave-valor del objeto dado.

La función funciona de la siguiente manera:

• Utiliza Array.prototype.reduce() en Object.entries() para crear la cadena de consulta a partir de queryParameters.
• Determina el símbolo que puede ser ? o & en función de la longitud de queryString.
• Concatena val a queryString solo si es una cadena.
• Devuelve la queryString o una cadena vacía cuando los queryParameters son falsos.

Aquí está el código de la función objectToQueryString():

const objectToQueryString = (queryParameters) => {
  return queryParameters
    ? Object.entries(queryParameters).reduce(
        (queryString, [key, val], index) => {
          const symbol = queryString.length === 0 ? "?" : "&";
          queryString +=
            typeof val === "string" ? `${symbol}${key}=${val}` : "";
          return queryString;
        },
        ""
      )
    : "";
};

Uso de ejemplo de la función objectToQueryString():

objectToQueryString({ page: "1", size: "2kg", key: undefined }); // devuelve '?page=1&size=2kg'

Resumen

¡Felicidades! Has completado el laboratorio de Conversión de Objeto a Cadena de Consulta. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.