Recently I started learning Angularjs and I am looking to showcase the JSON data retrieved from a webservice response in a grid format using ng-grid. Here is my code snippet:
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;
});
However, in the provided code, PostData is not defined. The scope for ng-grid looks 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 my question is how can I populate myData with the JSON object data so that I can utilize ng-grid as follows:
<div ng-controller="TestController">
<div class="gridStyle" ng-grid="gridOptions"></div>
</div>
In this case, my personal URL is confidential, hence not displayed here. The issues I'm facing include occasional PostData not defined error and sometimes encountering a 405 error.
I would appreciate it if someone could provide an explanation along with a Plunker link showcasing the problem.