parseJSON error (jQuery 1.7.2)

Question

I am attempting to parse a JSON object located on another page on my website. The page is a hosted ecommerce platform, so I don't have server side access or control over certain elements on page.

I have some code that i'm using that is returning a strange error. I've tested this snippet (with a different URL of course) on another site running the same platform and it does it fact work.

website: http://www.falcontechjax.com

$.get('no-risk-diagnostic-2.aspx', function(data) {
var prodImgDetail = $.parseJSON($(data).find("#imginfo").html());
console.log(prodImgDetail);
});

On that page, there is a div container with the id "imginfo, that contains a JSON object.

<div id="imginfo" style="display:none;">{gallery : [{thumbnail : '/images/products/thumb/pipe.jpg', display : '/images/products/display/pipe.jpg', detailed : '/images/products/detail/pipe.jpg', alt : '', title : '' },{thumbnail : '/images/products/thumb/logo_printres1.jpg', display : '/images/products/display/logo_printres1.jpg', detailed : '/images/products/detail/logo_printres1.jpg', alt : 'PC Computer Diagnostic &amp; Repair in Jacksonville FL', title : '' }],active : {thumbnail : '/images/products/thumb/pipe.jpg', display : '/images/products/display/pipe.jpg', detailed : '/images/products/detail/pipe.jpg', alt : '', title : '' }}</div>

The error I get when I run it is:

Uncaught SyntaxError: Unexpected token g jquery-1.7.2.min.js

update

Just to advise everyone, there is a version of this setup which works on another site on the same platform as mine:

Site: www.allvintagegames.com

$.get( "nes-adventures-of-bayou-billy.aspx", function( data ) {
        var imgThumb, imgDisplay, imgDetailed, imgAlt, imgTitle;
        var mycrap = $.parseJSON($(data).find("#imginfo").html());   
        //img information
        $.each(mycrap.gallery, function(i, object) {
               //alert(object);
               imgThumb = object.thumbnail;
               imgDisplay = object.display;
               imgDetailed = object.detailed;
               imgAlt = object.alt;
               imgTitle = object.title;
        });
        //product information
        var prodinf = $.parseJSON($(data).find("#iteminfo").html());
               var infoLowprice = prodinf.lowprice;
               var infoId = prodinf.id;
               var infoName = prodinf.name;
               var infoCaption = prodinf.caption;
               var infoPrice = prodinf.price;
               var infoSaleprice = prodinf.saleprice;
               var infoCode = prodinf.code;
               var infoOrderable = prodinf.orderable;                
               $("body").append("<img src='"+imgThumb+"' />");
               $("body").append("<img src='"+imgDisplay+"' />");
               $("body").append("<img src='"+imgDetailed+"' />");
               $("body").append("<br />");
               $("body").append(infoLowprice + "<br/>");
               $("body").append(infoId + "<br/>");
               $("body").append(infoName + "<br/>");
               $("body").append(infoCaption + "<br/>");
               $("body").append(infoPrice + "<br/>");
               $("body").append(infoSaleprice + "<br/>");
               $("body").append(infoCode + "<br/>");
               $("body").append(infoOrderable + "<br/>");
});

This last example includes another object (#iteminfo contents) which is reference on the applicable page, just under the #imginfo div.

Any help figuring this out would be most appreciated!

Answer 1

As Felix King says, the JSON text is not properly formatted. You can see it if you try this in your debug console:

JSON.parse('{gallery: "foo"}')

and then this:

JSON.parse('{"gallery": "foo"}')

You'll see that when the key names are unquoted it doesn't work, which is what your JSON string has. One option is to instead use eval() to parse the string. Using eval is a terrible idea generally though, as it puts the code in your page at the mercy of whatever the server returns, which could be malicious code.