angular js $http.get returns object object

Question

I am trying to retrieve some sample values from mysql database and display it to my view using angularjs. I am pretty new to angular and I am trying to use $http.get to get my data. The following is my code

Angular Code

angular
.module('sampleApp.service.product', [])

.factory('productsService', [ '$http', function ($http) {

        return {
            getProducts: function () {
              

             //   return $http.get("/Home/GetTweets");
                return $http({
                    method: 'GET',
                    
                    url: '/api/Products'
                }).success(function (data) {
                    alert("success");
                    alert(data);
                }).error(function (error) {
                    //Showing error message 
                    alert("failed");
                    $scope.status = 'Unable to retrieve products' + error.message;
                });

alert(data) returns [object,Object]

My Controller code has the following

 public class productsController : ApiController
{
    public IEnumerable<Product> Get()
    {
        ProductEntities context = new ProductEntities();
        var _products = from p in context.Products.AsEnumerable() select p;
        
        return _products;
    }

}

On debug I am getting the values in DB int the _products. Please help me out.Thanks In advance!

You can use ngResource module to interact with REST(-like) API. Here is a good article on how to use it. Take a look: sitepoint.com/creating-crud-app-minutes-angulars-resource — Karlen Kishmiryan
– Karlen Kishmiryan, Commented Oct 15, 2014 at 6:15

Kalhan · Accepted Answer · 2014-10-15 06:35:54Z

0

your code is successful as i can see

put console.log(data); instead of alert(data); and then you can see the data in the browser console.

.factory('productsService', [ '$http','$q', function ($http,$q) {

    return {
        getProducts: function () {

             var deferred = $q.defer();

            $http({
                method: 'GET',
                url: '/api/Products'
            }).success(function (data) {

                deferred.resolve(data);

            }).error(function (error) {

                deferred.reject(data);

            });

            return deferred.promise;
        }
     }

In the Conteroller,

productsService.getProducts().then(function(data) {
     //success
     $scope.products = data.rows; 
     console.log($scope.products);
}, function() {
     //flier
});

edited Oct 15, 2014 at 6:35

answered Oct 15, 2014 at 6:16

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

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

4 Comments

Philomath Over a year ago

Thank you @Karlen..I will check [email protected] I am getting the data properly in console..however the place where i am calling the service the data is undefined. productsService .getProducts() .success(function (data, status, headers, config) { $scope.products = data.rows; // alert(data.rows); console.log($scope.products); }); }

Kalhan Over a year ago

you have to use promises in this case. i updated my answer please check.

Philomath Over a year ago

$scope.products has the value from db as its seen correctly in console. However its not getting displayed in my view. This is my code in view ` <tbody> <tr ng-repeat="product in products"> <td>{{product.Id}}</td> <td>{{product.Name}}</td> <td>{{product.Unit}}</td> `

Kalhan Over a year ago

yeah great :) glad if u can upvote and mark as the correct answer if its solve ur issue :)

Collectives™ on Stack Overflow

angular js $http.get returns object object

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related