CODEWITHSUNDEEP
javascriptphphtmlangularjshttp-get
Henry Johnson
Henry Johnson

Reputation: 43

$http.get returns index.html code, not data from php database call

My M*EAN app is supposed to return data to the Angular side from the database using php, but when the controller runs and the $http.get executes, response.data returns the source code of index.html instead.

I think all the code necessary to help us find the bug is below. There are also some screenshots of what's going on when the app is run in Chrome using the developer tools, so that you know exactly what I'm talking about.

We are running on a MAMP server, and I know that our app is running on the Apache server, but we don't know why we still aren't getting the JSON data, but the HTML is sent as a JSON response.

Here's the accompanying code:

market.php

<?php
header("Access-Control-Allow-Origin: *");
include 'dbConfig.php';

$sel = mysqli_query($con,"select * from Chef");
if (!$sel) {
    printf("Error: %s\n", mysqli_error($con));
    exit();
}
$data = array();

while ($row = mysqli_fetch_array($sel)) {
    $point = array("fullname"=>$row["fullname"],"city"=>$row["city"],"state"=>$row["state"],"zip_code"=>$row["zip_code"],"rating"=>$row["rating"]);
    array_push($data, $point);
}

header('Content-type: application/json; charset=utf-8');
echo json_encode($data);

marketControllers.js

angular.module('OrchidApp')

.controller('marketController', function ($scope, $http) {
    console.log('ANYTHING');
    $scope.users=[];
    $http({method: 'GET', url:'market.php', headers:{ 'X-Force-Content-Type': 'application/json' }})
        .then(function successCallback(response) {
            $scope.users = response.data;
            console.log($scope.users);
            console.log("There is data here.");
            return $scope.users;
        }, function errorCallback(response) {
            console.log(response.data);
            console.log("Error.");
        });
});

index.html

<!doctype html>
   <html lang="en" ng-app="OrchidApp" >
       <head>
           <title>Orchid</title>
           <meta charset="utf-8">
           <base href="/">
           <meta http-equiv="x-ua-compatible" content="ie=edge">
           <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
            <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>

            <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular-cookies.min.js"></script>

            <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.min.js"></script>

            <script src="/js/app.js"></script>
            <script src="/js/authService.js"></script>
            <script src="/js/profileController.js"></script>
            <script src="/js/marketControllers.js"></script>
            <script src="/js/navController.js"></script>
            <script src="/js/loginController.js"></script>
            <script src="/js/signupController.js"></script>       
       </head> 
       <body class="container">
           <div ng-controller="marketController">
               <p>Above the table.</p>
               <table>
                   <tr ng-repeat="user in users track by $index">
                       <td>{{user.fullname}}</td>
                       <td>{{user.city}}</td>
                       <td>{{user.state}}</td>
                       <td>{{user.zip_code}}</td>
                       <td>{{user.rating}}</td>
                   </tr>
               </table>
               <p>Below the table.</p>
           </div>
       </body>
    </html>

Screenshots:

General + response header

Request Headers

Response.data output

Upvotes: 1

Views: 1191

Answers (3)

Tyler Pham
Tyler Pham

Reputation: 88

once you get your backend/api up and running, you might also want to add the url of the API to your $http.get, the call currently is relative so it will try http://localhost:3000/market.php

You may do something like:

index.html before app.js

<script>
 window.api = "http://localhost:3001"
</script>

Controller...

$http({method: 'GET', url: window.api + '/market.php'})...

Upvotes: 1

Westwick
Westwick

Reputation: 2497

It looks like you are running angular's local development webserver at localhost:3000, which is incapable of processing PHP scripts. You will need to use something like WAMP/MAMP, Vagrant, or Docker to manage your PHP/mysql environment.

Upvotes: 0

Marcin Malinowski
Marcin Malinowski

Reputation: 785

The url /market.php is probably not found and the HTTP server that you are using is redirecting to index.php in such case.

Another case could be that the redirect works fine but the server does not recognize a session and is redirecting you to index.html for login.

try opening /market.php in a browser to see.

Upvotes: 0

Related Questions