Here we will learn to exchange the keys and values of JSON elements using JavaScript. In JavaScript, objects store key-value pairs. Therefore, we can swap the key and value just like we swap two normal variables.
In this tutorial, we will learn different ways to exchange all key values of a JSON element using JavaScript.
Use for loop
We can use a for loop to iterate over the keys of a JSON object. After that we can access the value from the object using the key. Therefore, we can exchange every key and value in the object.
Additionally, we need to create a new empty object and store the keys and values of that object after swapping.
grammar
Users can use the for loop to exchange keys and values in JSON elements according to the following syntax.
for (let key in object) {
let value = object[key];
new_obj[value] = key;
}
In the above syntax, we use the key to access its value from the object, for new_obj, we use the value as the key and the key as the value.
Example 1
In the following example, we create an object containing unique key-value pairs. Additionally, we create an empty new_obj object to store the swapped keys and values. After that, we use a for loop to iterate over the keys of the object. In the for loop, we access the value of a specific key from the JSON element.
We add the keys and values from the object to the new_obj object, but we use the value as the key and the key as the value to be swapped. In the output, the user can observe that the key-value pairs of new_obj are exchanged.
<html>
<body>
<h2 id="Using-the-i-for-loop-i-to-swap-keys-and-values-of-JSON-elements">Using the <i> for loop </i> to swap keys and values of JSON elements</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let object = {
"key1": true,
"key2": 10,
"key3": "hello",
"key4": 40
}
let new_obj = {};
for (let key in object) {
let value = object[key];
new_obj[value] = key;
}
output.innerHTML += "The old object is " + JSON.stringify(object) + "<br/>";
output.innerHTML += "The new object after swapping the key and values is " + JSON.stringify(new_obj) + "<br/>";
</script>
</body>
</html>
Use Object.keys() and forEach() methods
We can use the Object.keys() method to get the keys of the object in array format. Afterwards, we can use the forEach() method to iterate over the keys array.
While iterating over all keys, we can access the value of a specific key and use it as the key for the new object.
grammar
Users can use the Object.keys() and forEach() methods according to the following syntax to exchange all keys and values of the JSON object.
Object.keys(student_obj).forEach((objectKey) => {
swapped_obj[ student_obj[objectKey] ] = objectKey;
})
In the above syntax, we use "student_obj[objectKey]" to get the value from the object, which serves as the key of the swapped_obj object.
Example 2
In this example, we created the student_obj object, which contains various attributes of student and their values. After that, we swap all the keys and values of the object using Object.entries() and forEach() methods and store it into the swapped_obj object.
<html>
<body>
<h2 id="Using-the-i-Object-keys-and-forEach-methods-i-to-swap-keys-and-values-of-JSON-elements">Using the <i> Object.keys() and forEach() methods </i> to swap keys and values of JSON elements.</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let student_obj = {
"name": "Shubham",
"age": 22,
"hobby": "Writing",
"Above18": true,
"id": "waewr34fg7y657"
}
let swapped_obj = {};
Object.keys(student_obj).forEach((objectKey) => {
let keyvalue = student_obj[objectKey];
swapped_obj[keyvalue] = objectKey;
})
output.innerHTML += "The old object is " + JSON.stringify(student_obj) + "<br/>";
output.innerHTML += "The new object after swapping the key and values is " + JSON.stringify(swapped_obj) + "<br/>";
</script>
</body>
</html>
Use Object.entries() and map() methods
We can use the Object.entries() method to get all the keys and values of the object in array format. After exchanging the old key-value pairs, we can use the map() method to map the new key-value pairs.
We can use array destructuring properties to exchange each key and value pair.
grammar
Users can use the Object.entries() and map() methods according to the following syntax to exchange the keys and values of JSON elements.
const result = Object.entries(table).map(
([prop, propValue]) => { return [propValue, prop]; }
);
let newObject = Object.fromEntries(result);
We reversed the order of each key and value pair in the above syntax. So keys become values and values become keys. Additionally, we create an object from the entries of keys and values using the Object.fromEntries() method.
Example 3
In this example, we define a table object that contains table properties. When the user clicks the button, it calls the swapKeyValues() function.
In the swapKeyValues() function, we swap each key and value pair of the object and store them in the FinalObject array. After that, we use the Object.fromEntries() method to convert the finalObject array into a JSON object and store it in the newObject variable
<html>
<body>
<h2 id="Using-the-i-Object-entries-and-map-methods-i-to-swap-keys-and-values-of-JSON-elements">Using the <i> Object.entries() and map() methods </i> to swap keys and values of JSON elements.</h2>
<div id = "output"></div>
<button onclick = "swapKeyValues()"> Swap Object key values</button>
<script>
let output = document.getElementById('output');
let table = {
"id": "1234",
"color": "blue",
"size": "6 feet",
"legs": "6",
"chairs": "8",
}
function swapKeyValues() {
output.innerHTML += "The initial object is " + JSON.stringify(table) + "<br/>";
let objectEntries = Object.entries(table);
const finalObject = objectEntries.map(
([prop, propValue]) => { return [propValue, prop]; }
);
let newObject = Object.fromEntries(finalObject);
output.innerHTML += "The new object after swapping the key and values is " + JSON.stringify(newObject) + "<br/>";
return;
}
</script>
</body>
</html>
We learned three ways to exchange the keys and values of JSON elements. Additionally, we can use the array.reduce() method and Object.entries() method to exchange the keys and values of objects.
The above is the detailed content of How to exchange keys and values of JSON elements using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!
Replace String Characters in JavaScriptMar 11, 2025 am 12:07 AMDetailed explanation of JavaScript string replacement method and FAQ This article will explore two ways to replace string characters in JavaScript: internal JavaScript code and internal HTML for web pages. Replace string inside JavaScript code The most direct way is to use the replace() method: str = str.replace("find","replace"); This method replaces only the first match. To replace all matches, use a regular expression and add the global flag g: str = str.replace(/fi
8 Stunning jQuery Page Layout PluginsMar 06, 2025 am 12:48 AMLeverage jQuery for Effortless Web Page Layouts: 8 Essential Plugins jQuery simplifies web page layout significantly. This article highlights eight powerful jQuery plugins that streamline the process, particularly useful for manual website creation
Build Your Own AJAX Web ApplicationsMar 09, 2025 am 12:11 AMSo here you are, ready to learn all about this thing called AJAX. But, what exactly is it? The term AJAX refers to a loose grouping of technologies that are used to create dynamic, interactive web content. The term AJAX, originally coined by Jesse J
10 Mobile Cheat Sheets for Mobile DevelopmentMar 05, 2025 am 12:43 AMThis post compiles helpful cheat sheets, reference guides, quick recipes, and code snippets for Android, Blackberry, and iPhone app development. No developer should be without them! Touch Gesture Reference Guide (PDF) A valuable resource for desig
Improve Your jQuery Knowledge with the Source ViewerMar 05, 2025 am 12:54 AMjQuery is a great JavaScript framework. However, as with any library, sometimes it’s necessary to get under the hood to discover what’s going on. Perhaps it’s because you’re tracing a bug or are just curious about how jQuery achieves a particular UI
How do I create and publish my own JavaScript libraries?Mar 18, 2025 pm 03:12 PMArticle discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.
10 jQuery Fun and Games PluginsMar 08, 2025 am 12:42 AM10 fun jQuery game plugins to make your website more attractive and enhance user stickiness! While Flash is still the best software for developing casual web games, jQuery can also create surprising effects, and while not comparable to pure action Flash games, in some cases you can also have unexpected fun in your browser. jQuery tic toe game The "Hello world" of game programming now has a jQuery version. Source code jQuery Crazy Word Composition Game This is a fill-in-the-blank game, and it can produce some weird results due to not knowing the context of the word. Source code jQuery mine sweeping game
jQuery Parallax Tutorial - Animated Header BackgroundMar 08, 2025 am 12:39 AMThis tutorial demonstrates how to create a captivating parallax background effect using jQuery. We'll build a header banner with layered images that create a stunning visual depth. The updated plugin works with jQuery 1.6.4 and later. Download the
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
Dreamweaver Mac version
Visual web development tools
Notepad++7.3.1
Easy-to-use and free code editor
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
SublimeText3 Mac version
God-level code editing software (SublimeText3)
