ฉันจะเข้าถึงวัตถุ 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 "bracket notation":

myTextOptions[ 'character names' ].kid;

คุณสามารถใช้สัญกรณ์นั้นได้ทั้งการอ่านและการเขียน

สำหรับข้อมูลเพิ่มเติมอ่านได้ที่นี่:

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

คุณสมบัติของอ็อบเจ็กต์ JavaScript ยังสามารถเข้าถึงหรือตั้งค่าได้โดยใช้เครื่องหมายวงเล็บ (สำหรับรายละเอียดเพิ่มเติมโปรดดูตัวเข้าถึงคุณสมบัติ ) บางครั้งอ็อบเจ็กต์ถูกเรียกว่า Associative arrays เนื่องจากแต่ละคุณสมบัติมีความเกี่ยวข้องกับค่าสตริงที่สามารถใช้เพื่อเข้าถึงได้ ตัวอย่างเช่นคุณสามารถเข้าถึงคุณสมบัติของวัตถุ myCar ได้ดังนี้:

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

สำหรับข้อมูลเพิ่มเติมอ่านในที่ทำงานกับ JS วัตถุ

ดังนั้นในกรณีของคุณก็คือ myTextOptions['character names'].kid;

เราสามารถทำได้โดย -

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

สิ่งนี้มีประโยชน์เมื่อเรามีคีย์ที่ต่อเนื่องกันซึ่งประกอบด้วยช่องว่าง

ให้ฉันแบ่งปันวิธีแก้ปัญหาของฉันที่นี่ฉันใช้ VueJs กับสคริปต์ประเภท

ฉันติดตาม json เพื่อแยกวิเคราะห์และแสดงใน UI

 {
    "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"];