Angular - Cannot read properties of undefined when subscribe to function

Issue

on my angular app i have a error on browser debug:

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'fields')

Why I cannot access to fields property in this line?

this.pictureUrl = this.currentUser.version.fields.field[0].fieldValue.path;

this is my user model

export interface EzUser {
  mediaType: string;
  href: string;
  id: number;
  remoteID: string;
  contentType: ContentType;
  name: string;
  versions: ContentType;
  section: ContentType;
  mainLocation: ContentType;
  locations: ContentType;
  groups: ContentType;
  owner: ContentType;
  publishDate: Date;
  lastModificationDate: Date;
  mainLanguageCode: string;
  alwaysAvailable: boolean;
  version: Version;
  login: string;
  email: string;
  enabled: boolean;
  userGroups: ContentType;
  roles: ContentType;
}

export interface ContentType {
  mediaType: string;
  href: string;
}

export interface Version {
  mediaType: string;
  href: string;
  versionInfo: VersionInfo;
  fields: Fields;
  relations: Relations;
  thumbnail: Thumbnail;
}

export interface Fields {
  field: Field[];
}

export interface Field {
  id: number;
  fieldDefinitionIdentifier: string;
  languageCode: string;
  fieldTypeIdentifier: string;
  fieldValue: FieldValueClass;
}

export interface FieldValueClass {
  hasStoredLogin?: boolean;
  contentID?: number;
  login?: string;
  email?: string;
  passwordUpdatedAt?: number;
  enabled?: boolean;
  maxLogin?: number;
  plainPassword?: null;
  id?: string;
  path?: string;
  alternativeText?: string;
  fileName?: string;
  fileSize?: number;
  imageID?: string;
  uri?: string;
  inputURI?: null;
  width?: string;
  height?: string;
  additionalData?: any[];
  variations?: Variations;
}

export interface Variations {
  ezplatformAdminUIProfilePictureUserMenu: string;
  large: string;
  medium: string;
  reference: string;
  small: string;
  tiny: Href;
}

export interface Href {
  href: string;
}

export interface Relations {
  mediaType: string;
  href: string;
  relation: any[];
}

export interface Thumbnail {
  mediaType: string;
  resource: string;
  width: null;
  height: null;
  mimeType: string;
}

export interface VersionInfo {
  id: number;
  versionNo: number;
  status: string;
  modificationDate: Date;
  creator: ContentType;
  creationDate: Date;
  initialLanguageCode: string;
  languageCodes: string;
  versionTranslationInfo: VersionTranslationInfo;
  names: Names;
  content: ContentType;
}

export interface Names {
  value: Value[];
}

export interface Value {
  languageCode: string;
  text: string;
}

export interface VersionTranslationInfo {
  mediaType: string;
  language: Language[];
}

export interface Language {
  languageCode: string;
}

this is my data

{
    "_media-type": "application/vnd.ez.api.User+json",
    "_href": "/api/ezp/v2/user/users/14",
    "_id": 14,
    "_remoteId": "1bb4fe25487f05527efa8bfd394cecc7",
    "ContentType": {
        "_media-type": "application/vnd.ez.api.ContentType+json",
        "_href": "/api/ezp/v2/content/types/4"
    },
    "name": "Administrator User",
    "Versions": {
        "_media-type": "application/vnd.ez.api.VersionList+json",
        "_href": "/api/ezp/v2/content/objects/14/versions"
    },
    "Section": {
        "_media-type": "application/vnd.ez.api.Section+json",
        "_href": "/api/ezp/v2/content/sections/2"
    },
    "MainLocation": {
        "_media-type": "application/vnd.ez.api.Location+json",
        "_href": "/api/ezp/v2/content/locations/1/5/13/15"
    },
    "Locations": {
        "_media-type": "application/vnd.ez.api.LocationList+json",
        "_href": "/api/ezp/v2/content/objects/14/locations"
    },
    "Groups": {
        "_media-type": "application/vnd.ez.api.UserGroupRefList+json",
        "_href": "/api/ezp/v2/user/users/14/groups"
    },
    "Owner": {
        "_media-type": "application/vnd.ez.api.User+json",
        "_href": "/api/ezp/v2/user/users/14"
    },
    "publishDate": "2002-10-06T16:13:50+00:00",
    "lastModificationDate": "2021-12-21T17:23:49+00:00",
    "mainLanguageCode": "eng-GB",
    "alwaysAvailable": true,
    "Version": {
        "_media-type": "application/vnd.ez.api.Version+json",
        "_href": "/api/ezp/v2/content/objects/14/versions/5",
        "VersionInfo": {
            "id": 517,
            "versionNo": 5,
            "status": "PUBLISHED",
            "modificationDate": "2021-12-21T17:23:49+00:00",
            "Creator": {
                "_media-type": "application/vnd.ez.api.User+json",
                "_href": "/api/ezp/v2/user/users/14"
            },
            "creationDate": "2021-12-21T17:23:48+00:00",
            "initialLanguageCode": "eng-GB",
            "languageCodes": "eng-GB",
            "VersionTranslationInfo": {
                "_media-type": "application/vnd.ez.api.VersionTranslationInfo+json",
                "Language": [{
                    "languageCode": "eng-GB"
                }]
            },
            "names": {
                "value": [{
                    "_languageCode": "eng-GB",
                    "#text": "Administrator User"
                }]
            },
            "Content": {
                "_media-type": "application/vnd.ez.api.ContentInfo+json",
                "_href": "/api/ezp/v2/content/objects/14"
            }
        },
        "Fields": {
            "field": [{
                "id": 28,
                "fieldDefinitionIdentifier": "first_name",
                "languageCode": "eng-GB",
                "fieldTypeIdentifier": "ezstring",
                "fieldValue": "Administrator"
            }, {
                "id": 29,
                "fieldDefinitionIdentifier": "last_name",
                "languageCode": "eng-GB",
                "fieldTypeIdentifier": "ezstring",
                "fieldValue": "User"
            }, {
                "id": 30,
                "fieldDefinitionIdentifier": "user_account",
                "languageCode": "eng-GB",
                "fieldTypeIdentifier": "ezuser",
                "fieldValue": {
                    "hasStoredLogin": true,
                    "contentId": 14,
                    "login": "admin",
                    "email": "daniele@abd.it",
                    "passwordUpdatedAt": 1640107428,
                    "enabled": true,
                    "maxLogin": 10,
                    "plainPassword": null
                }
            }, {
                "id": 178,
                "fieldDefinitionIdentifier": "signature",
                "languageCode": "eng-GB",
                "fieldTypeIdentifier": "eztext",
                "fieldValue": "Mega boss"
            }, {
                "id": 180,
                "fieldDefinitionIdentifier": "image",
                "languageCode": "eng-GB",
                "fieldTypeIdentifier": "ezimage",
                "fieldValue": {
                    "id": "0/8/1/0/180-5-eng-GB/avatar_19.jpg",
                    "path": "/0/8/1/0/180-5-eng-GB/avatar_19.jpg",
                    "alternativeText": "",
                    "fileName": "avatar_19.jpg",
                    "fileSize": 50787,
                    "imageId": "14-180-5",
                    "uri": "/var/site/storage/images/0/8/1/0/180-5-eng-GB/avatar_19.jpg",
                    "inputUri": null,
                    "width": "480",
                    "height": "580",
                    "additionalData": [],
                    "variations": {
                        "ezplatform_admin_ui_profile_picture_user_menu": {
                            "href": "/api/ezp/v2/content/binary/images/14-180-5/variations/ezplatform_admin_ui_profile_picture_user_menu"
                        },
                        "large": {
                            "href": "/api/ezp/v2/content/binary/images/14-180-5/variations/large"
                        },
                        "medium": {
                            "href": "/api/ezp/v2/content/binary/images/14-180-5/variations/medium"
                        },
                        "reference": {
                            "href": "/api/ezp/v2/content/binary/images/14-180-5/variations/reference"
                        },
                        "small": {
                            "href": "/api/ezp/v2/content/binary/images/14-180-5/variations/small"
                        },
                        "tiny": {
                            "href": "/api/ezp/v2/content/binary/images/14-180-5/variations/tiny"
                        }
                    }
                }
            }]
        },
        "Relations": {
            "_media-type": "application/vnd.ez.api.RelationList+json",
            "_href": "/api/ezp/v2/content/objects/14/versions/5/relations",
            "Relation": []
        },
        "Thumbnail": {
            "_media-type": "application/vnd.ez.api.Thumbnail+json",
            "resource": "/bundles/ezplatformadminui/img/ez-icons.svg#user",
            "width": null,
            "height": null,
            "mimeType": "image/svg+xml"
        }
    },
    "login": "admin",
    "email": "daniele@abd.it",
    "enabled": true,
    "UserGroups": {
        "_media-type": "application/vnd.ez.api.UserGroupList+json",
        "_href": "/api/ezp/v2/user/users/14/groups"
    },
    "Roles": {
        "_media-type": "application/vnd.ez.api.RoleAssignmentList+json",
        "_href": "/api/ezp/v2/user/users/14/roles"
    }
}

my component

import { Component, OnInit } from '@angular/core';
import { User } from 'src/app/_models';
import { EzUser } from 'src/app/_models/ezuser';
import { AuthenticationService } from 'src/app/_services';

import { UserblockService } from './userblock.service';

@Component({
    selector: 'app-userblock',
    templateUrl: './userblock.component.html',
    styleUrls: ['./userblock.component.scss']
})
export class UserblockComponent implements OnInit {

    currentUser: EzUser;
    error = '';
    pictureUrl: string;
    user: User = {
      id: 1,
      nome: 'ippo',
      cognome: 'adad',
      tipo: {id: 1, name: 'dsad'}
    };

    constructor(public userblockService: UserblockService, private authenticationService: AuthenticationService) {

        this.authenticationService.currentUser.subscribe(x => this.currentUser = x);
        this.pictureUrl = this.currentUser.version.fields.field[0].fieldValue.path;
    }

    ngOnInit() {}

    userBlockIsVisible(): boolean{
        return this.userblockService.getVisibility();
    }
}

Solution

You are getting an error:

Cannot read properties of undefined (reading 'fields')

in statement:

this.pictureUrl = this.currentUser.version.fields.field[0].fieldValue.path;

which implies that this.currentUser.version is undefined

Looking at the json data shared in the question, there is no version property, indeed its Version (Uppercase V) and hence this.currentUser.version would be undefined. As per json data shared in the question, the statement should be:

this.pictureUrl = this.currentUser.Version.Fields.field[0].fieldValue.path;

Also in the json data, this.currentUser.Version.Fields.field[0].fieldValue value is a string as opposed to object, which might again result in an error when trying to read fieldValue.path.

"fieldValue": "Administrator"

Ensuring the property names and types are in sync between model definition and json data, should resolve the issue.

Answered By - Siddhant