MD Ghouse MD Ghouse - 1 year ago 84
Javascript Question

Why angular not binding Data in ng-model

Here I'm getting data from the database and I also trace that data from Fiddler but when I'm trying to bind data in an angular table it's not binding

Linq Query

public JsonResult GetSalesData()
using (Ctxdb dc = new Ctxdb())

var v = (from a in dc.SalesRecords
group a by a.SalesDate.Year into g
select new
Year = g.Key,
Electronics = g.Sum(a => a.Electronics),
BookAndMedia = g.Sum(a => a.BookAndMedia),
HomeAndKitchen = g.Sum(a => a.HomeAndKitchen)
if (v != null)
var chartData = new object[v.Count() + 1];
chartData[0] = new object[]{
"Book and Media",
"Home and KitchenKFC"
int j = 0;
foreach (var i in v)
chartData[j] = new object[] { i.Year.ToString(), i.Electronics, i.BookAndMedia, i.HomeAndKitchen };}
return new JsonResult { Data = chartData, JsonRequestBehavior = JsonRequestBehavior.AllowGet };}}
return new JsonResult { Data = null, JsonRequestBehavior = JsonRequestBehavior.AllowGet };}

Fidller Data

[["Year","Electronics","Book and Media","Home and KitchenKFC"],["1947",99489,46000,26833],["1995",25555,45000,99000],["2011",1584,5685,5566],["2012",12121,1500,1200],["2014",600,5132,2730],["2015",1789,1255,1258]]

Angular Service

app.service('MyGraphService', function ($http) {
this.GetJanu = function () {
alert('in Service')

var Sert = $http({
url: '/Department/GetSalesData',
method: 'GET',
data: JSON.stringify(),
content:{'content-type' :'application/Json'}
return Sert;

Angular Controller

app.controller('GraphCntrls', function ($scope, MyGraphService) {
$scope.Btnclick = function () {
alert('in cntr')
var tt = MyGraphService.GetJanu();
tt.then(function (d) {
$scope.DataGraphf =;

Cshtml Code


<div ng-controller="GraphCntrls">

<input type="button" ng-click="Btnclick()" value="Click" class="btn btn-success btn-sm"/>

<table class="table table-striped table-bordered">

<th><b>Book and Media</b></th>
<th><b>Home and KitchenKFC</b></th>

@*<tr ng-repeat="datf in DataGraphf">*@


Answer Source

Change the table row to this:

<tr ng-repeat="datf in DataGraphf" ng-if="!$first">

since you are returning an array of arrays, and the first index being table headers. you want to hide the first results element with ng-if="!$first". Then your subsequent elements are arrays with 4 values, so you have to use array index to access the properties vs obj.Name.

To use obj.Name, you have to return an object instead of an array, e.g.

  "Year": 1230,
  "Electronics": 123,
  "BookAndMedia" : 1234,
  "HomeAndKitche" : 515

the response json would be:


update: had extra tr tag in original response, shifted ng-if to tr instead

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download