Come posso accedere a un oggetto JavaScript che ha spazi nella chiave dell'oggetto?

Ho un oggetto JavaScript che assomiglia a questo:

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

Posso accedere alle proprietà di cartoonusare facilmente myTextOptions.cartoon.comico qualsiasi altra cosa. Tuttavia, non sono stato in grado di ottenere la sintassi giusta per l'accesso kid. Ho provato quanto segue senza fortuna:

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

Usa ECMAscripts "notazione parentesi":

myTextOptions[ 'character names' ].kid;

Puoi usare quella notazione in entrambi i modi, leggendo e scrivendo.

Per maggiori informazioni leggi qui:

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

È inoltre possibile accedere alle proprietà degli oggetti JavaScript o impostarle utilizzando una notazione tra parentesi (per maggiori dettagli vedere le funzioni di accesso alle proprietà ). Gli oggetti sono talvolta chiamati array associativi poiché ogni proprietà è associata a un valore stringa che può essere utilizzato per accedervi. Quindi, ad esempio, potresti accedere alle proprietà dell'oggetto myCar come segue:

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

Per ulteriori informazioni, continua a leggere Lavorare con oggetti JS .

Quindi nel tuo caso lo è myTextOptions['character names'].kid;

Possiamo farlo anche:

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

Questo è utile quando abbiamo chiavi consecutive che consistono di spazio.

Lasciami condividere la mia soluzione qui sto usando VueJs con script di tipo.

Ho seguito json per analizzare e visualizzare nell'interfaccia utente

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

Ho creato il seguente modello interferire in Typescript

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

Ho chiamato l'API come:

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

Utilizzato in JSX come:

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

Lo stesso può funzionare anche in React e Angular.

usa questo codice

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