Vue.js and JSON

Hi folks, I am pretty new to Grav and I really like it so far. One thing that I cannot get my head around is how to fetch JSON data from an external source and then displaying it. I am using Vue.js to fetch a proxy PHP via Ajax to get the JSON Object. However when I want to output it, I only get empty objects. When I try this script stand-alone (just a simple html file) - without using GRAV CMS, it works perfectly. I am not that experienced with all that stuff so I really would appreciate if someone can help me.
Thanks in advance!

You are getting the JSON from the Grav site itself, or from an external resource?

No, I am getting the JSON through a php proxy file because of the Cross Domain policy I cannot directly pull in the JSON from the external source. So - basically you’re right. The source is external, but routed to a php file (proxy.php) which has been placed in the root of the grav install directory. Then I make the Ajax call directly to that proxy.php file.

In this case I don’t think Grav is interfering in any way, as the PHP file that you query is out of Grav itself. You should check what’s the problem point, the PHP file or the JS?

I think the problem must come from Grav itself because when I try the the whole thing without the CMS ( like as an regular webpage) it just works fine. So I think it has something to do with handing over the received JSON from Javascript into the Twig templates. Maybe there is some filtering etc. going on ?

Twig is executed server-side, while Javascript runs on the client side, so there’s no interference between the two.

Inspect the JSON you get using the browser developer tool, and inspect the request you sent, so you can check where is the problem.

Thanks for this - I already tried it. The funny thing is, even console.log gives me the full object with content but as soon as I want to output it to the page, it’s empty :slight_smile: Maybe some weird encoding/utf problem?