How to connect Angular 2 and a php backend (mysql)

Question

So I understand and know how ajax works, as I've used it before. But how do I retrieve JSON data from a php script?

I've tried to echo the json_encode results (which works) but I get an EXCEPTION: Uncaught (in promise): Unexpected token < in JSON at position 0 error in Chrome.

Erroring line:

search(): any 
{   
     this.http.get('app/php/search.php').toPromise()
        .then(response => this.data = response.json())
        .catch(this.handleError);
}

Php file (for test purposes):

$json = array (
    "age" => 5,
    "bob" => "Lee",
);  
echo json_encode($json);

would need to see the code that produces the error to have any chance at helping you. — user557846
– user557846, Commented Dec 7, 2016 at 2:39
i think your php file must be returning other output. you should be able to check with the firebug tools (f12) — user557846
– user557846, Commented Dec 7, 2016 at 3:01

ammy · Accepted Answer · 2016-12-07 05:39:13Z

5

why don't you use observables.. i have used php as a backend in one my dummy project. here is its code.

ngOnInit() { 

    let body=Path+'single.php'+'?id=' + this.productid;
    console.log(body);
    this._postservice.postregister(body)
                .subscribe( data => {
                            this.outputs=data;
//                            console.log(this.outputs);

                   }, 
                error => console.log("Error HTTP Post Service"),
                () => console.log("Job Done Post !") );  
  }

php code

$faillogin=array("error"=>1,"data"=>"no data found");
$successreturn[]=array(
        "productid"=>"any",
       "productname"=>"any",
      "productprice"=>"any",
    "productdescription"=>"any",
    "productprimaryimg"=>"any",
    "otherimage"=>"any",
    "rating"=>"any");
// Create connection  id,name,price,description,primary_image,other_image,rating

    $productid = $_GET["id"];
    $sql="SELECT * FROM product_list where id='$productid'";
    $result = mysqli_query($conn,$sql);
    $count = mysqli_num_rows($result);
    $value=0;
    while($line = mysqli_fetch_assoc($result))
       { 

         $successreturn[$value]['productid']=$line['id'];
         $successreturn[$value]['productname']=$line['name'];
         $successreturn[$value]['productprice']=$line['price'];
         $successreturn[$value]['productdescription']=$line['description'];
         $successreturn[$value]['productprimaryimg']=$line['primary_image'];
         $successreturn[$value]['otherimage']=$line['other_image'];
         $successreturn[$value]['rating']=$line['rating'];
         $value++;
        }
     echo json_encode($successreturn);    

 mysqli_close($conn);

answered Dec 7, 2016 at 5:39

ammy

3264 silver badges4 bronze badges

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

2 Comments

A. L Over a year ago

For whatever reason, the problem was that when I was in the 10.x.x.x:port website, it did not load the files properly, but when I went to my www... it was working fine. Thanks for the info anyways.

ammy Over a year ago

Don't forget to mark the answer as correct, for people who have the same problem in the future! :)

danday74 · Accepted Answer · 2016-12-07 05:30:49Z

1

RE YOUR CODE

this.http.get('app/php/search.php').toPromise()
    .then((response) => {
      console.log(response); // does it look right?
      // is it in string format or json format?
      // if its in string format then can you JSON.parse(response)? if not you have a problem
      // is this line where your error is?
      this.data = response.json()
    })
    .catch(this.handleError);

RE YOU SERVER SETUP

i dont know a great deal about php but basically you want php to serve up an endpoint such as http://myphpserver/search.php

when you visit this page in the browser you should see xml.

would prob work better if the page extension was .xml instead of .php if thats possible.

Make sure your server is returning the correct MIME type / content type for XML. You may need to set the content type response header in PHP.

once you can see the JSON in your browser, then you just get angular2 to hit the same endpoint using http.get and bosh, job done.

answered Dec 7, 2016 at 5:30

danday74

58k56 gold badges273 silver badges337 bronze badges

1 Comment

A. L Over a year ago

I worked around it by just using jquery's $.ajax method. I don't really understand promises that much anyway :S

Collectives™ on Stack Overflow

How to connect Angular 2 and a php backend (mysql)

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related