How to access an object having spaces in the object’s key using JavaScript ?
Given an object and the task is to access the object in which key contains spaces. There are few methods to solve this problem which are discussed below:
Approach 1:
- Create an object having space separated keys.
- Use square bracket notation instead of dot notation to access the property.
Example: This example implements the above approach.
<!DOCTYPE HTML><html> <head> <title> Access a JavaScript object having spaces in the object's key. </title></head> <body id="body" align="center"> <h1 style="color:green;"> GeeksforGeeks </h1> <p id="GFG_UP" style="font-size: 15px; font-weight: bold;"> </p> <button onclick="GFG_Fun()"> click here </button> <p id="GFG_DOWN" style="font-size: 20px; font-weight: bold; color:green;"> </p> <script> var el_up = document.getElementById('GFG_UP'); var el_down = document.getElementById('GFG_DOWN'); var JSObject = { 'Geeks': { Geeks1: 'Geeks1_val', Geeks2: 'Geeks2_val' }, 'Computer Science portal': { Geeks_1: 'A Computer Science portal for Geeks.', Geeks_2: 'Geeks_2_val' } } el_up.innerHTML = "Click on the button to access the "+ "key of object<br><br>"+ JSON.stringify(JSObject); function GFG_Fun() { el_down.innerHTML = JSObject['Computer Science portal'].Geeks_1; } </script></body> </html> |
Output:
- Before clicking on the button:
- After clicking on the button:
Approach 2:
- Create an object having space separated keys.
- Take the key in a variable and use that variable in place of key (But, Here also square bracket notation will work).
Example: This example implements the above approach.
<!DOCTYPE HTML><html> <head> <title> Access a JavaScript object having spaces in the object's key. </title></head> <body id="body" align="center"> <h1 style="color:green;"> GeeksforGeeks </h1> <p id="GFG_UP" style="font-size: 15px; font-weight: bold;"> </p> <button onclick="GFG_Fun()"> click here </button> <p id="GFG_DOWN" style="font-size: 20px; font-weight: bold; color:green;"> </p> <script> var el_up = document.getElementById('GFG_UP'); var el_down = document.getElementById('GFG_DOWN'); var JSObject = { 'Geeks': { Geeks1: 'Geeks1_val', Geeks2: 'Geeks2_val' }, 'Computer Science portal': { Geeks_1: 'A Computer Science portal for Geeks.', Geeks_2: 'Geeks_2_val' } } el_up.innerHTML = "Click on the button to access "+ "the key of object<br><br>" + JSON.stringify(JSObject); function GFG_Fun() { var someKey = 'Computer Science portal'; el_down.innerHTML = JSObject[someKey].Geeks_1; } </script></body> </html> |
Output:
- Before clicking on the button:
- After clicking on the button:
