Як я можу отримати доступ до об’єкта JavaScript, який має пробіли в ключі об'єкта?

У мене об’єкт JavaScript виглядає приблизно так:

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

Я можу отримати доступ до властивостей, cartoonлегко використовуючи myTextOptions.cartoon.comicабо що завгодно. Однак мені не вдалося отримати право на синтаксис для доступу kid. Я спробував наступне без удачі:

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 "дужки нотації":

myTextOptions[ 'character names' ].kid;

Ви можете використовувати цю нотацію будь-яким способом, читаючи та писати.

Для отримання додаткової інформації читайте тут:

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

До властивостей об’єктів JavaScript також можна отримати доступ або встановити, використовуючи дужку позначення (детальніше див. Аксесуари властивостей ). Об'єкти іноді називають асоціативними масивами, оскільки кожне властивість асоціюється зі значенням рядка, яке можна використовувати для доступу до нього. Так, наприклад, ви можете отримати доступ до властивостей об'єкта myCar наступним чином:

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

Докладніше читайте у розділі Робота з об’єктами JS .

Тож у вашому випадку це так myTextOptions['character names'].kid;

Ми також можемо це зробити:

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

Це корисно, коли у нас є послідовні ключі, які складаються з місця.

Дозвольте мені поділитися своїм рішенням, тут я використовую VueJs з тип-скриптом.

Я отримав наступний json для розбору та відображення в інтерфейсі користувача

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

Я створив наступну модель втручання в Typescript

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

Я назвав API таким чином:

   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 як:

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

Те саме може працювати в React і Angular.

використовувати цей код

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