Angular2 http get error

Question

I am brand new in Angular2 framework and I have a problem with http get request. I want to display all registered users on my homepage.

This is my code:

home.service.ts

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


@Injectable()
export class UserService {
  constructor (
    private http: Http
  ) {}

  getUser() {
    return this.http.get(`/app/home/home.php`)
    .map((res:Response) => res.json());
  }

}

home.component.ts:

// Imports
import { Component, OnInit } from '@angular/core';
import { UserService } from './home.service';

@Component({
  templateUrl: './home.component.html'
})
// Component class implementing OnInit
export class HomeComponent{
  // Private property for binding

  constructor(private userService: UserService) {}
  profile = {};

  loadUser() {
    this.userService.getUser().subscribe(data => this.profile = data);
  }
}

home.php

<?php 

$connection = new mysqli("127.0.0.1", "root", "", "flatmate");

if($connection->connect_error){
    echo $connection->connect_error;
}

/* change character set to utf8 */
if (!$connection->set_charset("utf8")) {
    echo $connection->error;
    exit();
}

$getUser = 'SELECT * from users';
$result = mysqli_query($connection, $getUser);

$data = array();

while ($row = mysqli_fetch_array($result)) {
  $data[] = $row;
}

echo json_encode($data);

home.component.html:

<div>
  <button (click)="loadUser()">Load profile</button>
  {{ profile | json }}
</div>

In my app.module.ts I added UserService provider. I prepared my code based on this tutorial. When I pass into get method URL from this example, code works properly. But if I change link to my home.php I get the error:

"errors.ts:42 ERROR SyntaxError: Unexpected token < in JSON at position 0"

it seems like you are getting a http error page (the first character is `<`, that's the start of every html page). When you request the home.php file directly it can't work because it has to be interpreted by php (PS: don't use mysqli, it's heavily deprecated). — Supamiu, Aug 02 '17 at 13:50
Based on the error I would be checking what the php code is sending back to angular, posting it here may help further troubleshooting. `<` isn't valid json, I wonder if the php code is returning html somehow. — instantepiphany, Aug 02 '17 at 13:53
@Suparniu so what I can use to get my data from database instead of php file? — dorothy_ka, Aug 02 '17 at 13:54
@instantepiphany my home.php file works properly, besause i use this to do the same thing in Angular 1.6 framework and it works good. — dorothy_ka, Aug 02 '17 at 13:56
https://github.com/doctrine/rest you should take a look at this, what you need is a REST API. — Supamiu, Aug 02 '17 at 13:56
Supamiu's suggestions seem like a good way to go, I don't have much experience with php or mysql, so I can't comment there. But I am experienced with angular, and there are important differences between 1.6 and 2+. I suggest looking into this so you avoid further issues. Also, you may benefit from the `async` pipe, or using a guard on the div containing the profile output, or angular will complain as you are asking it to show data it doesn't have yet. — instantepiphany, Aug 02 '17 at 14:02
@Suparniu and any other, simpler way? a dont know how use rest and how combine it with angular2.. — dorothy_ka, Aug 02 '17 at 14:12
Angular 2 is the client, you would need to setup a server that exposes a REST api. There wouldn't actually be any difference in this case between angular 1.6/2+, apart from the ability to use observables in place of promises. — instantepiphany, Aug 02 '17 at 14:31
There is an example here using PHP that seemed to work: https://stackoverflow.com/questions/43319715/call-php-file-in-angular2 — DeborahK, Aug 02 '17 at 23:27
Thanks a lot, I saw this example, but it was not helpful to me. Finally I run my app in xampp server. And that solved my problem. — dorothy_ka, Aug 03 '17 at 07:38

Angular2 http get error

0 Answers0