Dan
Dan

Reputation: 57901

"Multi dimensional" JSON in javascript

I can create a jquery object inline like this (this code is working)

$('#tip').qtip({
            content: el.REASON,
            position: {
                corner: {
                    target: 'rightMiddle',
                    tooltip: 'leftMiddle'
                }
            },
            style: {
                tip: {
                     corner: 'leftMiddle',
                },
                border: {
                    radius: 11,
                    width: 4
                },
                name: 'red'
            },
            show: {
                ready: true, 
                effect: { type: 'slide' }
             },
            hide: {
                when: { target: jq, event: 'click' },
                        effect: function() {
                             $(this).fadeTo(200, 0);
                        }
            }
        })

now I want to move this JSON to a function, because I have multiple constructors in my code (this code is not working)

function qtipJSON(el, jq) {
    return
        {
            content: el.REASON,
            position: {
                corner: {
                    target: 'rightMiddle',
                    tooltip: 'leftMiddle'
                }
            },
            style: {
                tip: {
                     corner: 'leftMiddle',
                },
                border: {
                    radius: 11,
                    width: 4
                },
                name: 'red'
            },
            show: {
                ready: true, 
                effect: { type: 'slide' }
             },
            hide: {
                when: { target: jq, event: 'click' },
                        effect: function() {
                             $(this).fadeTo(200, 0);
                       }
            }
        }   
};

$('#tip')(qtipJSON(el, qj))

My error is

Uncaught SyntaxError: Unexpected token {

I've noticed that it's because of nested jsons.

WORKING:

function a(){
return {sdasda:'asda',sdasd:'asdas'}
}

for(i in a()){
document.write(i)
}

ALSO WORKING:

function a(){
return {sdasda:'asda',sdasd:'asdas', aa:{sds:'1212', sddss:'2222'}}
}

for(i in a()){
document.write(i)
}

Upvotes: 1

Views: 270

Answers (4)

liammclennan
liammclennan

Reputation: 5368

The problem with your final example is a missing : after aa. It should be

return {sdasda:'asda',sdasd:'asdas', aa: {sds:'1212', sddss:'2222'}}

Your function function qtipJSON(el, jq) is missing a semicolon at the end of the return.

As others have mentioned, the problem is the 'return' keyword on a line by itself. When you have a problem like this one try JSLint. It would have reported this error.

Upvotes: 0

minond
minond

Reputation: 29

javascript will assume you forgot a semi-column and give you this:

return {;
    par: 'val'
});

Which won't work. What you should do is wrap your return value/object in parenthesis, like this:

return ({
    par: 'val'
});

Upvotes: -1

c-smile
c-smile

Reputation: 27460

Replace this

return
        {
            content: el.REASON,
            ...

by this:

return  {
            content: el.REASON,
            ...

and welcome to the club of people injured by JS semicolon injection.

Upvotes: 4

Ray Toal
Ray Toal

Reputation: 88388

You cannot end a line with return if you want to return an object literal because of implicit semicolon injection.

By moving the opening left brace to the same line as the return it will work.

Here is a slight tweak of what you have: http://jsfiddle.net/FqCVD/ (I made some string literals to compensate for undefined variables).

Upvotes: 1

Related Questions