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

Question

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:

Tyler Pham · Accepted Answer · 2017-11-07 00:11:42Z

1

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'})...

answered Nov 7, 2017 at 0:11

Tyler Pham

885 bronze badges

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

Comments

Westwick · Accepted Answer · 2017-10-31 16:30:10Z

0

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.

answered Oct 31, 2017 at 16:30

Westwick

2,5173 gold badges32 silver badges51 bronze badges

Comments

Marcin Malinowski · Accepted Answer · 2017-10-30 19:44:55Z

0

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.

answered Oct 30, 2017 at 19:44

Marcin Malinowski

7955 silver badges13 bronze badges

2 Comments

Henry Johnson Over a year ago

Thanks. What should i be looking for? When I visit /market.php it loads this same thing without errors.

Marcin Malinowski Over a year ago

this same thing - the html or the expected json data?

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related