"Multi dimensional" JSON in javascript

Question

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)
}

That's not JSON, it's an object literal.

nnnnnn
– nnnnnn

2011-09-05 02:33:33 +00:00
Commented Sep 5, 2011 at 2:33 — nnnnnn
– nnnnnn, Commented Sep 5, 2011 at 2:33

c-smile · Accepted Answer · 2011-09-05 02:22:25Z

4

Replace this

return
        {
            content: el.REASON,
            ...

by this:

return  {
            content: el.REASON,
            ...

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

answered Sep 5, 2011 at 2:22

c-smile

27.6k8 gold badges66 silver badges91 bronze badges

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

Comments

Ray Toal · Accepted Answer · 2011-09-05 02:18:43Z

1

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).

answered Sep 5, 2011 at 2:18

Ray Toal

88.7k20 gold badges186 silver badges245 bronze badges

Comments

liammclennan · Accepted Answer · 2011-09-06 23:21:10Z

0

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.

edited Sep 6, 2011 at 23:21

answered Sep 5, 2011 at 2:27

liammclennan

5,3683 gold badges36 silver badges31 bronze badges

1 Comment

Dan Over a year ago

You are right, I had typo there. About your third line: I think it should be fixed in another way

minond · Accepted Answer · 2011-09-05 04:31:26Z

-1

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'
});

answered Sep 5, 2011 at 4:31

minond

293 bronze badges

1 Comment

Matthew Schinckel Over a year ago

Hmm. Fairly sure you don't need to do that. If your return is on a line by itself it will choke, but no need to put parens around braces.

Collectives™ on Stack Overflow

"Multi dimensional" JSON in javascript

4 Answers 4

Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related