Angular2: receiving data from php file

Question

So I'm trying to get JSON data from php file but the console shows me this error:

EXCEPTION: Unexpected token < in JSON

I just sent a simple json array via php like this:

<?php
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Headers: X-Requested-With');
header('Content-Type: application/json');

$res = [
    array(
        'title' => 'First task',
        'description' => 'skdfjsdfsdf',
        'done' => false,
    ),
    array(
        'title' => 'Second task',
        'description' => 'skdfjsdfsdf',
        'done' => false,
    ),
    array(
        'title' => 'Third task',
        'description' => 'skdfjsdfsdf',
        'done' => false,
    )
];

echo json_encode(array('tasks' => $res));

This is the location of my php file:

And finaly this is my service class:

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

@Injectable()
export class TasksDataService {

  constructor(private http: Http) {}

  getTasks(){
     return this.http.get('http://localhost:4200/src/database.php')
     .map(res => {
         console.log(res.json());//--I get the error in this line
         var result = res.json().tasks;
         console.log(result);
         return result;
     });
  }

}

I really googled a lot for this problem and tried a lot of solutions but still getting the same error !

You have to run apache, nginx or something else to serve php. — Igor Janković
– Igor Janković, Commented Mar 6, 2017 at 9:57
I also tried this command "php -S localhost:4200" but angular doesn't work anymore — SlimenTN
– SlimenTN, Commented Mar 6, 2017 at 10:01
That is true. But this is just what I have used during development, because that does not really matter in my opinion, since it's just development. When getting ready to deploy you just build your Angular 2 project and throw the content of the dist folder on your apache server, and thus no longer have the issue :) — AVJT82
– AVJT82, Commented Mar 6, 2017 at 10:33

AVJT82 · Accepted Answer · 2017-03-06 14:58:09Z

1

Your WAMP is hosted under a different domain, so it won't work if you try and add the PHP files in your Angular 2 project.

The fast and easy solution is...

You would actually keep the PHP files under that domain (localhost in your case) and make http-requests to those files like: http://localhost/file.php. This is of course a cross-domain request, so you need to add the appropriate headers in the PHP-file. From my experience the following has been working:

header('Access-Control-Allow-Origin: *');

Of course cross-domain requests are not optimal here, but since this issue is present in development mode, I have not found it to be a problem.

One additional problem that might occur here as well, is that you need to enable CORS in your browser. For that there is a great extension for chrome here.

answered Mar 6, 2017 at 14:58

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Babar Hussain · Accepted Answer · 2017-03-06 10:00:36Z

0

You cant serve php directly you need apache server to execute (use xampp) and the src folder is not a public folder you can store mock data to assets folder.

answered Mar 6, 2017 at 10:00

Babar Hussain

2,9051 gold badge19 silver badges14 bronze badges

2 Comments

SlimenTN Over a year ago

I have wamp running. I also tried "php -S localhost:4200" but angular is no longer running!

Babar Hussain Over a year ago

for wamp or xampp you need to put php files to htdocs folder isn't it ?

Collectives™ on Stack Overflow

Angular2: receiving data from php file

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related