Dado un objeto de JavaScript y la tarea es serializarlo en parámetros de consulta de URL usando JavaScript.
Enfoque 1:
- Declare un objeto y guárdelo en la variable.
- Luego use el método JSON.stringify() para convertir el objeto JavaScript en una string y mostrar el contenido.
- A continuación, tome una string vacía y agregue (clave, valor) pares de objetos accediendo a cada propiedad del objeto.
Ejemplo: este ejemplo serializa un objeto en una lista de parámetros de consulta de URL usando JavaScript.
<!DOCTYPE HTML>
<html>
<head>
<title>
Serialize an Object into a list of URL
query parameters in JavaScript
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 19px; font-weight: bold;">
</p>
<button onclick = "GFG_Fun()">
click here
</button>
<p id = "GFG_DOWN" style =
"color: green; font-size: 24px; font-weight: bold;">
</p>
<!-- Script to Serialize an Object into a list
of URL query parameters -->
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
// Declare an object
var obj = {
p1: 'GFG',
p2: 'Geeks',
p3: 'GeeksForGeeks'
}
// Use JSON.stringify() function to
// convert object into string
el_up.innerHTML = JSON.stringify(obj);
// Function to Serialize an Object into a
// list of URL query parameters
function GFG_Fun() {
var s = "";
for (var key in obj) {
if (s != "") {
s += "&";
}
s += (key + "=" + encodeURIComponent(obj[key]));
}
el_down.innerHTML = "'" + s + "'";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Enfoque 2:
- Declare un objeto y guárdelo en la variable.
- Luego use el método JSON.stringify() para convertir el objeto JavaScript en una string y mostrar el contenido.
- Use el método map() para agregar el par de valores clave del objeto y use el método join() para unir todos los elementos del objeto.
Ejemplo: este ejemplo usa el método map() y agrega cada clave, par de valores a la string.
<!DOCTYPE HTML>
<html>
<head>
<title>
Serialize an Object into a list of URL
query parameters in JavaScript
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 19px; font-weight: bold;">
</p>
<button onclick = "GFG_Fun()">
click here
</button>
<p id = "GFG_DOWN" style =
"color: green; font-size: 24px; font-weight: bold;">
</p>
<!-- Script to Serialize an Object into a list
of URL query parameters -->
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
// Declare an object
var obj = {
p1: 'GFG',
p2: 'Geeks',
p3: 'GeeksForGeeks'
}
// Use JSON.stringify() function to
// convert object into string
el_up.innerHTML = JSON.stringify(obj);
// Function to Serialize an Object into a
// list of URL query parameters
function GFG_Fun() {
var s = Object.keys(obj).map(function(key) {
return key + '=' + obj[key];
}).join('&');
el_down.innerHTML = "'" + s + "'";
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA