jQuery AJAX JSON object not working

Question

I'm having some trouble with my AJAX request. The problem is with the JSON object named html.

AJAX request:

$.ajax({ 
    url      : 'index',
    type     : 'POST',
    dataType : 'json', // Makes no difference
    data     : {
        method   : 'saveModule',
        html     : content
    }, 
    success : function(i){
        console.log(i);
    } 
})

I know it's about the html JSON object because if I remove it the request will succeed.

This is what it looks like with firebug's console.log();

the object is stored within [ ], is that normal?

[Object { name="Home", link="/home"}, Object { name="Work", link="/work", childs=[3]}, Object { name="Contact", link="/contact", childs=[2]}]

The childs are JSON objects as well.

Please help, it's driving me crazy!

The error I'm getting with the Web Console:

[11:58:47.215] uncaught exception: [Exception... "Could not convert JavaScript argument"  nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)"  location: "JS frame :: http://localhost/mcms/htdocs/templates/resources/js/jquery-1.6.3.min.js :: <TOP_LEVEL> :: line 5"  data: no]

The content var is made from this:

 var content =  mcms.module.analyse(obj); // obj is a dom element, in this case a UL with sub ULs inside LIs

The function itself:

 analyse : function (that) {
        return $(that).children('li').map(function() {
            var b = {
                name: $(this).children('a').text(), 
                link: $(this).children('a').attr('href')
            };

            if ($(this).children('ul').size() > 0) {
                b.childs =  mcms.module.analyse($(this).children('ul'));
            } 
            return b;
        });
    }

When you say "This is what is looks like with firebug's console.log()" are you talking about the output from the `console.log(i)` statement in your ajax success handler? If not, then what? — nnnnnn, Nov 28 '11 at 10:47
Yes that's it, but only the part that matters, the content var — Sem, Nov 28 '11 at 10:55

score 1 · Accepted Answer · answered Nov 29 '11 at 21:00

I've found the problem and fix!

The problem was that the .map() function returns an array around the JSON object. So I made a JSON object with a counter around the map to capture it and return it :)

Thanks for helping everyone!

analyse : function (that) {
        var b = {};
        var x = 0;
        $(that).children('li').map(function() {
            b[x] = {
                name: $(this).children('a').text(), 
                link: $(this).children('a').attr('href')
            };

            if ($(this).children('ul').size() > 0) {
                b[x].childs =  mcms.module.analyse($(this).children('ul'));
            } 
            x++;
        });
        return b;
    }

score 0 · Answer 2 · answered Nov 28 '11 at 10:48

0

I'm not so sure about the method parameter. If that is the method you are looking to call, you can as well include that in your URL, right?

answered Nov 28 '11 at 10:48

Arindam

998
1
8
20

score 0 · Answer 3 · edited May 23 '17 at 12:27

Well, your current call to $.ajax doesn't look exactly right. It should be something along the lines of:

$.ajax({ 
    url      : 'index',
    type     : 'POST',
    data     : <data to be sent>
    dataType : <Default: Intelligent Guess (xml, json, script, or html)>
    success : function(i){
        console.log(i);
    } 
})

More info on the jQuery website: http://api.jquery.com/jQuery.ajax/

EDIT

Ok, I see you corrected the call. This looks better now. Where does content come from and what's in it before it is converted into a JSON object?

EDIT2

Well, I think this answer should be of help to you: Post Nested Object to Spring MVC controller using JSON

Added the info where I make the content var – Sem Nov 28 '11 at 11:17 — Sem, Nov 28 '11 at 11:17

jQuery AJAX JSON object not working

3 Answers3