How can I access a JavaScript object which has spaces in the object's key?


I have a JavaScript object that looks something like this:

var myTextOptions = {
  'cartoon': {
     comic: 'Calvin & Hobbes',
     published: '1993'
  },
  'character names': {
    kid: 'Calvin',
    tiger: 'Hobbes'
  }
}

I can access the properties of cartoon easily using myTextOptions.cartoon.comic or whatever. However, I haven't been able to get the syntax right for accessing kid. I've tried the following with no luck:

myTextOptions.character names.kid
myTextOptions."character names".kid
myTextOptions.character\ names.kid
myTextOptions.'character names'.kid
myTextOptions.["character names"].kid
myTextOptions.character%20names.kid

Use ECMAscripts "bracket notation":

myTextOptions[ 'character names' ].kid;

You can use that notation either way, reading & writting.

For more information read out here:


Properties of JavaScript objects can also be accessed or set using a bracket notation (for more details see property accessors). Objects are sometimes called associative arrays since each property is associated with a string value that can be used to access it. So, for example, you could access the properties of the myCar object as follows:

myCar['make'] = 'Ford';
myCar['model'] = 'Mustang';
myCar['year'] = 1969;

For more, read on at Working with JS Objects.

So in your case it's myTextOptions['character names'].kid;


We can also do this by -

myTextOptions[ 'character names' ]['kid'];

This is useful when we have consecutive keys which consist of space.


In Google Chrome, if you go to inspect element and then hover over the json file data sets, each individual data set will have a tooltip appear showing it's path and it also gives you the option to copy the path into your clipboard. Just an FYI.


Let me share my problem and solution here I am using VueJs with type script.

I got following json to parse and display in UI

 {
    "Brand": "MAMA",
    "Variety": "Instant Noodles Coconut Milk Flavour",
    "Style": "Pack",
    "Country": "Myanmar",
    "Stars": 5,
    "Top Ten": "2016 #10"
  },

I have created the following model interfere in Typescript

export interface Resto {
    Brand: string;
    Variety: string;
    Style: string;
    Country: string;
    Stars: any;
    Top_Ten: string;
    }

I have called the API as:

   public async getListOfRestos() {
    return (await fetch(
      `http://starlord.hackerearth.com/TopRamen`,
      {
        method: "get",
        credentials: "include",
        headers: {
          "Content-Type": "application/json",
        },
        body: undefined
      }
    )) as IFetchResponse<Resto[]>;
  } 

Used in JSX like:

 <div class="parent" v-for="(x,i) in listOfRestos" :key="i">
      <div>{{x.Brand}}</div>
      <div>{{x.Variety}}</div>
      <div>{{x.Style}}</div>
      <div>{{x.Country}}</div>
      <div>{{x.Stars}}</div>
      <div>{{x['Top Ten']}}</div>
  </div>

Same can also work in React and Angular.


use this code

myTextOptions.["character names"]["kid"];