Bagaimana saya bisa mengakses objek JavaScript yang memiliki spasi di kunci objek?

Saya memiliki objek JavaScript yang terlihat seperti ini:

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

Saya dapat mengakses properti cartoondengan mudah menggunakan myTextOptions.cartoon.comicatau apa pun. Namun, saya belum bisa mendapatkan sintaks yang tepat untuk mengakses kid. Saya sudah mencoba yang berikut ini tetapi tidak berhasil:

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

Gunakan ECMAscripts "braket notasi":

myTextOptions[ 'character names' ].kid;

Anda dapat menggunakan notasi itu dengan cara apa pun, membaca & menulis.

Untuk informasi lebih lanjut baca di sini:

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

Properti objek JavaScript juga dapat diakses atau disetel menggunakan notasi braket (untuk lebih jelasnya lihat pengakses properti ). Objek terkadang disebut array asosiatif karena setiap properti dikaitkan dengan nilai string yang dapat digunakan untuk mengaksesnya. Jadi, misalnya, Anda dapat mengakses properti objek myCar sebagai berikut:

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

Untuk lebih lanjut, baca di Bekerja dengan Objek JS .

Jadi dalam kasus Anda itu myTextOptions['character names'].kid;

Kami juga dapat melakukan ini dengan -

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

Ini berguna ketika kita memiliki kunci berurutan yang terdiri dari spasi.

Izinkan saya membagikan solusi saya di sini, saya menggunakan VueJs dengan skrip tipe.

Saya mengikuti json untuk diurai dan ditampilkan di UI

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

Saya telah membuat model berikut mengganggu di Ketik

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

Saya menyebut API sebagai:

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

Digunakan di BEJ seperti:

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

Sama juga bisa bekerja di React dan Angular.

gunakan kode ini

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