Render entry data as JSON in a Twig template

[1stevengrant]

As much as I like the concept of a headless CMS, I feel like it's often throwing the baby out with the bath water, giving up things that CMS gives you for free like routing, nav management etc.

In my quest to find a happy medium, I think something like Vue and Craft could work together in a hybrid approach.

I've done this quite a bit within Laravel apps where I can do something like $tasks = Task::where(['user_id' => Auth::user()->id])->get(); in my controller, expose that to my view and then output using {{$tasks}} in my Blade template and then passing that var for use in a Vue component.

The simple {{$tasks}} gives me

    [{"id":6,"name":"Steven Grant","user_id":"1","description":"Bacon ipsum dolor sit amet rump turkey spare ribs shank, hamburger boudin frankfurter ham hock pancetta salami. Jerky porchetta salami, fatback swine chicken pastrami beef ribs landjaeger biltong. Capicola prosciutto leberkas landjaeger. Flank turducken chuck pork loin drumstick tongue ground round ham hock fatback short ribs pancetta turkey. Shank beef ribs frankfurter ribeye cow fatback swine kielbasa biltong. Pork pork chop prosciutto pig.\nShoulder andouille hamburger sausage. Andouille tri-tip chicken kevin shankle shank, pancetta hamburger t-bone. Pancetta short loin meatloaf beef ribs. Turkey chuck strip steak rump brisket meatloaf tenderloin venison jowl pig hamburger sausage flank corned beef. Drumstick hamburger filet mignon chicken, porchetta ground round swine rump turkey strip steak.","created_at":"2017-10-17 13:41:41","updated_at":"2017-10-17 13:41:41"},{"id":5,"name":"Task type","user_id":"1","description":"Bacon ipsum dolor sit amet rump turkey spare ribs shank, hamburger boudin frankfurter ham hock pancetta salami. Jerky porchetta salami, fatback swine chicken pastrami beef ribs landjaeger biltong. Capicola prosciutto leberkas landjaeger. Flank turducken chuck pork loin drumstick tongue ground round ham hock fatback short ribs pancetta turkey. Shank beef ribs frankfurter ribeye cow fatback swine kielbasa biltong. Pork pork chop prosciutto pig.\nShoulder andouille hamburger sausage. Andouille tri-tip chicken kevin shankle shank, pancetta hamburger t-bone. Pancetta short loin meatloaf beef ribs. Turkey chuck strip steak rump brisket meatloaf tenderloin venison jowl pig hamburger sausage flank corned beef. Drumstick hamburger filet mignon chicken, porchetta ground round swine rump turkey strip steak.","created_at":"2017-10-17 13:40:27","updated_at":"2017-10-17 13:40:27"},{"id":4,"name":"Another","user_id":"1","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet massa tellus, ac faucibus urna. Donec eget risus elit, quis pellentesque purus. Ut purus nibh, elementum ac ullamcorper consequat, vehicula et risus. Integer venenatis mauris ut ante vestibulum ullamcorper auctor nisi varius. Sed at metus ligula. Phasellus semper, enim vitae rutrum lacinia, lacus leo aliquet tellus, eget euismod turpis lacus in velit. Donec et velit rhoncus tortor scelerisque volutpat. Integer mollis libero quis neque tempus ac auctor risus pretium. Nam a felis vel nibh malesuada sagittis nec nec quam. Aliquam sagittis vehicula laoreet. Nulla vulputate sodales fringilla. Vivamus tincidunt, orci nec luctus elementum, nulla dui tincidunt justo, id varius sapien libero ac ante. Integer quis tortor et nisl suscipit imperdiet ut quis elit. Pellentesque in nunc eget tellus dapibus tempus vitae id tortor. Aenean viverra, tortor sed eleifend facilisis, diam erat aliquet massa, sagittis accumsan augue nisl eu metus.","created_at":"2017-10-17 13:06:33","updated_at":"2017-10-17 13:06:33"},{"id":3,"name":"My task","user_id":"1","description":"Bacon ipsum dolor sit amet rump turkey spare ribs shank, hamburger boudin frankfurter ham hock pancetta salami. Jerky porchetta salami, fatback swine chicken pastrami beef ribs landjaeger biltong. Capicola prosciutto leberkas landjaeger. Flank turducken chuck pork loin drumstick tongue ground round ham hock fatback short ribs pancetta turkey. Shank beef ribs frankfurter ribeye cow fatback swine kielbasa biltong. Pork pork chop prosciutto pig.\nShoulder andouille hamburger sausage. Andouille tri-tip chicken kevin shankle shank, pancetta hamburger t-bone. Pancetta short loin meatloaf beef ribs. Turkey chuck strip steak rump brisket meatloaf tenderloin venison jowl pig hamburger sausage flank corned beef. Drumstick hamburger filet mignon chicken, porchetta ground round swine rump turkey strip steak.","created_at":"2017-10-17 13:00:26","updated_at":"2017-10-17 13:00:26"},{"id":2,"name":"Task 2","user_id":"1","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet massa tellus, ac faucibus urna. Donec eget risus elit, quis pellentesque purus. Ut purus nibh, elementum ac ullamcorper consequat, vehicula et risus. Integer venenatis mauris ut ante vestibulum ullamcorper auctor nisi varius. Sed at metus ligula. Phasellus semper, enim vitae rutrum lacinia, lacus leo aliquet tellus, eget euismod turpis lacus in velit. Donec et velit rhoncus tortor scelerisque volutpat. Integer mollis libero quis neque tempus ac auctor risus pretium. Nam a felis vel nibh malesuada sagittis nec nec quam. Aliquam sagittis vehicula laoreet. Nulla vulputate sodales fringilla. Vivamus tincidunt, orci nec luctus elementum, nulla dui tincidunt justo, id varius sapien libero ac ante. Integer quis tortor et nisl suscipit imperdiet ut quis elit. Pellentesque in nunc eget tellus dapibus tempus vitae id tortor. Aenean viverra, tortor sed eleifend facilisis, diam erat aliquet massa, sagittis accumsan augue nisl eu metus.","created_at":"2017-10-17 12:52:51","updated_at":"2017-10-17 12:52:51"},{"id":1,"name":"A task","user_id":"1","description":"Bacon ipsum dolor sit amet rump turkey spare ribs shank, hamburger boudin frankfurter ham hock pancetta salami. Jerky porchetta salami, fatback swine chicken pastrami beef ribs landjaeger biltong. Capicola prosciutto leberkas landjaeger. Flank turducken chuck pork loin drumstick tongue ground round ham hock fatback short ribs pancetta turkey. Shank beef ribs frankfurter ribeye cow fatback swine kielbasa biltong. Pork pork chop prosciutto pig.\nShoulder andouille hamburger sausage. Andouille tri-tip chicken kevin shankle shank, pancetta hamburger t-bone. Pancetta short loin meatloaf beef ribs. Turkey chuck strip steak rump brisket meatloaf tenderloin venison jowl pig hamburger sausage flank corned beef. Drumstick hamburger filet mignon chicken, porchetta ground round swine rump turkey strip steak.","created_at":"2017-10-17 12:52:29","updated_at":"2017-10-17 12:52:29"}]

I think, I could do something like https://craftcms.stackexchange.com/questions/20/how-can-i-retrieve-channel-data-in-json-format but would be nicer to do something like this on the Twig side

{% set entries = craft.entries.section('tasks') %}

and then have {{ entries }} just output as an array.

Is that a clear enough example?

Thanks.

[brandonkelly]

This is actually possible in Craft 3, thanks to all of the element query improvements. You can customize which columns get selected, and opt to have the data returned as arrays rather than models.

{% set entries = craft.entries.section('tasks').asArray().all() %}

[1stevengrant]

Nice!

[1stevengrant]

@brandonkelly is this available in Craft 3 now or coming further down the line?

[brandonkelly]

It's available now