¿Cómo crear parámetros de consulta en JavaScript?

La tarea es crear una URL de consulta para la solicitud GET dado un objeto JSON usando javaScript. Los parámetros de consulta GET en una URL son solo una string de pares clave-valor conectados con el símbolo &. Para convertir un objeto JSON en un parámetro de consulta GET, podemos usar el siguiente enfoque.

  • Haz una consulta de variables.
  • Recorra todas las claves y valores del json y adjúntelos con el símbolo ‘&’.

Ejemplos:

Input: {'website':'geeks', 'location':'india'}
Output: website=geeks&location=india

Sintaxis:

function encodeQuery(data){
    let query = ""
    for (let d in data)
         query += encodeURIComponent(d) + '=' + 
            encodeURIComponent(data[d]) + '&'
    return query.slice(0, -1)
}

Los siguientes ejemplos implementan el enfoque anterior:

Ejemplo 1:

<script>
function encodeQuery(data){
    let query = ""
    for (let d in data)
         query += encodeURIComponent(d) + '=' 
                  + encodeURIComponent(data[d]) + '&'
    return query.slice(0, -1)
}
  
// Json object that should be
// converted to query parameter
data = { 
    'website':'geeks',
    'location':'india'
}
queryParam = encodeQuery(data)
console.log(queryParam)
</script>

Producción:

website=geeks&location=india

Ejemplo 2: en este ejemplo, crearemos una URL completa a partir de los datos JSON proporcionados.

<script>
function encodeQuery(data){
    let query = data.url
    for (let d in data.params)
         query += encodeURIComponent(d) + '='
              + encodeURIComponent(data.params[d]) + '&';
    return query.slice(0, -1)
}
  
// Json object that should be
// converted to query parameter
data = { 
    url : 'www.geeksforgeeks.com/',
    params : {
        'website':'geeks',
        'location':'india'
    }
}
queryParam = encodeQuery(data)
console.log(queryParam)
</script>

Producción:

www.geeksforgeeks.com/website=geeks&location=india

Publicación traducida automáticamente

Artículo escrito por thvardhan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *