Como posso acessar um objeto JavaScript que contém espaços na chave do objeto?

Eu tenho um objeto JavaScript que se parece com isto:

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

Posso acessar as propriedades de cartoonusar facilmente myTextOptions.cartoon.comicou o que quer. No entanto, não consegui obter a sintaxe correta para acessar kid. Tentei o seguinte sem sorte:

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 "notação de colchetes":

myTextOptions[ 'character names' ].kid;

Você pode usar essa notação de qualquer maneira, lendo e escrevendo.

Para mais informações, leia aqui:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

Propriedades de objetos JavaScript também podem ser acessadas ou definidas usando uma notação de colchetes (para obter mais detalhes, consulte acessadores de propriedade ). Os objetos às vezes são chamados de matrizes associativas, pois cada propriedade está associada a um valor de string que pode ser usado para acessá-la. Assim, por exemplo, você pode acessar as propriedades do objeto myCar da seguinte maneira:

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

Para mais informações, continue lendo em Working with JS Objects .

Então, no seu caso é myTextOptions['character names'].kid;

Também podemos fazer isso -

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

Isso é útil quando temos chaves consecutivas que consistem em espaço.

Deixe-me compartilhar minha solução aqui, estou usando VueJs com script de tipo.

Eu comecei a seguir json para analisar e exibir na IU

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

Eu criei o seguinte modelo que interfere no Typescript

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

Eu chamei a API como:

   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[]>;
  } 

Usado em JSX como:

 <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>

O mesmo também pode funcionar em React e Angular.

use este código

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