Comment puis-je accéder à un objet JavaScript dont la clé contient des espaces ?

Question

J'ai un objet JavaScript qui ressemble à quelque chose comme ceci :

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

Je peux accéder aux propriétés de cartoon facilement en utilisant myTextOptions.cartoon.comic ou autre. Cependant, je n'ai pas réussi à trouver la bonne syntaxe pour accéder à kid . J'ai essayé ce qui suit, sans succès :

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

Answer 1

Utilisez la "notation entre crochets" de l'ECMAscripts :

myTextOptions[ 'character names' ].kid;

Vous pouvez utiliser cette notation dans les deux sens, lecture et écriture.

Pour plus d'informations, lisez ici :

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

Answer 2

Les propriétés des objets JavaScript peuvent également être consultées ou définies à l'aide d'une notation entre crochets (pour plus de détails, voir accesseurs de propriété ). Les objets sont parfois appelés tableaux associatifs, car chaque propriété est associée à une valeur de chaîne de caractères qui peut être utilisée pour y accéder. Ainsi, par exemple, vous pouvez accéder aux propriétés de l'objet myCar de la manière suivante :

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

Pour en savoir plus, consultez le site Travailler avec des objets JS .

Donc dans votre cas, c'est myTextOptions['character names'].kid;

Answer 3

Nous pouvons également le faire en -

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

Ceci est utile lorsque nous avons des clés consécutives qui consistent en un espace.

Answer 4

Permettez-moi de partager ma solution ici J'utilise VueJs avec le type script.

J'ai obtenu le json suivant pour le parser et l'afficher dans l'interface utilisateur.

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

J'ai créé le modèle suivant interférer dans Typescript

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

J'ai appelé l'API comme :

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

Utilisé dans JSX comme :

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

La même chose peut aussi fonctionner dans React et Angular.