display data in umbraco back office

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Ross Ekberg 130 posts 381 karma points

1 week ago

Umbraco 10

I am trying to extend the back office. I have been able to communicate between the backoffice and a server-side controller. However, the dashboard does not display the data. I can see in the network traffic that "getdatabases" is called and it successfully returns data. But it seems the 'ng-repeat' on the dashboard isn't doing anything.

EDIT: So it seems my issue is passing a Json object in the scope. I am able to pass simple text objects just fine. Is there a trick to putting a Json object in the scope?

Umbraco controller:

    namespace Umbraco_Prod.Controllers
{

    public class TestController : UmbracoAuthorizedApiController
    {


        public class ESource
        {
            public int DBID { get; set; }
            public string LinkText { get; set; }
            public string LinkURL { get; set; }
            public string LtrLink { get; set; }
            public string Description { get; set; }
            public List<Category> CatArray { get; set; }
            public List<string> AvailArray { get; set; }
        }

        [HttpGet]
        public JsonResult GetDatabases()
        {

            DPL_Databases_TESTContext dc = new DPL_Databases_TESTContext();

            var displayItems = dc.DatabaseLists.Select(x => new ESource()
            {
                DBID = x.Dbid,
                LinkText = x.LinkText,
                LinkURL = x.LinkUrl,
                Description = x.Description
            }).OrderBy(x => x.LinkText).ToList();

            return new JsonResult(displayItems);

        }
    }
}

Angular JS Controller:

angular.module('umbraco').controller('TestController', function ($scope, testResource) {
    testResource.getDatabases().then(function (response) {
        $scope.databases = response.data;
    });
});

AngularJS Resource:

angular.module('umbraco.resources').factory('testResource',
    function ($q, $http, umbRequestHelper) {
        return {
            getDatabases: function () {
                return umbRequestHelper.resourcePromise(
                    $http.get("backoffice/api/Test/GetDatabases"),
                    "Failed");
            }
        };
    }
);

Dashboard:

<body>
    <table ng-controller="TestController">
        <thead>
            <tr>
                <th>Name</th>
            </tr>
        </thead>
        <tr ng-repeat="db in databases">
            <td>{{ db.LinkText }}</td>
        </tr>
    </table>
</body>

Copy Link

Alex Skrypnyk 6175 posts 24176 karma points MVP 8x admin c-trib

1 week ago

0

Hi Ross

Can you log $scope.databases or debug and check that data actually assigning to the scope?

Alex

Copy Link

Ross Ekberg 130 posts 381 karma points

1 week ago

I tried adding console.log($scope.databases) to the Angular controller, but it had no effect, or at least I dn't know how to see it.

angular.module('umbraco').controller('TestController', function ($scope, testResource) {
    testResource.getDatabases().then(function (response) {        
        $scope.databases = response.data;
        console.log($scope.databases);
    });
});

Copy Link

Alex Skrypnyk 6175 posts 24176 karma points MVP 8x admin c-trib

1 week ago

0

Are there any errors in the console log? So maybe the list is not assigned to the scope?

Copy Link
Ross Ekberg 130 posts 381 karma points

1 week ago

0

I don't see any errors in my browser's debugger. I checked the Umbraco log file and don't see any errors there either.

If my list isn't getting assigned to the scope, how do I do that? You can see above my code for my AngularJS controller. I don't know how else to assign this value to the scope.

Copy Link
Ross Ekberg 130 posts 381 karma points

1 week ago

0

The issue seems to be with the Json object. I tried putting a basic text value in the scope and that displayed just fine. Is there a trick to putting a Json object in the scope and displaying it through an ngrepeater?

Copy Link
Marc Goodson 2157 posts 14411 karma points MVP 9x c-trib

1 week ago

0

Hi Ross

I think because your API controller returns a JsonResult object that this includes other properties and not just the data.

I think the suggestion to console.log(response.data) to the browser console window is good as you'll see the structure of the object you are getting back from the apicontroller...

... Debugging aside if you make your ApiController return IEnumerable<Esource>

Then the raw data will be magically be turned into a Json object in the format you are expecting... Should just work.

Regards

Marc

Copy Link
is working on a reply...

Please Sign in or register to post replies