CODEWITHSUNDEEP
javascriptmysqlangularjsnode.js
Jonathan Leijendekker
Jonathan Leijendekker

Reputation: 43

AngularJS $http.get not retrieving the backend data

i am new to the "Angularjs and Nodejs" combination and i am trying to make a simple crud app. The problem is, when i use $http.get in angular, it doesnt go to the backend.

Here are my codes:

server.js (nodejs)

var connection = util.getDBConnection();
app.use(express.static(__dirname + "/public"));
app.use(bodyParser.json());
//routes = require('./routes/routes')(app, connection);

app.get('/', function(req, res) {
console.log("Backend");
        connection.query("SELECT * FROM user_info;", function(err, rows){
            if(err){
                res.redirect('/error');
                console.log("Error in the database: " + err);
            } 
            res.end(JSON.stringify(rows));
            console.log("Connected to the Database!");
        });
    });

angularmodule.js

var app = angular.module('two_way', ['ngRoute']);
app.controller('two_way_control', function($scope, $http){
    $scope.message = "Hello from controller";
    $http.get('/').success(function(data){
        console.log("http get");
        console.log(data);
        $scope.profile_pictures = data;
    });
});

and console.log(data) returns the whole index.html

index.html

<body>
    <div id="container" ng-app="two_way" ng-controller="two_way_control">
        <div class="row" ng-repeat="data in profile_pictures">
            {{message}}
            <div class=".col-sm-6 .col-md-5 .col-lg-6">
                <h4>User Say's</h4><hr>
                <p>
                    This is a Demo feed. It is developed to demonstrate Two way data binding.
                </p>
                {{ data.profile_picture }}
                <img src="{{data.profile_picture}}">
            </div>
        </div>
    </div>
</body>

But this code returns the mysql data in json format:

app.get('/load', function(req, res) {
console.log("Backend");
        connection.query("SELECT * FROM user_info;", function(err, rows){
            if(err){
                res.redirect('/error');
                console.log("Error in the database: " + err);
            } 
            res.end(JSON.stringify(rows));
            console.log("Connected to the Database!");
        });
    });

Please help. Thanks in advance and sorry for the bad english.

Upvotes: 3

Views: 1403

Answers (4)

王如锵
王如锵

Reputation: 991

Change

<img src="{{datas.profile_picture}}">

to 

<img src="{{data.profile_picture}}">

Upvotes: 0

Matteo
Matteo

Reputation: 39470

For fix the error in the chrome console

"GET http://localhost:8000/%7B%7Bdatas.profile_picture%7D%7D 404 (Not Found)"

i suggest you to use the ngSrc directive, so instead of

<img src="{{datas.profile_picture}}">

use

<img ngSrc="{{datas.profile_picture}}">

As described in the doc

Hope this help

Upvotes: 2

Jonathan Leijendekker
Jonathan Leijendekker

Reputation: 43

I got the answer, i just need to initiate the http function

var app = angular.module('two_way', []);
app.controller('two_way_control', function($scope, $http){
    $scope.message = "Hello from controller";

    $scope.load = function(){
        $http.get('/LoadAll').success(function(data){
            console.log("http get");
            $scope.profile_pictures = data;
        });
    };

    $scope.load();
});

but i still get an error in the chrome console

"GET http://localhost:8000/%7B%7Bdatas.profile_picture%7D%7D 404 (Not Found)"

in <img src="{{datas.profile_picture}}">

Upvotes: 1

Strawberry
Strawberry

Reputation: 67968

In Express, you need to respond with a request. Use something such as res.send and send data down.

http://expressjs.com/api.html#res.send

Sends the HTTP response.

The body parameter can be a Buffer object, a String, an object, or an Array. For example:

res.send(new Buffer('whoop'));
res.send({ some: 'json' });
res.send('<p>some html</p>');
res.status(404).send('Sorry, we cannot find that!');
res.status(500).send({ error: 'something blew up' });

This method performs many useful tasks for simple non-streaming responses: For example, it automatically assigns the Content-Length HTTP response header field (unless previously defined) and provides automatic HEAD and HTTP cache freshness support.

When the parameter is a Buffer object, the method sets the Content-Type response header field to “application/octet-stream”, unless previously defined as shown below:

res.set('Content-Type', 'text/html');
res.send(new Buffer('<p>some html</p>'));

When the parameter is a String, the method sets the Content-Type to “text/html”:

res.send('<p>some html</p>');

When the parameter is an Array or Object, Express responds with the JSON representation:

res.send({ user: 'tobi' });
res.send([1,2,3]);

http://expressjs.com/api.html#res.end

Ends the response process. Inherited from Node’s http.ServerResponse.

Use to quickly end the response without any data. If you need to respond with data, instead use methods such as res.send() and res.json().

res.end();
res.status(404).end();

Upvotes: 2

Related Questions