Property 'albums' does not exist on type 'Object' on Angular

Question

I'm using spotify api and I0m using the returning json this way on the component:

import { Component, OnInit } from '@angular/core';
import { SpotifyService } from "../../services/spotify.service";

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styles: []
})
export class HomeComponent implements OnInit {

  nuevasCanciones:any[] = [];

  constructor(private spotify:SpotifyService) { }

  ngOnInit() {
    this.spotify.getNewReleases()
    .subscribe( response =>{
      this.nuevasCanciones = response.albums.items;//here is the problem
      console.log(this.nuevasCanciones);
    });
  }

}

Despite it works I get the following error:

Property 'albums' does not exist on type 'Object'

And I have to comment the erro line to start the built in server

Of course that Object has no albums film but the json response object has it?How can I fix it?

this is the response I'm handling

{
  "albums": {
    "href": "https://api.spotify.com/v1/browse/new-releases?offset=0&limit=2",
    "items": [
      {
        "album_type": "album",
        "artists": [
          {
            "external_urls": {
              "spotify": "https://open.spotify.com/artist/50co4Is1HCEo8bhOyUWKpn"
            },
            "href": "https://api.spotify.com/v1/artists/50co4Is1HCEo8bhOyUWKpn",
            "id": "50co4Is1HCEo8bhOyUWKpn",
            "name": "Young Thug",
            "type": "artist",
            "uri": "spotify:artist:50co4Is1HCEo8bhOyUWKpn"
          }
        ],
        "available_markets": [
          "AD",
          "AE",
          "AR",
          "AT",
          "AU",
          "BE",
          "BG",
          "BH",
          "BO",
          "BR",
          "CA",
          "CH",
          "CL",
          "CO",
          "CR",
          "CY",
          "CZ",
          "DE",
          "DK",
          "DO",
          "DZ",
          "EC",
          "EE",
          "EG",
          "ES",
          "FI",
          "FR",
          "GB",
          "GR",
          "GT",
          "HK",
          "HN",
          "HU",
          "ID",
          "IE",
          "IL",
          "IS",
          "IT",
          "JO",
          "JP",
          "KW",
          "LB",
          "LI",
          "LT",
          "LU",
          "LV",
          "MA",
          "MC",
          "MT",
          "MX",
          "MY",
          "NI",
          "NL",
          "NO",
          "NZ",
          "OM",
          "PA",
          "PE",
          "PH",
          "PL",
          "PS",
          "PT",
          "PY",
          "QA",
          "RO",
          "SA",
          "SE",
          "SG",
          "SK",
          "SV",
          "TH",
          "TN",
          "TR",
          "TW",
          "US",
          "UY",
          "VN",
          "ZA"
        ],
        "external_urls": {
          "spotify": "https://open.spotify.com/album/1bnHPO4dKK7IjvgrtVBcQh"
        },
        "href": "https://api.spotify.com/v1/albums/1bnHPO4dKK7IjvgrtVBcQh",
        "id": "1bnHPO4dKK7IjvgrtVBcQh",
        "images": [
          {
            "height": 640,
            "url": "https://i.scdn.co/image/fea776f1be78312cfbbe1d65751c6518945208f2",
            "width": 640
          },
          {
            "height": 300,
            "url": "https://i.scdn.co/image/06c5475a23c13f3ab5d1472f7dd2220d50dbbfd8",
            "width": 300
          },
          {
            "height": 64,
            "url": "https://i.scdn.co/image/b72ec3de9f343b878d0fb31969b715d2d1b8b4a7",
            "width": 64
          }
        ],
        "name": "So Much Fun",
        "release_date": "2019-08-16",
        "release_date_precision": "day",
        "total_tracks": 19,
        "type": "album",
        "uri": "spotify:album:1bnHPO4dKK7IjvgrtVBcQh"
      },
      {
        "album_type": "album",
        "artists": [
          {
            "external_urls": {
              "spotify": "https://open.spotify.com/artist/6i392l38cR3uBPF0DbNs7S"
            },
            "href": "https://api.spotify.com/v1/artists/6i392l38cR3uBPF0DbNs7S",
            "id": "6i392l38cR3uBPF0DbNs7S",
            "name": "Quality Control",
            "type": "artist",
            "uri": "spotify:artist:6i392l38cR3uBPF0DbNs7S"
          }
        ],
        "available_markets": [
          "AD",
          "AE",
          "AR",
          "AT",
          "AU",
          "BE",
          "BG",
          "BH",
          "BO",
          "BR",
          "CA",
          "CH",
          "CL",
          "CO",
          "CR",
          "CY",
          "CZ",
          "DE",
          "DK",
          "DO",
          "DZ",
          "EC",
          "EE",
          "EG",
          "ES",
          "FI",
          "FR",
          "GB",
          "GR",
          "GT",
          "HK",
          "HN",
          "HU",
          "ID",
          "IE",
          "IL",
          "IN",
          "IS",
          "IT",
          "JO",
          "JP",
          "KW",
          "LB",
          "LI",
          "LT",
          "LU",
          "LV",
          "MA",
          "MC",
          "MT",
          "MX",
          "MY",
          "NI",
          "NL",
          "NO",
          "NZ",
          "OM",
          "PA",
          "PE",
          "PH",
          "PL",
          "PS",
          "PT",
          "PY",
          "QA",
          "RO",
          "SA",
          "SE",
          "SG",
          "SK",
          "SV",
          "TH",
          "TN",
          "TR",
          "TW",
          "US",
          "UY",
          "VN",
          "ZA"
        ],
        "external_urls": {
          "spotify": "https://open.spotify.com/album/59zpaLOByFkJhc9D5Xqna9"
        },
        "href": "https://api.spotify.com/v1/albums/59zpaLOByFkJhc9D5Xqna9",
        "id": "59zpaLOByFkJhc9D5Xqna9",
        "images": [
          {
            "height": 640,
            "url": "https://i.scdn.co/image/e5c720385207ff40d73432f45883f26f36653427",
            "width": 640
          },
          {
            "height": 300,
            "url": "https://i.scdn.co/image/923b22c361911cd3a967753c164a39331ac31c02",
            "width": 300
          },
          {
            "height": 64,
            "url": "https://i.scdn.co/image/4a606c762540dada9dafe74de6d88960209d34d6",
            "width": 64
          }
        ],
        "name": "Quality Control: Control The Streets Volume 2",
        "release_date": "2019-08-16",
        "release_date_precision": "day",
        "total_tracks": 36,
        "type": "album",
        "uri": "spotify:album:59zpaLOByFkJhc9D5Xqna9"
      }
    ],
    "limit": 2,
    "next": "https://api.spotify.com/v1/browse/new-releases?offset=2&limit=2",
    "offset": 0,
    "previous": null,
    "total": 100
  }
}

The response its a big json object which have an album field,Its working withou problems but the editor launch the error — afs_2000, Aug 18 '19 at 11:06
try this `this.nuevasCanciones = (response as any).albums.items` instead of `this.nuevasCanciones = response.albums.items;//here is the problem` @afs_2000 — alt255, Aug 18 '19 at 11:08
@alt255 `this.nuevasCanciones = (response as any).albums.items`works perfect — afs_2000, Aug 18 '19 at 11:17

score 1 · Answer 1 · answered Aug 18 '19 at 11:24

Property 'albums' does not exist on type 'Object'

This error means that you are trying to access property on an Object which may not contains that property basically typescript is preventing you from accessing a property because it is not sure if whether that proprty exists or not.

The correct way would be to create an interface for albums and list the properties which you want to access in that interface and use that interface.

export interface Container {
    albums: Albums;
}

export interface Albums {
    href:     string;
    items:    Item[];
    limit:    number;
    next:     string;
    offset:   number;
    previous: null;
    total:    number;
}

export interface Item {
    album_type:             string;
    artists:                Artist[];
    available_markets:      string[];
    external_urls:          ExternalUrls;
    href:                   string;
    id:                     string;
    images:                 Image[];
    name:                   string;
    release_date:           Date;
    release_date_precision: string;
    total_tracks:           number;
    type:                   string;
    uri:                    string;
}

export interface Artist {
    external_urls: ExternalUrls;
    href:          string;
    id:            string;
    name:          string;
    type:          string;
    uri:           string;
}

export interface ExternalUrls {
    spotify: string;
}

export interface Image {
    height: number;
    url:    string;
    width:  number;
}

ngOnInit() {
    this.spotify.getNewReleases()
    .subscribe( (response: Container) =>{
      this.nuevasCanciones = response.albums.items;//here is the problem
      console.log(this.nuevasCanciones);
    });
  }

The quick and dirty way is to case the object as any which will opt it out of typescript type checking

this.nuevasCanciones = (response as any).albums.items

Property 'albums' does not exist on type 'Object' on Angular

1 Answers1

Linked