Làm cách nào để truy cập vào một đối tượng JavaScript có khoảng trắng trong khóa của đối tượng?

Tôi có một đối tượng JavaScript trông giống như sau:

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

Tôi có thể truy cập các thuộc tính của cartoondễ dàng sử dụng myTextOptions.cartoon.comichoặc bất cứ điều gì. Tuy nhiên, tôi không thể lấy đúng cú pháp để truy cập kid. Tôi đã thử những cách sau mà không may mắn:

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

Sử dụng "ký hiệu dấu ngoặc" ECMAscripts:

myTextOptions[ 'character names' ].kid;

Bạn có thể sử dụng ký hiệu đó theo cả hai cách, đọc và ghi.

Để biết thêm thông tin, hãy đọc tại đây:

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

Các thuộc tính của đối tượng JavaScript cũng có thể được truy cập hoặc thiết lập bằng cách sử dụng ký hiệu khung (để biết thêm chi tiết, xem accessors tài sản ). Các đối tượng đôi khi được gọi là mảng kết hợp vì mỗi thuộc tính được liên kết với một giá trị chuỗi có thể được sử dụng để truy cập nó. Vì vậy, ví dụ, bạn có thể truy cập các thuộc tính của đối tượng myCar như sau:

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

Để biết thêm, hãy đọc tại Làm việc với các đối tượng JS .

Vì vậy, trong trường hợp của bạn, đó là myTextOptions['character names'].kid;

Chúng tôi cũng có thể làm điều này bằng cách -

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

Điều này rất hữu ích khi chúng ta có các khóa liên tiếp bao gồm khoảng trắng.

Hãy để tôi chia sẻ giải pháp của tôi ở đây Tôi đang sử dụng VueJs với type script.

Tôi đã theo dõi json để phân tích cú pháp và hiển thị trong giao diện người dùng

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

Tôi đã tạo mô hình sau can thiệp vào Typecript

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

Tôi đã gọi API là:

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

Được sử dụng trong JSX như:

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

Tương tự cũng có thể hoạt động trong React và Angular.

sử dụng mã này

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