Nesnenin anahtarında boşluklar olan bir JavaScript nesnesine nasıl erişebilirim?

Şuna benzeyen bir JavaScript nesnem var:

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

cartoonKullanarak myTextOptions.cartoon.comicya da ne olursa olsun özelliklerine kolayca erişebilirim . Ancak, söz dizimini erişim için doğru bir şekilde alamadım kid. Şanssız olarak şunu denedim:

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

ECMAscripts "köşeli parantez gösterimi" kullanın:

myTextOptions[ 'character names' ].kid;

Bu notasyonu her iki şekilde de kullanabilirsiniz, okuma ve yazma.

Daha fazla bilgi için buradan okuyun:

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

JavaScript nesnelerinin özelliklerine de bir parantez gösterimi kullanılarak erişilebilir veya ayarlanabilir (daha fazla ayrıntı için, özellik erişimcilerine bakın ). Her özellik, ona erişmek için kullanılabilecek bir dize değeriyle ilişkilendirildiğinden, nesnelere bazen ilişkilendirilebilir diziler denir. Dolayısıyla, örneğin, myCar nesnesinin özelliklerine aşağıdaki gibi erişebilirsiniz:

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

Daha fazla bilgi için JS Nesneleriyle Çalışma sayfasını okuyun .

Yani senin durumunda myTextOptions['character names'].kid;

Bunu şu şekilde de yapabiliriz -

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

Bu, boşluktan oluşan ardışık anahtarlarımız olduğunda kullanışlıdır.

Çözümümü burada paylaşmama izin verin, VueJ'leri tip komut dosyası ile kullanıyorum.

UI'de ayrıştırmak ve görüntülemek için json'u takip ettim

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

Typescript'e müdahale etmek için aşağıdaki modeli oluşturdum

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

API'yi şu şekilde çağırdım:

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

JSX'de şöyle kullanılır:

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

Aynı şey React ve Angular'da da çalışabilir.

bu kodu kullan

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