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

Question

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

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. — Simon Suh
– Simon Suh, Commented Jul 15, 2019 at 13:29
more... When I type myTextOptions.character%20n.kid returns 'NaN'. The last property name (kid) doen't matter, should be any other. I'm using FireFox Quantum 8.3.0esr (64-bits) on Debian 9 — Daniel Bandeira
– Daniel Bandeira, Commented May 27, 2020 at 13:09

tripleee · Accepted Answer · 2024-01-02 17:23:07Z

307

Use ECMAscript's "bracket notation":

myTextOptions[ 'character names' ].kid;

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

For more information read here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

edited Jan 2, 2024 at 17:23

tripleee

192k37 gold badges318 silver badges369 bronze badges

answered Nov 29, 2011 at 21:29

jAndy

237k57 gold badges313 silver badges363 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

James_F Over a year ago

julio mentions in the OP that he'd already tried using myTextOptions.["character names"].kid - for completeness to this question, I was wondering why that didn't work?

jAndy Over a year ago

@James_F Because he also used the dot notation simultaneously. There must only be one accessor directive.

James_F Over a year ago

oh, yes, sorry - was looking so hard I didn't see the extra dot before the bracket! - thanks

Rosdi Kasim Over a year ago

@JuanP.Ortiz, This is not a good practice if you are using typescript, you will lose typescript compile check.

Pramod Mali Over a year ago

@RosdiKasim -- to add, one can use [key: type]: any in typescript. i.e. original key "My Id" which is a string so, can declare "[My_Id: string]: any" in interface;

|

Ahmad Awais · Accepted Answer · 2018-08-12 06:31:44Z

7

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;

edited Aug 12, 2018 at 6:31

answered Mar 21, 2017 at 13:21

Ahmad Awais

38k7 gold badges82 silver badges58 bronze badges

Comments

Shubham AK · Accepted Answer · 2018-08-31 10:35:36Z

6

We can also do this by -

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

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

answered Aug 31, 2018 at 10:35

Shubham AK

611 silver badge2 bronze badges

Comments

Bhargav Rao · Accepted Answer · 2020-06-18 11:05:26Z

3

Let me share my 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.

edited Jun 18, 2020 at 11:05

Bhargav Rao

52.6k29 gold badges130 silver badges142 bronze badges

answered Mar 1, 2020 at 7:55

Vikas Gupta

1,3431 gold badge17 silver badges23 bronze badges

1 Comment

locopump Over a year ago

What about if you have: { "Brand": "MAMA", "Variety óí ": "Instant Noodles Coconut Milk Flavour", "Style" : "Pack", "Country ": "Myanmar", "Stars": 5, "Top Ten ": "2016 #10" },

Collectives™ on Stack Overflow

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

4 Answers 4

6 Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

1 Comment

Linked

Related