Jak mogę uzyskać dostęp do obiektu JavaScript, który ma spacje w kluczu obiektu?

112

Mam obiekt JavaScript, który wygląda mniej więcej tak:

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

Mam dostęp do właściwości cartoonłatwego używania myTextOptions.cartoon.comiclub czegokolwiek. Jednak nie udało mi się uzyskać właściwej składni dostępu kid. Próbowałem następujących rzeczy bez powodzenia:

myTextOptions.character names.kid
myTextOptions."character names".kid
myTextOptions.character\ names.kid
myTextOptions.'character names'.kid
myTextOptions.["character names"].kid
myTextOptions.character%20names.kid
julio
źródło
W przeglądarce Google Chrome, jeśli przejdziesz do inspekcji elementu, a następnie najedziesz kursorem na zestawy danych pliku json, każdy zestaw danych będzie miał etykietę narzędzia pokazującą ścieżkę, a także opcję skopiowania ścieżki do schowka. Tylko do Twojej wiadomości.
Simon Suh
Świetna odpowiedź. Ale ostatnia opcja nie zadziałała.
Daniel Bandeira
więcej ... Po wpisaniu myTextOptions.character% 20n.kid zwraca „NaN”. Ostatnia nazwa nieruchomości (dziecko) nie ma znaczenia, powinna być inna. Używam FireFox Quantum 8.3.0esr (64-bity) na Debianie 9
Daniel Bandeira

Odpowiedzi:

231

Użyj „notacji nawiasowej” w skryptach ECMA:

myTextOptions[ 'character names' ].kid;

Możesz używać tej notacji w dowolny sposób, czytając i pisząc.

Więcej informacji znajdziesz tutaj:

jAndy
źródło
2
julio wspomina w OP, którego już próbował użyć myTextOptions.["character names"].kid- aby uzupełnić to pytanie, zastanawiałem się, dlaczego to nie działa?
James_F
7
@James_F Ponieważ używał również dot notationjednocześnie. Musi istnieć tylko jedna dyrektywa akcesora.
jAndy,
2
och, tak, przepraszam - wyglądał tak mocno, że nie widziałem dodatkowej kropki przed nawiasem! - dzięki
James_F,
Czy ktoś wie, czy używanie spacji w kluczach obiektów jest dobrą, czy złą praktyką?
Juan P. Ortiz
1
@ JuanP.Ortiz, To nie jest dobra praktyka, jeśli używasz maszynopisu, stracisz kontrolę kompilacji maszynopisu.
Rosdi Kasim
4

Dostęp do właściwości obiektów JavaScript można również uzyskać lub ustawić za pomocą notacji nawiasów (więcej szczegółów można znaleźć w metodach dostępu do właściwości ). Obiekty są czasami nazywane tablicami asocjacyjnymi, ponieważ każda właściwość jest powiązana z wartością ciągu, za pomocą której można uzyskać do niej dostęp. Na przykład można uzyskać dostęp do właściwości obiektu myCar w następujący sposób:

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

Aby uzyskać więcej informacji, przeczytaj artykuł Praca z obiektami JS .

Więc w twoim przypadku tak jest myTextOptions['character names'].kid;

Ahmad Awais
źródło
2

Możemy to również zrobić poprzez -

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

Jest to przydatne, gdy mamy kolejne klawisze, które składają się ze spacji.

Shubham AK
źródło
0

Pozwólcie, że podzielę się tutaj moim rozwiązaniem. Używam VueJs ze skryptem typu.

Otrzymałem następujące json, aby przeanalizować i wyświetlić w interfejsie użytkownika

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

Utworzyłem następujący model ingerujący w Typescript

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

Nazwałem API jako:

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

Używany w JSX, jak:

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

To samo może działać również w React i Angular.

Vikas Gupta
źródło
0

użyj tego kodu

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

therealsungumo
źródło
Do rzeczy i zwięźle, ale nowi użytkownicy js mogą nie rozumieć uzasadnienia tego pytania.
Grasshopper