Question

我是AngularJS的新手，到目前为止还没有任何问题，直到这个......

我正在尝试显示为我的REST服务调用返回的json数据而没有任何运气。我可以将数据阵列硬编码到我的控制器脚本文件中，这将显示在我的网页上，但是当我试图显示我的json数据时，我没有运气。

这是我目前编码的......

网页 -

<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'];

我已经验证我的REST调用是通过Postman返回JSON数据所以问题在于我的前端代码。

取得进步......

我已成功返回我的json对象，并尝试使用以下内容显示它...

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

这是通过console.log调用返回的json对象...

Object {DataId：1074，SourceDateTime：＆＃34; 2016-01-19T13：29：01.2512456-05：00＆＃34;，MessageText：＆＃34; XML文档中存在错误（...＆＃34 ;，IsDirty：false，StatusList：Object，FileName：＆＃34; D：\ ProdMonitorSiteDev \ ErrorFiles \ ...＆＃34;，GenJIRATicket：false，MessageCount：1，MachineName：＆＃34; VERTEXCUTIL01＆＃34;，AppDomainName：＆＃34;＆＃34;，2更多......}

这是我得到的错误......

错误：newRawData.forEach不是函数

Answer 1

好吧我明白了！

我终于摆脱了杂草，'真的'看着从我的服务返回的JSON对象，发现该对象被封装了'{}'（花括号），这是导致newRawData.forEach错误。所以我做的是以下......

.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

您不需要解析JSON。

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

这应该对你正在做的事情很好。

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

2 个答案: