Dado un objeto JSON y la tarea es intercambiar la clave del objeto JSON con valores y viceversa con la ayuda de JavaScript.
Enfoque 1:
- Crea un nuevo objeto vacío.
- Visite cada clave del objeto por bucle for y agregue los elementos del objeto antiguo al nuevo objeto en forma inversa (intercambiando la clave y los valores).
Ejemplo: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to swap key and value of
JSON element using JavaScript ?
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP1" style =
"font-size: 15px; font-weight: bold;">
</p>
<p id = "GFG_UP2" style = "font-size: 15px;
font-weight: bold; color: green;">
</p>
<button onclick = "GFG_Fun()">
click here
</button>
<p id = "GFG_DOWN" style = "color:green;
font-size: 20px; font-weight: bold;">
</p>
<script>
var up1 = document.getElementById('GFG_UP1');
var up2 = document.getElementById('GFG_UP2');
var down = document.getElementById('GFG_DOWN');
var obj = {
"Prop_1": "Val_1",
"Prop_2": "Val_2",
"Prop_3": "Val_3"
};
up1.innerHTML = "Click on the button to swap"
+ " the key with values.";
up2.innerHTML = JSON.stringify(obj);
function swapValues(j){
var res = {};
for(var key in j){
res[j[key]] = key;
}
return res;
}
function GFG_Fun() {
down.innerHTML =
JSON.stringify(swapValues(obj));
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Enfoque 2:
- Crea un nuevo objeto vacío.
- Para cada clave del objeto, agregue los elementos del objeto antiguo al nuevo objeto en forma inversa (intercambiando la clave y los valores). Usando el método .ForEach()
Ejemplo: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to swap key and value of JSON
element using JavaScript ?
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP1" style =
"font-size: 15px; font-weight: bold;">
</p>
<p id = "GFG_UP2" style = "font-size: 15px;
font-weight: bold; color: green;">
</p>
<button onclick = "GFG_Fun()">
click here
</button>
<p id = "GFG_DOWN" style = "color:green;
font-size: 20px; font-weight: bold;">
</p>
<script>
var up1 = document.getElementById('GFG_UP1');
var up2 = document.getElementById('GFG_UP2');
var down = document.getElementById('GFG_DOWN');
var obj = {
"Prop_1": "Val_1",
"Prop_2": "Val_2",
"Prop_3": "Val_3"
};
up1.innerHTML = "Click on the button to "
+ "swap the key with values.";
up2.innerHTML = JSON.stringify(obj);
function swapValues(o) {
const res = {};
Object.keys(o).forEach(key => {
res[o[key]] = key;
});
return res;
}
function GFG_Fun() {
down.innerHTML =
JSON.stringify(swapValues(obj));
}
</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