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

Ionic Framework ionic-v3
1

here is the api code

{

	"d": {
		"category": "Local",
		"sites": [{
			"label": "Kenya Star",
			"url": "http:\/\/www.kenyastar.com\/",
			"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:\/\/cdn.bignewsnetwork.com\/n241502818800.jpg",
				"img_text": "",
				"keywords": {
					"wake": "wake",
					"elect": "election"
				},
				"logtime": 1502820120
			 }
       }

}
2

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

3

ooh ok then how do i fetch data from it

4

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

5

Here is my HTML code:

<ion-list>
    <ion-item *ngFor="let post of postList">
      <p>{{post.d.category}}</p>
    </ion-item>
  </ion-list>

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';

@Component({
  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.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular DI.
*/
@Injectable()
export class RemoteServiceProvider {

  getPosts() {
    return this.http.get("http://soko360.com/io/v1?opt=news&category=Local&format=json&r=0.18743093903875763")
    .map(res => res.json());
  }

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

}

I think i have it the right way.

6

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

Also I can’t check what https://soko360.com/io/v1?opt=news&category=Local&format=json&r=0.18743093903875763 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
7

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,

8

try using a promise

getPosts() {
    return new Promise( (resolve, reject) => {
      this.http.get("http://soko360.com/io/v1?opt=news&category=Local&format=json&r=0.18743093903875763")
      .map(res => res.json())
      .subscribe(res => resolve(res));
    })
  }

and

this.RemoteServiceProvider.getPosts()
.then( posts => this.postList = posts);
9

The previous post promotes the explicit promise construction antipattern.

10

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

2 Likes
11

Haha, good point! Unclosed array…

1 Like
12

it was my mistake when i was editing the file

13

So have you solved the issue or what ?

14

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

15

That’s good!

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

1 Like