$.getJSON not working in jQuery 1.10.2?

Question

I’m trying to load some JSON with jQuery and I'm getting mixed results depending on what version of jQuery I am using.

This first page (http://iaviglobal.com/json-3.html) uses jQuery 1.8.3 and it works just fine! All of the content on that page is pulled from a .json file on my server.

My second page (http://iaviglobal.com/json-4.html), however, uses jQuery 1.10.2 and jQuery Migrate 1.2.1. My JSON call doesn’t work here! Here is my code:

  $.getJSON('/json/products.json', function(data) {
  alert ("json loaded");
        var output="";
        for (var i in data.products) {
            output+="<div class='product-line-item wrapper'><div class='product-image'><img src='/img/" + data.products[i].fileName + ".png alt='' width='150' height='100'></div><div class='product-model'>" + data.products[i].modelNumber + "</div><div class='product-specs'><ul><li>" + data.products[i].brightness + " Lumens</li><li>" + data.products[i].resolution + " Resolution</li><li>" + data.products[i].contrast + " Contrast Ratio</li></ul></div><a class='get-a-quote trigger-quote-modal'>Get a Quote</a><a class='download-pdf' href='/download/" + data.products[i].fileName + ".pdf'>Download PDF</a></div>";
        }

        output+="";
        document.getElementById("product-line-container").innerHTML=output;
  });

Can anyone explain to me what changed? I assume something became deprecated since 1.8.3 but I can't figure out what.

I created a third page here: http://iavi.com/glored/json-5.html. This page is stripped down and only includes a script to notify me if jQuery was successfully loaded or not and then the JSON code verbatim from http://api.jquery.com/jquery.getjson/ combined with jQuery 1.10.2 and jQuery Migrate 1.2.1.

$.getJSON( "ajax/test.json", function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    items.push( "<li id='" + key + "'>" + val + "</li>" );
  });

  $( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).appendTo( "body" );
});

Still doesn’t work!

The only thing the console says “Uncaught TypeError: Cannot call method ‘getJSON’ of undefined”

Answer 1

It seems like it could be a syntax error, try using jQuery in no-conflict mode: jQuery(document).ready(function ( $ )