AngularJS $http.get not retrieving the backend data

Question

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.

Matteo · Accepted Answer · 2015-05-03 13:01:34Z

2

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

answered May 3, 2015 at 13:01

Matteo

39.8k11 gold badges110 silver badges129 bronze badges

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

1 Comment

Matteo Over a year ago

thanks @JonathanLeijendekker consider to upvote my answer if you retain it useful

sbolel · Accepted Answer · 2015-05-03 04:46:30Z

2

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('some html');
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('some html'));
When the parameter is a String, the method sets the Content-Type to “text/html”:
res.send('some html');
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();

edited May 3, 2015 at 4:46

sbolel

3,52230 silver badges45 bronze badges

answered May 3, 2015 at 3:35

Strawberry

68.3k58 gold badges157 silver badges208 bronze badges

2 Comments

Jonathan Leijendekker Over a year ago

i already tried the res.json, res.end, res.send but those didnt work. The problem is that the $http.get is not going to the express app.get. Even console.log("Backend"); was not executed.

Strawberry Over a year ago

You can open up the network tab and see where is the $http request firing off to. I suspect your express is on a different port, and you are not including it in the URL for $http.get.

Jonathan Leijendekker · Accepted Answer · 2015-05-03 08:14:22Z

1

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}}">

answered May 3, 2015 at 8:14

Jonathan Leijendekker

431 silver badge8 bronze badges

Comments

Pang · Accepted Answer · 2017-11-17 08:26:12Z

0

Change

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

to

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

edited Nov 17, 2017 at 8:26

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered May 3, 2015 at 8:28

王如锵

9911 gold badge7 silver badges18 bronze badges

Collectives™ on Stack Overflow

AngularJS $http.get not retrieving the backend data

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related