Data Retrieval and Filering From Database Using AngularJs

Question

I am trying to learn and work as well with AngularJs. Finally made a sample of it but unable to retrieve data from database. I am trying to filter product data and tried the following:

ASP.NET MVC Controller:

DemoEntities db = new DemoEntities();
public JsonResult GetProducts()
{
   var result = db.Products.ToList();
   return Json(result, JsonRequestBehavior.AllowGet);
}

ProductClient.js: Updated

var ProductApp = angular.module('ProductApp', []); //Created the module

ProductApp.controller('ProductController', function ($scope, ProductService) { //The controller here
    $scope.Product = null;

    ProductService.GetProducts().then(function (d) { //No parameter passed here
        $scope.Product = d.data; 
    }, function () {
        alert('Failed');
    });
});

ProductApp.factory('ProductService', function ($http) { //The product service
    var factory = {};

    factory.GetProducts = function () {
        return $http.get('/Products/GetProducts'); //The ASP.NET MVC controlled defined
    }
    return factory;
});

Index.cshtml:

@{
    ViewBag.Title = "Tutorial - AngularJs";
}

@section scripts{

    <script src="~/Scripts/angular.js"></script>
    <script src="~/AngularFile/ProductClient.js"></script>
}

<h2>Home</h2>
<div ng-app="ProductApp" class="container">
    <br />
    <br />
    <input type="text" class="input-lg" placeholder="Search Product" ng-model="searchProduct" />
    <br />
    <div ng-controller="ProductController">
        <table class="table">
            <tr>
                <td>{{ Product.ProductName }}</td>
                <td>{{ Product.Details }}</td>
                <td>{{ Product.Price }}</td>
                <td>{{ Product.Stock }}</td>
            </tr>
        </table>
    </div>
</div>

The below is a screenshot of the sample project and it doesn't show up anything. Am I missing something and unable to figure out?

Note: Apologies to ask this novice question and stuck with it for hours.

I've updated the post. Please check @Mohammad Javad Seyyedi. I am now willing to pull data from database directly without passing any parameter. Though it doesn't work yet. — AT-2017
– AT-2017, Commented Oct 4, 2017 at 15:40

AT-2017 · Accepted Answer · 2017-10-05 06:54:49Z

1

I was really silly enough to figure out that I missed the ng-repeat. The following solved it:

<div ng-controller="ProductController">
   <table class="table" ng-repeat="m in Product">
      <tr>
         <td>{{ m.ProductName }}</td>
         <td>{{ m.Details }}</td>
         <td>{{ m.Price }}</td>
         <td>{{ m.Stock }}</td>
      </tr>
   </table>
</div>

answered Oct 5, 2017 at 6:54

AT-2017

3,1494 gold badges28 silver badges45 bronze badges

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

Collectives™ on Stack Overflow

Data Retrieval and Filering From Database Using AngularJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related