Wie kann ich auf ein JavaScript-Objekt zugreifen, dessen Schlüssel im Objektschlüssel Leerzeichen enthalten?

Ich habe ein JavaScript-Objekt, das ungefähr so ​​aussieht:

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

Ich kann auf die Eigenschaften der cartooneinfachen Verwendung myTextOptions.cartoon.comicoder was auch immer zugreifen . Ich konnte jedoch nicht die richtige Syntax für den Zugriff finden kid. Ich habe Folgendes ohne Glück versucht:

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

Verwenden Sie ECMAscripts "Klammer-Notation":

myTextOptions[ 'character names' ].kid;

Sie können diese Notation so oder so verwenden, lesen und schreiben.

Weitere Informationen finden Sie hier:

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

Auf Eigenschaften von JavaScript-Objekten kann auch mit einer Klammer-Notation zugegriffen oder festgelegt werden (weitere Informationen finden Sie unter Eigenschaften-Accessoren ). Objekte werden manchmal als assoziative Arrays bezeichnet, da jeder Eigenschaft ein Zeichenfolgenwert zugeordnet ist, mit dem auf sie zugegriffen werden kann. So können Sie beispielsweise wie folgt auf die Eigenschaften des myCar-Objekts zugreifen:

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

Weitere Informationen finden Sie unter Arbeiten mit JS-Objekten .

Also in deinem Fall ist es myTextOptions['character names'].kid;

Wir können dies auch tun, indem wir -

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

Dies ist nützlich, wenn wir aufeinanderfolgende Schlüssel haben, die aus Leerzeichen bestehen.

Lassen Sie mich hier meine Lösung teilen. Ich verwende VueJs mit Typenskript.

Ich habe json gefolgt, um es zu analysieren und in der Benutzeroberfläche anzuzeigen

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

Ich habe das folgende Modell Interferenz in Typescript erstellt

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

Ich habe die API wie folgt aufgerufen:

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

Wird in JSX verwendet wie:

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

Gleiches kann auch in React und Angular funktionieren.

Verwenden Sie diesen Code

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