HTTP GET and JSON

Ionic Framework ionic-v3
1

Please Help
I get error massage post.data.url:1 GET http://localhost:8100/post.data.url 404 (Not Found) in when I try to call my Json.

Below is my Json Array

{“success”:true, “data”:[{“title”:“sassan”,“duration”:“5 day”,“url”:“http://mywebsite/uploads/test/phoneapp/uploads/cdv_photo_001.jpg"},{“title”:“Ahmad”,“duration”:“20day”,“url”:“http://mywebsite/uploads/cdv_photo_002.jpg”},{“title”:“Sardin”,“duration”:“49”,“url”:“http:/mywebsite/uploads/test/phoneapp/uploads/cdv_photo_003.jpg”},{“title”:“Sas”,“duration”:“59”,“url”:“http://mywebsite/uploads/test/phoneapp/uploads/cdv_photo_004.jpg”},{“title”:“Rosst”,“duration”:“50”,“url”:"http://mywebsite/uploads/test/phoneapp/uploads/newimage_647999118”}]}

and my home.ts

import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import { Http } from ‘@angular/http’;
import ‘rxjs/add/operator/map’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {

posts: any;

constructor(public navCtrl: NavController, public http: Http) {

this.http.get('http://www.mywebsite.json').map(res => res.json()).subscribe(data => {
    this.posts = data;
     
});

}
}

my home.html

Home Page



<ion-item *ngFor=“let post of posts”>



Please Help

2

What`s really the error?

3

Thanks for the help

I get (404 Not Found) potst.data.url
post.data.url:1 GET http://localhost:8100/post.data.url 404 (Not Found)

my home html is

Home Page
4

If your get is local put correctly path, else external same case put correctly address.

5

my get is not local is to my website with correct address http://bidsmove.com/test/phoneapp/feed.php and the call in my home html is <ion-item *ngFor=“let post of posts”>

6

home.html<ion-item *ngFor=“let post of posts”><img src=“post.data.url” / >

7

<ion-item *ngFor=“let post of posts”><img src=“{{ post.data.url }}” / >

8

Now I get error NgFor only support binding to lterables such as array

9

Use:

posts : any = [];

10

Don’t do it this way at all. Use the Angular HttpClient, and follow the official code examples in the Angular documentation.

11

still get same error NgFor only support binding to lterables such as array

12

Then biknd ngFor to an Iterable, such as an array. I know error messages are hard to read sometimes, but this one is literally telling you exactly what to do.

13

What is it that I should do, because I do have set of array in my www.php link, so why is not reading it !. Is there problem with my Json document ?

14

Thanks every one managed to solve it in my home.html edited to <img"post.url"/> and in home.ts edited to posts= data.data; this what was causing the problems.

15

Configuration module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { HttpModule } from '@angular/http';
...
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],
...

Follow code solution:

this.http.get('http://bidsmove.com/test/phoneapp/feed.php')
  .map(res => res.json())
  .subscribe(data =>
  {
    
    this.posts = data["data"]; 
  });

<ion-item *ngFor="let post of posts">
      <img src={{post.url}} > 
</ion-item>

Thanks! :+1:

1 Like
16

Thank you so much for the great help.

1 Like
17

my json is similar to your json but this codes is not working on me please help me