JSON数据未显示在angularjs ui-grid中

Question

I'm new to AngularJS and so far haven't had any problems until this one...

I am trying to display json data returned for my REST service call without any luck. I can hard-code in a data array into my controller script file and that will be displayed on my web page just fine however when trying to display my json data I'm not having any luck.

This is what I currently have coded...

Web page-

<div ng-controller="ExceptionLogDataController">
    <div ui-grid="gridOptions" class="vertexGrid"></div>
</div>

ExceptionLogDataController-

    $scope.vertexData = [];

    $scope.gridOptions = {
        enableSorting: true,
        data: "vertexData",
        columnDefs: [
          { name: 'Data Id', field: 'DataId' },
          { name: 'Source Date Time', field: 'SourceDateTime' },
          { name: 'Message Text', field: 'MessageText' },
          { name: 'IsDirty', field: 'IsDirty' }
        //  { name: 'FileName', field: 'FileName' },
        //  { name: 'GenJIRATicket', field: 'GenJIRATicket' },
        //  { name: 'MessageCount', field: 'MessageCount' },
        //  { name: 'MachineName', field: 'MachineName' },
        //  { name: 'AppDomainName', field: 'AppDomainName' },
        //  { name: 'ProcessName', field: 'ProcessName' },
        //  { name: 'StackTrace', field: 'StackTrace' }
        ],
    };

    //$scope.vertexData = [
    //    {
    //        "First Name": "John",
    //        "Last Name": "Smith",
    //    },
    //    {
    //        "First Name": "Jane",
    //        "Last Name": "Doe",
    //    }
    //];

    $scope.load = function () {
        ExceptionLogDataFactory()
            .then(function (response) {
                $scope.vertexData = JSON.parse(response.data);
        });
    }

    $scope.load();
}

ExceptionLogDataController.$inject = ['$scope', 'ExceptionLogDataFactory'];

ExceptionLogDataFactory-

var ExceptionLogDataFactory = function ($http, $q, SessionService) {
    return function () {
        var result = $q.defer();

        $http({
            method: 'GET',
            url: SessionService.apiUrl + '/api/ExceptionLogData',
            headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + SessionService.getToken() }
        })
        .success(function (response) {
            result.resolve(response);
        })
        .error(function (response) {
            result.reject(response);
        });
        return result.promise;
    }
}

ExceptionLogDataFactory.$inject = ['$http', '$q', 'SessionService'];

I've verified that my REST call is returning JSON data through Postman so the problem lies with my front end code.

Making progress...

I'm getting my json object successfully returned and am trying to display it with the following...

$scope.data = [];
$scope.gridOptions = {
    enableSorting: true,
    data: 'data',
};

ExceptionLogDataService() //Call to Service that returns json object
.then(function (data) {
    $scope.data = data;
    $scope.gridOptions.data = $scope.data;
    console.log($scope.data);
}

And this is the json object that is being returned via console.log call...

Object { DataId: 1074, SourceDateTime: "2016-01-19T13:29:01.2512456-05:00", MessageText: "There is an error in XML document (…", IsDirty: false, StatusList: Object, FileName: "D:\\ProdMonitorSiteDev\\ErrorFiles\\…", GenJIRATicket: false, MessageCount: 1, MachineName: "VERTEXCUTIL01", AppDomainName: "", 2 more… }

This is the error that I am getting...

Error: newRawData.forEach is not a function

Answer 1

Well I figured it out!

I finally got my head out of the weeds and 'really' looked at the JSON object that was being returned from my service and noticed that the object was encapsulated with '{}' (curly braces) which is what was causing the newRawData.forEach error. So what I did was the following...

.then(function (data) {
    $scope.data = "[" + JSON.stringify(data) + "]"; // 'Stringify my object and then encapsulate it with square brackets '[]' and then I could use JSON.parse to then parse the new string into a JSON object...
    $scope.data = JSON.parse($scope.data);

    // Worked like a champ!....
    $scope.gridOptions.data = JSON.stringify($scope.data);

Answer 2

You don't need to parse the JSON.

$http.get(url)
.success(function (data) {  
    $scope.gridOptions.data = data;
}

This should work just fine for what you are doing.