Given an object and the task is to access the object in which the key contains spaces. There are a 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.
html
<h1 style="color:green;"> neveropen </h1> <p id="GFG_UP"></p> <button onclick="GFG_Fun()"> click here </button> <p id="GFG_DOWN"></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> |
Output:
How to access an object having spaces in the object’s key using JavaScript ?
Approach 2:
- Create an object having space-separated keys.
- Take the key in a variable and use that variable in place of the key (But, Here also square bracket notation will work).
Example: This example implements the above approach.
html
<h1 style="color:green;"> neveropen </h1> <p id="GFG_UP"></p> <button onclick="GFG_Fun()"> click here </button> <p id="GFG_DOWN"></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> |
Output:
How to access an object having spaces in the object’s key using JavaScript ?
