Why does the Javascript object show so many levels of hierarchy ? How to declare and access it correctly?

export interface NowChannelInterface {
  id: number;
  name: string;
  isSelected: Boolean;
}

export interface NowChannellistInterface {
  nowChannelList: NowChannelInterface[];
}

const initialState: NowChannellistInterface = {
  nowChannelList: [
    {
      id: 0,
      name: 'CNN',
      isSelected: true
    },
    {
      id: 1,
      name: 'BBC',
      isSelected: true
    },
    {
      id: 2,
      name: 'NDTV',
      isSelected: true
    },
    {
      id: 3,
      name: 'QTV',
      isSelected: true
    }
  ]
};

====xxx====

Then initialState is copied to channels, Any suggestion around alternate way of declaring is also welcome but note I have to keep the above two as interface than object to be able to use it with observables.

====xxx====

====xxx====

====xxx====

====xxx====

====xxx====

====xxx====

====xxx====

Now in console when I try to use I find,

via ishandutta2007