Clever Geek Handbook

AngularJS $ http.get not fetching backend data

I am new to the combination of "Angularjs and Nodejs" and I am trying to make a simple crud application. The problem is when I use $ http.get in angular it doesn't go to the server.

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 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.

+3


source to share


4 answers


To fix an error in the Chrome console

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

I suggest you use the ngSrc directive, so instead of

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



using

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

As described in the doc

Hope for this help

+2


source


In Express, you must respond with a request. Use something like res.send

and send data down.

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

Sends an HTTP response.

The body parameter can be a Buffer, String, Object, or 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 HTTP Content-Length HTTP response header field (if not previously defined) and provides automatic cache and HTTP cache freshness maintenance.

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

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

When the parameter is 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 a JSON representation:

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


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

Ends the reply process. Inherited from Node s http.ServerResponse

.

Use to complete a response quickly without any data. If you need to respond with data, use methods like res.send()

and instead res.json()

.

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


source


I got a response, I just need to run 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 the error in chrome console

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

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

+1


source


Edit

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

to

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


source






More articles:


All Articles