Is there any different calling JSON directly from visualforce page and javascript Static Resource?

Question

I create one javascript file and call JSON from there. Before I use JSON, I use hardcode data and it works. But I try to load data using $JSON, somehow it does not work. Check the code below

$(function(){

  function drawStackBar(){
    console.log('@ draw ');

    $.getJSON("{!$Page.JSONFile}", {"core.apexpages.devmode.url" :'0'}, function(data) {
      var jsonData=data;
      console.log(' jsonData '+jsonData);
    });
  }

  drawStackBar();
});

It only print until '@ draw'. I already checked the JSON file manually, it contains the data. What did I do wrong? Last time I remember, I put the function in Visualforce and it worked. Is it different if we put the function in separate javascript and store it in Static Resource?

Thanks a lot.

Answer 1

The first argument for getJSON needs to be a URL according to the docs here:

http://api.jquery.com/jquery.getjson/

You should wrap your page in a URLFOR like such:

$.getJSON({!URLFOR($Page.JSONFile)})

If your JSON doesn't ever change, you should consider using a static resource. I'm not sure if you can even actually use an apex page like you're describing since the request to that page may return things that aren't JSON.

Answer 2

Check with two things:-

1. Validate that your page is loading jquery properly
2. Set contenttype attribute of your page (having json data) with mime type for javascript ( contentType="application/javascript" )

Following works for me:-

Main page:-

<apex:page standardController="Contact" showHeader="false" sidebar="false">
    <apex:includeScript  value="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"/>

    <script>
        jQuery( document ).ready(function() {
            function drawStackBar(){
                console.log('@ draw ');
                jQuery.getJSON("{!$Page.JSONFile}", {"core.apexpages.devmode.url" :'0'},  function(data) {
                    var jsonData=data;
                    console.log(' jsonData '+jsonData);
                });
            }
            drawStackBar();
        });
    </script>
</apex:page>

JSON Page:-

<apex:page contentType="application/javascript">{
    "id": 1,
    "name": "A green door",
    "price": 12.50
}
</apex:page>