다음과 같은 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;
그 표기법은 읽기와 쓰기로 사용할 수 있습니다.
자세한 내용은 여기를 참조하십시오.
답변
JavaScript 객체의 속성은 대괄호 표기법을 사용하여 액세스하거나 설정할 수도 있습니다 (자세한 내용은 속성 접근 자 참조 ). 각 속성은 개체에 액세스하는 데 사용할 수있는 문자열 값과 연결되어 있기 때문에 객체를 연관 배열이라고도합니다. 따라서 예를 들어 다음과 같이 myCar 객체의 속성에 액세스 할 수 있습니다.
myCar['make'] = 'Ford';
myCar['model'] = 'Mustang';
myCar['year'] = 1969;
자세한 내용은 Working with JS Objects를 참조하십시오 .
그래서 귀하의 경우에는 myTextOptions['character names'].kid;
답변
우리는 또한 이것을 할 수 있습니다-
myTextOptions[ 'character names' ]['kid']
;
이것은 공백으로 구성된 연속 키가있을 때 유용합니다.
답변
여기서 내 솔루션을 공유하겠습니다. 유형 스크립트와 함께 VueJ를 사용하고 있습니다.
UI에서 구문 분석하고 표시하기 위해 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"];