How to step in json structure

Ionic Framework ionic-v3
1

Hi, I have this:
providers

export class Proma {
	promaUrl = 'http://www.promareality.cz';

      constructor(public http: Http) {}

      prmLoad(): Observable<Item[]> {
       return this.http.get(`${this.promaUrl}/api/get_posts/?cat=4&posts_per_page=5`)
         .map(res => <Item[]>res.json());
      }
    }

models

export interface Item {
  title: string;
  status: string;
  posts:string
}

page

proma.prmLoad().subscribe(items => {
      this.items = items;
      loading.dismiss();
      }, err => {
      	loading.dismiss();
      	this.alertData();
    }
    );

here is json: http://promareality.cz/api/get_posts/?cat=4&posts_per_page=5

How do you please do variable items, receive posts array from json?

And how do I get there post count from json? Thank you.

3

i think:

<Item[]>res.json()

should be

<Item[]>res.json().posts

your repsonse formatted:

{
  "status": "ok",
  "count": 5,
  "count_total": 119,
  "pages": 24,
  "posts": [
    {
      "id": 1947,
      "type": "post",
      "slug": "centralni-elektricke-vytapeni",
      "url": "http://promareality.cz/centralni-elektricke-vytapeni/",
      "status": "publish",
      "title": "Centrální elektrické vytápění",
      "title_plain": "Centrální elektrické vytápění",
      "content": "<p>V objektu nebo domě je elektrický kotel, který ohřívá vodu, která je po sléze rozváděna topnou soustavou do radiátorů.</p>\n",
      "excerpt": "<p>V objektu nebo domě je elektrický kotel, který ohřívá vodu, která je po sléze rozváděna topnou soustavou do radiátorů.</p>\n",
      "date": "2012-03-25 19:36:21",
      "modified": "2014-11-18 17:46:58",
      "categories": [
        {
          "id": 4,
          "slug": "slovnicek-pojmu",
          "title": "Slovníček pojmů",
          "description": "",
          "parent": 0,
          "post_count": 119
        }
      ],
      "tags": [],
      "author": {
        "id": 1,
        "slug": "martin-prochazka",
        "name": "Bc. Martin Procházka",
        "first_name": "Bc. Martin",
        "last_name": "Procházka",
        "nickname": "Bc. Martin Procházka",
        "url": "",
        "description": ""
      },
      "comments": [],
      "attachments": [],
      "comment_count": 0,
      "comment_status": "open",
      "custom_fields": {
        "views": [
          "233"
        ],
        "bot_views": [
          "607"
        ]
      }
    },
    {
      "id": 1944,
      "type": "post",
      "slug": "centralni-plynove-vytapeni",
      "url": "http://promareality.cz/centralni-plynove-vytapeni/",
      "status": "publish",
      "title": "Centrální plynové vytápění",
      "title_plain": "Centrální plynové vytápění",
      "content": "<p>V objektu nebo domě je plynový kotel, který ohřívá vodu, která je po sléze rozváděna topnou soustavou do radiátorů.</p>\n",
      "excerpt": "<p>V objektu nebo domě je plynový kotel, který ohřívá vodu, která je po sléze rozváděna topnou soustavou do radiátorů.</p>\n",
      "date": "2012-03-25 19:35:58",
      "modified": "2014-11-18 17:47:12",
      "categories": [
        {
          "id": 4,
          "slug": "slovnicek-pojmu",
          "title": "Slovníček pojmů",
          "description": "",
          "parent": 0,
          "post_count": 119
        }
      ],
      "tags": [],
      "author": {
        "id": 1,
        "slug": "martin-prochazka",
        "name": "Bc. Martin Procházka",
        "first_name": "Bc. Martin",
        "last_name": "Procházka",
        "nickname": "Bc. Martin Procházka",
        "url": "",
        "description": ""
      },
      "comments": [],
      "attachments": [],
      "comment_count": 0,
      "comment_status": "open",
      "custom_fields": {
        "bot_views": [
          "528"
        ],
        "views": [
          "78"
        ]
      }
    },
    {
      "id": 1942,
      "type": "post",
      "slug": "lokalni-plynove-vytapeni",
      "url": "http://promareality.cz/lokalni-plynove-vytapeni/",
      "status": "publish",
      "title": "Lokální plynové vytápění",
      "title_plain": "Lokální plynové vytápění",
      "content": "<p>Objekt je vytápěn plynovými přímotopy, tj. gamaty.</p>\n",
      "excerpt": "<p>Objekt je vytápěn plynovými přímotopy, tj. gamaty.</p>\n",
      "date": "2012-03-25 19:34:53",
      "modified": "2014-11-18 17:47:24",
      "categories": [
        {
          "id": 4,
          "slug": "slovnicek-pojmu",
          "title": "Slovníček pojmů",
          "description": "",
          "parent": 0,
          "post_count": 119
        }
      ],
      "tags": [],
      "author": {
        "id": 1,
        "slug": "martin-prochazka",
        "name": "Bc. Martin Procházka",
        "first_name": "Bc. Martin",
        "last_name": "Procházka",
        "nickname": "Bc. Martin Procházka",
        "url": "",
        "description": ""
      },
      "comments": [],
      "attachments": [],
      "comment_count": 0,
      "comment_status": "open",
      "custom_fields": {
        "views": [
          "73"
        ],
        "bot_views": [
          "448"
        ]
      }
    },
    {
      "id": 1939,
      "type": "post",
      "slug": "lokalni-elektricke-vytapeni",
      "url": "http://promareality.cz/lokalni-elektricke-vytapeni/",
      "status": "publish",
      "title": "Lokální elektrické vytápění",
      "title_plain": "Lokální elektrické vytápění",
      "content": "<p>Objekt je vytápěn elektrickými přímotopy.</p>\n",
      "excerpt": "<p>Objekt je vytápěn elektrickými přímotopy.</p>\n",
      "date": "2012-03-25 19:34:14",
      "modified": "2014-11-18 17:47:33",
      "categories": [
        {
          "id": 4,
          "slug": "slovnicek-pojmu",
          "title": "Slovníček pojmů",
          "description": "",
          "parent": 0,
          "post_count": 119
        }
      ],
      "tags": [],
      "author": {
        "id": 1,
        "slug": "martin-prochazka",
        "name": "Bc. Martin Procházka",
        "first_name": "Bc. Martin",
        "last_name": "Procházka",
        "nickname": "Bc. Martin Procházka",
        "url": "",
        "description": ""
      },
      "comments": [],
      "attachments": [],
      "comment_count": 0,
      "comment_status": "open",
      "custom_fields": {
        "bot_views": [
          "439"
        ],
        "views": [
          "78"
        ]
      }
    },
    {
      "id": 1936,
      "type": "post",
      "slug": "dalkove-vytapeni",
      "url": "http://promareality.cz/dalkove-vytapeni/",
      "status": "publish",
      "title": "Dálkové vytápění",
      "title_plain": "Dálkové vytápění",
      "content": "<p>Teplá voda do radiátoru je přiváděna dálkově, přímo z teplárny</p>\n",
      "excerpt": "<p>Teplá voda do radiátoru je přiváděna dálkově, přímo z teplárny</p>\n",
      "date": "2012-03-25 19:31:57",
      "modified": "2012-03-25 19:31:57",
      "categories": [
        {
          "id": 4,
          "slug": "slovnicek-pojmu",
          "title": "Slovníček pojmů",
          "description": "",
          "parent": 0,
          "post_count": 119
        }
      ],
      "tags": [],
      "author": {
        "id": 1,
        "slug": "martin-prochazka",
        "name": "Bc. Martin Procházka",
        "first_name": "Bc. Martin",
        "last_name": "Procházka",
        "nickname": "Bc. Martin Procházka",
        "url": "",
        "description": ""
      },
      "comments": [],
      "attachments": [],
      "comment_count": 0,
      "comment_status": "open",
      "custom_fields": {
        "views": [
          "203"
        ],
        "bot_views": [
          "482"
        ]
      }
    }
  ],
  "query": {
    "ignore_sticky_posts": true,
    "cat": "4",
    "posts_per_page": "5"
  }
}

the whole thins is on res.json() and each key can be reached with .KEY

1 Like
4

@bengtler It will be binding with interface automaticly?

5

Fantastic… and how to get this value?

"status": "ok",
  "count": 5,
  "count_total": 119,
  "pages": 24,
6

the res.json is typed with the interface. The interface is only for type safety for the typescript compiler.

@matata
like posts… .status, .pages, .count_total

If you do not know this… read basic or beginner javascript tutorials.

2 Likes