JSON data not being displayed in 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

wait, your code looks very interesting. did you actually create ExceptionLogDataFactory as a service? why did you instantiate it in your controller like ExceptionLogDataFactory() rather than inject it? there must be some errors showing on the console, just check that first. — sdfacre
– sdfacre, Commented Jan 22, 2016 at 1:28
I got this from an online tuturial on angularjs and asp.net mvc and that was the approach that the author took. I then took that and started trying to implement the the ui-grid. Note: in the tutorial the auther was using <div ng-init="getValues()"></div> <ul ng-if="values.length != 0"> <li ng-repeat="value in values">{{value}}<li> </ul> where getValues() was a call through a Values Controller / Values Factory and that works fine meaning it is displaying the results of my REST call. — B. Youngman
– B. Youngman, Commented Jan 22, 2016 at 13:57

B. Youngman · Accepted Answer · 2016-01-28 21:47:31Z

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);

answered Jan 28, 2016 at 21:47

B. Youngman

3014 silver badges15 bronze badges

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

Comments

JEuvin · Accepted Answer · 2016-01-29 18:33:47Z

0

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.

answered Jan 29, 2016 at 18:33

JEuvin

1,0361 gold badge15 silver badges32 bronze badges

Collectives™ on Stack Overflow

JSON data not being displayed in angularjs ui-grid

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related