Can't access children of Json Object from successful api call result

Ionic Framework ionic-v3
1

I’m creating a detail page where an injected simple http provider fetches a remote json file and assigns the data to a property postDetailData of PageClass. I’m able to console-log the data at PageClass level and its type successfully.

Remote Json File Contents:

{
      "postImage" : "build/assets/feed-img-1.jpg",
      "postTitle" : "Top tips for programming",
      "postCategory" : "Events",
      "postContent" : "Lorem ipsum dolor sit amet.",
      "postCommentCount" : 353,
      "postNumberOfShares" :94,
      "postNumberOfLikes" : 42
   }

Class Function

public loadFeed() {
    let loader = this.createLoader();

    loader.present();
    this.jsonApi.load("/api/single-post.json")
    .then(data => {
      if (data.ErrorStatus) {
        alert("Failure!");
        loader.dismiss();
      }
      else
      {
        this.postDetailData = data;
        console.log(this.postDetailData); //using typeof confirms as object
        loader.dismiss();
      }
    })
  }

However, using dot notation of this property in my template gives an undefined error message:

image

Even though postDetailData is accessible in template (using json pipe), I cannot access the children.

I’ve searched online for hours on end and still can’t figure out why. Any help would be awesome.

2

Solved. Turns out I needed to explicitly define the class property’s object structure to match the json rather than relying implictly on the remote JSON’s structure itself:

So in PageClass:

singlePostData : Object = {
    postImage: <string> null,
    postTitle: <string> null,
    postCategory : <string> null,
    postCommentCount : <number> null,
    postNumberOfShares: <number> null,
    postNumberOfLikes: <number> null
  }

That way the properties are accessible for use in template when assigned the remote json data.