HTTP GET and JSON

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

What`s really the error?

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

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

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”>

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

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

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

Use:

posts : any = [];

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

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

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.

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 ?

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.

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

Thank you so much for the great help.

1 Like

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