JSON/jQuery Syntax issue?

Question

I'm trying to read a list of images from a folder to create DIVs with image backgrounds (for use as an image slider). The jQuery I've written is as follows:

$.getJSON('../functions.php', function(images) {
  images.each( function() {
    $('#main').prepend('<div class="slider" style="background-image:url(' + ' (this) + ');"></div>');
  });
});

This isn't working, unfortunately... The error message I get in console is:

Uncaught SyntaxError: Unexpected token ILLEGAL

What am I doing wrong? Thanks!

Ian · Accepted Answer · 2012-11-03 04:40:53Z

3

The syntax highlighting in SO gave me the clue that you need to change it to this:

$('#main').prepend('<div class="slider" style="background-image:url(' + this + ');"></div>');

You had an extra quote in there (and don't need the () around this...although it wouldn't hurt.

UPDATE:

After the quoting issue was taken care of and you received the other ERROR, the problem seemed to be that your images JSON was trying to be iterated over with .each, which cannot be used on an object literal. .each is used either on a jQuery object (so wrap images with $()) or with the call to iterate over objects/arrays ($.each()). You need to use something like:

$.each(images, function () {    // <---- I prefer
// or
$(images).each(function () {

edited Nov 3, 2012 at 4:40

answered Nov 3, 2012 at 4:33

Ian

51k13 gold badges104 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

adeneo Over a year ago

You need to wrap it, $(images).each() or $.each(images, function...

Ian Over a year ago

@adeneo Although not technically different, I would use $.each(images)

adeneo Over a year ago

$.each Is supposedly a general iterating function that takes pretty much anything, while $(element).each() only iterates jQuery objects, but then again almost anything wrapped in $() is a valid jQuery object.

Daedalus Over a year ago

@Ian Reason for down-vote? You had 4719 and now you have 4728.

Ian Over a year ago

@NaOH So, the $.each method is meant for arrays/objects - api.jquery.com/jQuery.each ...while the $(selector).each is meant to iterate over the matched DOM elements. In your case, if you used $(images), you're wrapping the array in a jQuery object (which I'm not entirely sure what actually happens with that situation, other than the fact that it still works). So it will still iterate through the items, but it's not the "best"...I'm not sure what word to use.

|

Daedalus · Accepted Answer · 2012-11-03 05:11:13Z

You don't close your quote properly. Aside from that, assuming that images is an array, you need to wrap it in the jQuery object in order to get access to the object's methods, $.each() being one of them. Otherwise, as @Ian has already stated, you could use $.each(array, function() { //do stuff }); in a different light, and simply pass the array as the first variable, with whatever you do with it with an anonymous function.

As you said previously you were color-blind, as syntax-highlighting is then useless to you, I would recommend you at least count your quote pairs. On heavily verbose code.. this would become difficult.. so the only other thing I can suggest is an IDE(integrated development environment), such as NetBeans(what I personally use).

$.getJSON('../functions.php', function(images) {
    $(images).each( function() {
        $('#main').prepend('<div class="slider" style="background-image:url(' + this + ');"></div>');
    });
});

Collectives™ on Stack Overflow

JSON/jQuery Syntax issue?

2 Answers 2

11 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related