Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 936
Jonathan Leijendekker Avatar asked Sep 27 '26 07:09

Jonathan Leijendekker


2 Answers

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

like image 188
Matteo Avatar answered Sep 28 '26 20:09

Matteo


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();
like image 28
Strawberry Avatar answered Sep 28 '26 20:09

Strawberry



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!