How to access an object having spaces in the object’s key using JavaScript ?

17 Sep, 2019
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:
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Roadmap to Learn JavaScript For Beginners
Difference Between PUT and PATCH Request
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?