current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 2 down vote favorite

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

share|improve this question
    
does $scope.vertexData actually have the result? – sdfacre Jan 22 '16 at 1:17
    
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 Jan 22 '16 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. Youngmman Jan 22 '16 at 13:57
up vote 0 down vote

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);
share|improve this answer
up vote 0 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.