Get JSON data out of Umbraco

Question

I am a frontend developer so forgive my lack of ability to explain my issue.

I am trying to create some pages in an Umbraco project that display data using Vue.js. For this, I am trying to set up a custom API controller that will return the data I want, when called.

A simple example would be that I want to return all blog articles. Below is the code I have currently got:

 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using Umbraco.Web; using System.Web.Http; using Umbraco.Web.WebApi; using Umbraco.Web.PublishedContentModels; using Newtonsoft.Json; namespace Controllers.WebAPI.Qwerty { [Route("api/[controller]")] public class PostsApiController : UmbracoApiController { [HttpGet] public string Test() { return "qwerty"; } } } 

I've read numerous articles and just can't seem to grasp what I need to do to query Umbraco for the data I want back?

I've tried adding

var content = Umbraco.TypedContent(1122);

And then returning that but I get errors stating:

(local variable) Umbraco.Core.Models.IPublishedContent content
Cannot implicitly convert type 'Umbraco.Core.Models.IPublishedContent' to 'string'

I have then tried serialising the var content but I get stuck with:

Self referencing loop detected for property 'FooterCtalink' with type 
'Umbraco.Web.PublishedContentModels.Blog'. Path 
'ContentSet[0].FeaturedProducts[0].Features[0].ContentSet[0]'.

Any help would be fantastic!

EDIT:

I have no edited the controller to be like this:

 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using Umbraco.Web; using Umbraco.Web.WebApi; using Umbraco.Web.PublishedContentModels; using Newtonsoft.Json; using System.Web.Mvc; using DTOs.PostDTO; namespace Controllers.WebAPI.Qwerty { [Route("api/[controller]")] public class PostsApiController : UmbracoApiController { [HttpGet] public PostDTO Test() { // 1. Get content from umbraco var content = Umbraco.TypedContent(1122); // 2. Create instance of your own DTO var myDTO = new PostDTO(); // 3. Pupulate your DTO myDTO.Url = content.Url; // 4. return it return myDTO; } } } 

And created a DTO like so:

 namespace DTOs.PostDTO { public class PostDTO { public string Url { get; set; } } } 

However, when console logging my data after the ajax request, I only only getting 1122 .

Answer 1

The issue is that you can't return a .NET Object in JSON that has the circular dependency.

To solve your problem, you can simply follow the below steps:

1. Create your own DTO & add required properties in that.
2. Fetch content from Umbraco API in C# & populate your custom DTO object.
3. Return that DTO from JsonResult.

Your code will look like below:

[Route("api/[controller]")]
public class PostsApiController : UmbracoApiController
{
    [HttpGet]
    public MyDTO Test()
    {
        // 1. Get content from umbraco
        var content = Umbraco.TypedContent(1122);

        // 2. Create instance of your own DTO
        var myDTO = new MyDTO();

        // 3. Pupulate your DTO
        myDTO.SomeProperty = content.SomeProperty;

        // 4. return it
        return myDTO;
    }
}

Answer 2

You are on the right track.

I think you need to return ActionResult instead of string.

Something like:

    [HttpGet]
    public ActionResult Test()
    {
        var content = Umbraco.TypedContent(1122);
        return new JsonResult(content);
    }

This should return the umbraco object as Json.