Update $http return data to html view

Question

I am getting my data form angular service

.service('SelectedMemberDetail', function ($http) {
        return {
      get : function(id) {
          return $http.get('/api/members/'+ id);
      },
      create : function(id) {
          return $http.post('/api/members/'+ id);
      },
      delete : function(id) {
          return $http.delete('/api/members/'+ id);
      }
    }
})

This is the controller function which calling that service.

$scope.show = function (user_id) {
    $scope.selectedMember = SelectedMemberDetail.get(user_id);
}

And i am trying to get view in html like this

<h2>
  <span class="glyphicon glyphicon-user mleft_10 icon_big"></span>
    {{ selectedMember.firstName[0] }}
</h2>
<div>
  <p class="clear_margin"><b>Address: </b>
     {{ selectedMember.address[0] }}
  </p>
  <p><b>Contact: </b>{{ selectedMember.contact[0] }}</p>
 </div>

I checked, the service function is returning json data, which is here,

_id: "552386cb880611101168ab4b"
address: ["pata nai", "text"]
contact: ["23456", "tel"]
email: ["anoop@email", "email"]
firstName: ["Anoop", "text"]
lastName: ["singh", "text"]

I am not able to see the updated data on browser. What's wrong with my code?

squiroid · Accepted Answer · 2015-04-08 11:27:26Z

3

Use promise return by $http and then assign value.It is not showing anything because you are directly assigning promise to the assignment it will not show anything in the view.

SelectedMemberDetail.get(user_id).then(function(response){
$scope.selectedMember = response.data
});

SelectedMemberDetail.get(user_id).success(function(response){
$scope.selectedMember = response.data
});

There is two way to capture promise return from $http one is then and another is success. Look at the Doc.

answered Apr 8, 2015 at 11:27

squiroid

14.1k7 gold badges50 silver badges68 bronze badges

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

Comments

Richard · Accepted Answer · 2015-04-08 11:27:23Z

2

When you use $http.get it returns a promise not the data itself. You need to do this:

$scope.show = function (user_id) {
    SelectedMemberDetail.get(user_id)
      .success(function (result) {
        $scope.selectedMember = result;

    });
}

see more here:

https://docs.angularjs.org/api/ng/service/$http

answered Apr 8, 2015 at 11:27

Richard

22.1k13 gold badges64 silver badges102 bronze badges

1 Comment

rajat Over a year ago

Hi Richard, you code is getting data from server. But the result is not reflecting on the html view.

Michael Kang · Accepted Answer · 2015-04-08 12:05:47Z

I like this paradigm:

.service('SelectedMemberDetail', function ($http) {
      return {
         get : function(id) {
             var member = {};
             member.$promise = $http.get('/api/members/'+ id)
                 .success(function(data) {
                     angular.copy(data, member);
                 });
             return member;
         }        
      }
})

The get method returns a reference to the member right away. When the $http call completes successfully, it uses angular.copy to assign the member's properties, while preserving the reference.

That way you can still do this (main use case):

$scope.show = function (user_id) {
    $scope.selectedMember = SelectedMemberDetail.get(user_id);
}

The member also has a $promise property, so if you need to handle success or error (edge use case):

$scope.selectedMember = SelectedMemberDetail.get(user_id);
$scope.selectedMember.$promise.success(function(data) {
     // do something else with member
});

Collectives™ on Stack Overflow

Update $http return data to html view

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related