Building a webapplication: Data from my AngularJS file won't display in my HTML document

Question

please help me, this code is a crucial part of a project I have to hand in and I just can't find the problem.

Here is the link to the files on GitHub. https://github.com/PouncingPoodle/LibApp

This application worked perfectly a few days ago on my computer at University, but when I got home, I changed only the paths that HAS to change, but now the app doesn't work anymore. Please help!

So what I'm doing is: I want to show some details from the items in the database in my html document by using angularJS. It shows the "Test before" text but not the "Test after" so there must be a problem onward from the div with the ng-repeat. I checked the "book" / "books" / "info" all those names to be correct and all paths are correct.

This is my html code

<html ng-app="lib">

<div ng-controller="BooksController as books">
        <p>Test before</p>
        <div ng-repeat="book in (books.info | orderBy: 'title' | limitTo: 3)">
            <p>{{book.id}}</p>
            <p>{{book.genre}}</p>
            <p>{{book.title}}</p>
            <p>Test after</p>
        </div>
    </div>

scripts/dbcon.php Connect to the database, get the information and add to an array $results[]

$app->get('/book', function () {
    // these details is correct on my computer
    $bookDBconnect = mysqli_connect("localhost","root","","lib_db");
    if (mysqli_connect_errno()) {
        echo "Failed to connect to". mysqli_connect_error();
    }
    $result = mysqli_query($bookDBconnect,"SELECT * FROM books");
    $results = array();
    while ($row = mysqli_fetch_array($result))
    {
        $mybook = new Book;
        $mybook->id = $row['id'];
        //more fields
        // this echo shows the correct details
        //echo json_encode($mybook);
        $results[] = $mybook;
    }
    echo json_encode($results);
    mysqli_close($bookDBconnect);
});
$app->run();

scripts/app.js Get all the data from the database and send it to my "info" to show in my html

(function(){
    var app = angular.module('lib', []);
app.controller('BooksController', ["$http", function($http) 
{
    var storage = this;
    //this path is correct on my computer
    $http.get("http://localhost/OW/idvProject6/scripts/dbcon.php/book").success(function(data)
    {
        storage.info = data;
    });
}]); 
})();

Thank you guys

Are you sure that your script is returning data? Also you don't need parens in your ng-repeat. — cfs, Mar 21 '15 at 20:39
@cfs I added this now, `console.log(storage); console.log("Hi there");` underneath `storage.info=data;` in the app.js file. The "Hi there" displays, and the `console.log(storage);` displays 'Object {info: "" }' in the console. So then the script does return data and notices the object. — PouncingPoodle, Mar 21 '15 at 21:17
Use chrome's developer tools and set a breakpoint on "storage.info = data" When it breaks there on page load, check what's currently in "data". I want to know if your database is returning something at least. — MingShun, Mar 21 '15 at 21:47
@MingShun I'm not completely sure how to do this, but I think I figured it out. When I create a breakpoint and then reload the site there comes a red cross at the end of the line which reads "Failed to load resource: the server responded with a status of 404 (Not Found)". But when I uncomment `//echo json_encode($mybook);` in the dbcon.php file and go to http://localhost/OW/idvProject6/scripts/dbcon.php/book all the data shows from the database. — PouncingPoodle, Mar 22 '15 at 10:25
Okay, 404's can be good. if you're getting a status 404 in the console, keep the developer tools open, refresh the page, and pull up the Network tab. Scan through the list of Statuses. Most of them should be 200 (OK) or 304 (Not Modified.) Whatever is the 404 (cannot find file) may be the culprit for why it isn't working. — MingShun, Mar 22 '15 at 15:48
@PouncingPoodle: That said, it looks like the php file is being called just fine if the echo data is showing up. — MingShun, Mar 22 '15 at 15:50
@MingShun: Oky, I fixed that 404 error, it was a missing angular.min.js.map file. So now I'm just back to the same problem. The div with the ng-repeat is still commented out in my object inspector, so that part still won't run. The code `console.log(storage)` still shows in console as _Object {info: ""}_ — PouncingPoodle, Mar 22 '15 at 17:03
@PouncingPoodle: Nuts, just a min file? That's for debugging only. Next, I'm not expecting anything here, but what appears if you use console.log(data)? I'm having trouble understanding why something would appear with echo json_encode($mybook), but not with echo json_encode($results); The code looks fine. — MingShun, Mar 22 '15 at 17:32
What I'd really like you to do in chrome's developer's tools is to go to the [Network] tab, scroll to the bottom where you'll see a "/OW/idvProject6/scripts/dbcon.php" with "book" above it. Click it, then on the pane that pops up on the right...go to the [Response] Tab. I want to know what the server is returning. When all is said and done, it should be returning a {} if there's really no data. We can focus on the php script then. — MingShun, Mar 22 '15 at 17:41
@MingShun: It is completely empty. In the response tab it says "This request has no response data available." — PouncingPoodle, Mar 22 '15 at 18:04
@PouncingPoodle: Then you're not even reaching that echo json_encode($results) statement. it's basically failing and exiting before the while loop completes. The only reasonable place where I can see such a silent failure would be at the mysqli_fetch_array() function. Turn on php debugging. Place these at the beginning of the php file: error_reporting(-1); ini_set('display_errors', 'On'); src: http://stackoverflow.com/questions/845021/how-to-get-useful-error-messages-in-php We should be able to figure it out quickly from here. — MingShun, Mar 22 '15 at 18:38
@MingShun: I haven't needed to do debugging before so I don't know how to do this, but I added those lines to my dbcon.php file, is this what I'm supposed to do? Where am I supposed to see the errors then? — PouncingPoodle, Mar 22 '15 at 19:02
@PouncingPoodle: Check the output for "/OW/idvProject6/scripts/dbcon.php". Once you refresh the page and the script is called, new stuff should show up in the response. A bunch of warnings and -- hopefully -- a fatal error. — MingShun, Mar 22 '15 at 19:19
@PouncingPoodle uhh...I mean go to "/OW/idvProject6/scripts/dbcon.php/book" and then check the Network tab again. — MingShun, Mar 22 '15 at 19:50
@PouncingPoodle: That's no good. Ugh, you mention that it's because you're testing in a different place. Is your connection being refused? http://stackoverflow.com/questions/24355740/android-ajax-gets-err-connection-refused — MingShun, Mar 22 '15 at 21:17
@MingShun: Thank you so much for your help, I learned SO MUCH from you. I fixed the problem, see the answer below. — PouncingPoodle, Mar 23 '15 at 10:59

score 1 · Accepted Answer · answered Mar 23 '15 at 10:58

1

Oky so I found the problem: I used Ampps on my university computer but Xampp at home. I switched to Ampps now at home and the bug vanished! Basically what was wrong was the database password as it seems, but with Xampp "mysql" as password didn't work, but with Ampps it does. If the database password was wrong I have no idea why it still connected and send the data with an echo, but somehow it did.

I uploaded the working application to github: https://github.com/PouncingPoodle/LibApp/tree/master/libapp

Thank you for everyone's help.

answered Mar 23 '15 at 10:58

PouncingPoodle

572
1
5
18

As a point of reference for me, how did you figure out the answer? A burst of inspiration? Further research? Or plain ole debugging? Need to figure out where to focus my efforts as I try to optimize my debugging skills. I mean, right now I rely on bursts of inspiration, which are amazing and inspiring but not exactly dependable. – MingShun Mar 23 '15 at 16:25
@MingShun: I started to wonder if there is perhaps some json or angularjs "install file" my computer should have, then somewhere in a post someone mensioned as long as you don't have an outdated php version you are fine. I then decided to update xampp. At that moment I just thought maybe I should rather try Ampps like at Uni. So it was basically further research and just luck and frustration. – PouncingPoodle Mar 23 '15 at 17:37
@MingShun: And well, once I opened it up in Ampps I got the common error that the password to the database is wrong, in Ampps it is "mysql" and Xampp "" (clear). – PouncingPoodle Mar 23 '15 at 17:39
I see. This error is out in left field, but at least I can use it as a possible debugging strategy in the future. Thank you! – MingShun Mar 23 '15 at 17:45
It's a shame that they didn't help this time around, but you'll find them useful for pinpointing problems in the future. – MingShun Mar 23 '15 at 19:57

Building a webapplication: Data from my AngularJS file won't display in my HTML document

1 Answers1