How to fetch data from a json file that is enclosed in {}

here is the api code


	"d": {
		"category": "Local",
		"sites": [{
			"label": "Kenya Star",
			"url": "http:\/\/\/",
			"logtime": 1502820120,
			"articles": [{
				"uank": "faCZ",
				"text": "Kenya seeks to shut down two rights bodies in wake of election",
				"url": "news\/254359560\/kenya-seeks-to-shut-down-two-rights-bodies-in-wake-of-election",
				"img_url": "http:\/\/\/n241502818800.jpg",
				"img_text": "",
				"keywords": {
					"wake": "wake",
					"elect": "election"
				"logtime": 1502820120


That looks like an ordinary JSON object to me, not “enclosed” in anything.

ooh ok then how do i fetch data from it

The normal way: objectname.d.sites.articles.keywords.elect for example

Here is my HTML code:

    <ion-item *ngFor="let post of postList">

Here is home.ts:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { DetailPage } from '../detail/detail';
import { RemoteServiceProvider } from '../../providers/remote-service/remote-service';

  selector: 'page-home',
  templateUrl: 'home.html',

export class HomePage {
  postList: any = [];

  tabBarElement: any;
  splash = true;

  constructor(public navCtrl: NavController, private remoteServiceprovider: RemoteServiceProvider) {

    this.postList = this.getPosts();

Here is the remote-service.ts:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

  Generated class for the RemoteServiceProvider provider.

  for more info on providers and Angular DI.
export class RemoteServiceProvider {

  getPosts() {
    return this.http.get("")
    .map(res => res.json());

  constructor(public http: Http) {
    console.log('Hello RemoteServiceProvider');


I think i have it the right way.

home.ts doesn’t have a getPosts().

Also I can’t check what returns as I get an unauthorized error, but it doesn’t seem to be a list/array of things (referring to your first post, which is just 1 object).

1 Like

I think you might get the compiler to help guide you towards solutions with problems like this if you start aggressively declaring property types and return values of methods, including never using any,

try using a promise

getPosts() {
    return new Promise( (resolve, reject) => {
      .map(res => res.json())
      .subscribe(res => resolve(res));


.then( posts => this.postList = posts);

The previous post promotes the explicit promise construction antipattern.

Have you realised yet that your json object is not valid in the first place?


Haha, good point! Unclosed array…

1 Like

it was my mistake when i was editing the file

So have you solved the issue or what ?

yap fixed it :sweat_smile: Thanx for all those who helped although i had to find my own way to do it.

That’s good!

You should post what you did so that others can cross check it for you.

1 Like