Target inline JSON using jQuery .getJSON or similar method

Question

I am attempting to get data from an inline array wrapped in a <script> tag using jQuery's .getJSON method. As far as I am reading in documentation (http://api.jquery.com/jquery.getjson/), .getJSON requires a URL and external file to call from.

$.getJSON('items.js', function(data) {});

How would I use either this method or another one to specifically target an inline array (without an external file), such as the one below:

  <script type="application/json">   
   {
    "items": {
        "blue": {
          "a": "a",
          "b": "b",
          "c": "c"
        }
     }
   }
  </script>

Thanks!

Are you able to change the contents of the script tag? `var myJson = ...;`? — Matthew, Sep 25 '15 at 20:22
Why would you store the JSON this way? Since it is hard-coded, why not just hard-code it in your script like: `var myVar={"items":...` ? — Jonathan M, Sep 25 '15 at 20:22
It's not hardcoded. I am writing it using ``echo json_encode($Array, JSON_PRETTY_PRINT)`` — David Lerner, Sep 25 '15 at 20:23
Doesn't seem clean to wrap the PHP echo'd array with a var xyz=. If there's no option for this I will do it, though — David Lerner, Sep 25 '15 at 20:25

score 3 · Accepted Answer · answered Sep 25 '15 at 20:34

You can't put JSON by itself in a script tag, it has to be valid Javascript statements. Assign the JSON to a variable name:

<script>
var data = {
    "items": {
        "blue": {
          "a": "a",
          "b": "b",
          "c": "c"
        }
     }
};
<script>

Then the rest of your code can use data to access the value.

score 1 · Answer 2 · answered Sep 25 '15 at 20:33

1

It's better to store this data into a JavaScript object.

Do something like this:

<script type="text/javascript">
    var jsonData = <?php echo json_encode($dataArray, JSON_HEX_TAG);?>;
</script>

answered Sep 25 '15 at 20:33

Cameron

1,524
11
21

Target inline JSON using jQuery .getJSON or similar method

2 Answers2