Angular JS update view from database

Question

Im building a social networking app using angular js. I have one doubt about binding the data. There is a timeline div, where all the recent posts gets displayed. Also, there is a status updater on top. Now, on page load, i fire an ajax($http) service to the DB and query all the posts, ill get the json data and i bind it to the div using ng-bind. suppose, the update the status now, how can i get the updated data to be displayed in my view without refreshing the page? I'm confused with this. Please help me out.

Thanks, Pavan

EDIT## - Some good folks had asked for code, here it is..im still facing issues and cannot bind my json data :( please help.

wall.controller('mainData', function($scope, $http)
{
$scope.status = {};
$scope.updatedStatus = {}; 
$scope.getStatus = function(){
  var uid = localStorage.getItem('_id');

    $http({
        method: "GET",
        url: "http://localhost:8000/profile/status/"+uid


    }).success(function (data, status, headers, config) {

        $scope.updatedStatus =data;            

    })

}

and the html part

 <div class="card" ng-controller="mainData"  ng-repeat="item in updatedStatus">
                            <div class="card-header">
                                <div class="media">
                                    <div class="pull-left">
                                        <img class="lv-img" src="img/profile-pics/2.jpg" alt="">
                                    </div>

                                    <div class="media-body m-t-5">
                                        <h2><a href="profile.html"       class="a-title">{{item.firstname+" "+item.lastname}}</a><small>{{item.record_time}}</small></h2>
                                    </div>
                                </div>
                            </div>
                            <hr/>
                            <div class="card-body card-padding">
                                <p>{{item.message}} </p>

                            </div>

                        </div>

JSON array that im getting from server

[
{firstname: "Pavan"
id: 1
lastname: "Kumar"
message: "This is my first update"
record_time: "10/16/2015, 8:32:16 PM"},
{firstname: "LOL"
id: 2
lastname: "test"
message: "This is my second update"
record_time: "10/16/2015, 8:32:16 PM"}
]

As i said, nothing is getting displayed after i add new values to the server nor data is getting displayed with present data. But the server is returned me json object, no errors are getting displayed. something wrong in ng-repeat may be? .any help is highly appreciated. :)

Hi, yet to write that part. Im pretty sure that, i can get the updated info on refresh. But, my question is, is it possible to get it from the database. If i had bind it in ng-model, that would have updated instantly..but on click on post, im updating it to database. Is it possible to get it ? Thanks. — Pavan
– Pavan, Commented Oct 4, 2015 at 12:37
Can you please help me with the flow, like how it should be done?. Im fairly new to Angular, so i have less idea. — Pavan
– Pavan, Commented Oct 4, 2015 at 12:40
Please, take learn through about $scope and $http from any tutorial website. Thank you. — Bhushankumar Lilapara
– Bhushankumar Lilapara, Commented Oct 4, 2015 at 12:41
@BhushankumarLilapara I understood scope and http. When i click, post button, i would be using http service to update the status in DB. Now, for displaying in news feed after posting, can i use http service one more time and store the json response in scope.somearray and bind it to UI again? so that page will not be refreshed? Thanks. — Pavan
– Pavan, Commented Oct 4, 2015 at 12:45

Mostafa Ahmed · Accepted Answer · 2015-10-04 16:31:12Z

2

there is 3 places where the your data exist

1- the db

2- the javascript object

3- the html view

so if you did a binding the value in the javascript object will be the same as the html view

so if you changed the value in the javascript object it will be changed in the view in your question you said that

i fire an ajax($http) service to the DB

i don't know if you use angular $http service or another one but if you use angular function there will be no problem but if you use a non angular function to get the http request you need to call this function at the end of the callback function of the request

$scope.$apply();

to ask the digest loop to work and apply your changes on the view

answered Oct 4, 2015 at 16:31

Mostafa Ahmed

6615 silver badges7 bronze badges

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

2 Comments

Pavan Over a year ago

Thanks for the neat explanation. And thank you @aus_lacy for me helping me out too. Appreciate it.

Pavan Over a year ago

Got it working. Had some div issues and thanks for $scope.$apply()

Collectives™ on Stack Overflow

Angular JS update view from database

EDIT## - Some good folks had asked for code, here it is..im still facing issues and cannot bind my json data :( please help.

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDIT## - Some good folks had asked for code, here it is..im still facing issues and cannot bind my json data :( please help.

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related