javascript - how to display json data in ng-grid in angularjs - Stack Overflow

admin管理员组

文章数量:1327059

I am new to Angularjs , I want to display the JSON data from webservice response to in grid form by using ng-grid .My code is here

function TestController($scope, $http) {
alert("test");
$http({
      url: 'http://my_Personal_Url',
      method: "POST",
      data: postData,
      headers: {'Content-Type': 'application/jsonp'}
  }).success(function (data, status, headers, config) {
          $scope.persons = data; //  
      }).error(function (data, status, headers, config) {
          alert("test2");
          $scope.status = status;
      });

But In the above code the PostData is not defined.my ng-grid scope is like this

 $scope.gridOptions = { 
data: 'myData',
columnDefs: [
{field: 'DirectLine', displayName: 'DirectLine'},
{field:'Email', displayName:'Email'}
{field:'Employee', displayName:'Employee'}
{field:'Extention', displayName:'Extention'}
{field:'Id', displayName:'Id'}
{field:'PhoneNumber', displayName:'PhoneNumber'}
{field:'Title', displayName:'Title'}
]
 };

NOw how can i get the data from json object to myData ? so that i can use ng-grid as

<div ng-controller="TestController">

    <div class="gridStyle" ng-grid="gridOptions"></div>
</div>

here the my personal url (it is confidential so i don't want to show ) The above code shows sometimes as postData is not defined and sometimes getting 405 error .

Please explain the problem with the plunker link

I am new to Angularjs , I want to display the JSON data from webservice response to in grid form by using ng-grid .My code is here

function TestController($scope, $http) {
alert("test");
$http({
      url: 'http://my_Personal_Url',
      method: "POST",
      data: postData,
      headers: {'Content-Type': 'application/jsonp'}
  }).success(function (data, status, headers, config) {
          $scope.persons = data; //  
      }).error(function (data, status, headers, config) {
          alert("test2");
          $scope.status = status;
      });

But In the above code the PostData is not defined.my ng-grid scope is like this

 $scope.gridOptions = { 
data: 'myData',
columnDefs: [
{field: 'DirectLine', displayName: 'DirectLine'},
{field:'Email', displayName:'Email'}
{field:'Employee', displayName:'Employee'}
{field:'Extention', displayName:'Extention'}
{field:'Id', displayName:'Id'}
{field:'PhoneNumber', displayName:'PhoneNumber'}
{field:'Title', displayName:'Title'}
]
 };

NOw how can i get the data from json object to myData ? so that i can use ng-grid as

<div ng-controller="TestController">

    <div class="gridStyle" ng-grid="gridOptions"></div>
</div>

here the my personal url (it is confidential so i don't want to show ) The above code shows sometimes as postData is not defined and sometimes getting 405 error .

Please explain the problem with the plunker link

• javascript
• json
• angularjs
• ng-grid

Share Improve this question Follow asked Apr 21, 2014 at 6:50 ShekkarShekkar 24433 gold badges1010 silver badges2222 bronze badges 2

• How does myData look like? – bobthedeveloper Commented Apr 21, 2014 at 7:29
• actually i am in doubt how to generate grid ,in case of myData the grid fields are shown above ,and in the $http syntax unfortunately i used $scope.persons instead of myData which was bind in the controller . – Shekkar Commented Apr 22, 2014 at 9:21

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

The 'data' property in ng-grid accepts the name of the data object, in your case the name is "persons" since the response from your HTTP request goes to $scope.persons.

Example:

 $scope.gridOptions = { 
data: 'persons',
columnDefs: [
{field: 'DirectLine', displayName: 'DirectLine'},
{field:'Email', displayName:'Email'}
{field:'Employee', displayName:'Employee'}
{field:'Extention', displayName:'Extention'}
{field:'Id', displayName:'Id'}
{field:'PhoneNumber', displayName:'PhoneNumber'}
{field:'Title', displayName:'Title'}
]
 };

Live example: http://plnkr.co/edit/UndbtO?p=preview

本文标签： javascripthow to display json data in nggrid in angularjsStack Overflow