[英]How can I access a JavaScript object which has spaces in the object's key?
I have a JavaScript object that looks something like this:我有一个看起来像这样的 JavaScript 对象:
var myTextOptions = {
'cartoon': {
comic: 'Calvin & Hobbes',
published: '1993'
},
'character names': {
kid: 'Calvin',
tiger: 'Hobbes'
}
}
I can access the properties of cartoon
easily using myTextOptions.cartoon.comic
or whatever.我可以使用myTextOptions.cartoon.comic
或其他任何东西轻松访问cartoon
的属性。 However, I haven't been able to get the syntax right for accessing kid
.但是,我无法获得访问kid
正确语法。 I've tried the following with no luck:我试过以下没有运气:
myTextOptions.character names.kid
myTextOptions."character names".kid
myTextOptions.character\ names.kid
myTextOptions.'character names'.kid
myTextOptions.["character names"].kid
myTextOptions.character%20names.kid
Use ECMAscripts "bracket notation":使用 ECMAscripts 的“括号符号”:
myTextOptions[ 'character names' ].kid;
You can use that notation either way, reading & writting.您可以以任何一种方式使用该符号,阅读和写作。
For more information read out here:有关更多信息,请阅读此处:
Properties of JavaScript objects can also be accessed or set using a bracket notation (for more details see property accessors ). JavaScript 对象的属性也可以使用括号表示法访问或设置(有关更多详细信息,请参阅属性访问器)。 Objects are sometimes called associative arrays since each property is associated with a string value that can be used to access it.对象有时称为关联数组,因为每个属性都与可用于访问它的字符串值相关联。 So, for example, you could access the properties of the myCar object as follows:因此,例如,您可以按如下方式访问 myCar 对象的属性:
myCar['make'] = 'Ford';
myCar['model'] = 'Mustang';
myCar['year'] = 1969;
For more, read on at Working with JS Objects .有关更多信息,请继续阅读使用 JS 对象。
So in your case it's myTextOptions['character names'].kid;
所以在你的情况下它是myTextOptions['character names'].kid;
We can also do this by -我们也可以通过 -
myTextOptions[ 'character names' ]['kid']
; myTextOptions[ 'character names' ]['kid']
;
This is useful when we have consecutive keys which consist of space.当我们有由空格组成的连续键时,这很有用。
In Google Chrome, if you go to inspect element and then hover over the json file data sets, each individual data set will have a tooltip appear showing it's path and it also gives you the option to copy the path into your clipboard. 在Google Chrome浏览器中,如果您要检查元素,然后将鼠标悬停在json文件数据集上,则每个单独的数据集都会显示一个工具提示,显示其路径,它还为您提供了将路径复制到剪贴板的选项。 Just an FYI. 仅供参考。
Let me share my solution here I am using VueJs with type script.让我在这里分享我的解决方案,我将 VueJs 与类型脚本一起使用。
I got following json to parse and display in UI我得到了以下 json 来解析并在 UI 中显示
{
"Brand": "MAMA",
"Variety": "Instant Noodles Coconut Milk Flavour",
"Style": "Pack",
"Country": "Myanmar",
"Stars": 5,
"Top Ten": "2016 #10"
},
I have created the following model interfere in Typescript我在打字稿中创建了以下模型干扰
export interface Resto {
Brand: string;
Variety: string;
Style: string;
Country: string;
Stars: any;
Top_Ten: string;
}
I have called the API as:我将 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[]>;
}
Used in JSX like:在 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>
Same can also work in React and Angular.同样也适用于 React 和 Angular。
I have a JavaScript object that looks something like this:我有一个JavaScript对象,看起来像这样:
var myTextOptions = {
'cartoon': {
comic: 'Calvin & Hobbes',
published: '1993'
},
'character names': {
kid: 'Calvin',
tiger: 'Hobbes'
}
}
I can access the properties of cartoon
easily using myTextOptions.cartoon.comic
or whatever.我可以使用myTextOptions.cartoon.comic
或其他任何方式轻松访问cartoon
的属性。 However, I haven't been able to get the syntax right for accessing kid
.但是,我还无法获得正确的语法来访问kid
。 I've tried the following with no luck:我已经尝试了以下方法,但是没有运气:
myTextOptions.character names.kid
myTextOptions."character names".kid
myTextOptions.character\ names.kid
myTextOptions.'character names'.kid
myTextOptions.["character names"].kid
myTextOptions.character%20names.kid
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.