Not Building jQuery ajax data correctly

I have the following js code in my aspx page:

                    $.ajax({
                        type: 'POST',
                        url: '/Reporting/landing.aspx/UpdateUserReportingSettings',
                        data: "{ 'reportingSettings' :" + columns.join() + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        beforeSend: function (xhr, opts) {
                        },
                        success: function (data) {
                            window.top.location.href = "landing.aspx";
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            alert('Error Message' + thrownError);
                            alert('error' + xhr.responseText);
                       }
                    });

The columns are built up above this as so:

                    $('#currentColumnsList').each(function () {
                        // this is inner scope, in reference to the .phrase element
                        var column = '';
                        $(this).find('li').each(function () {
                            // cache jquery var
                            var current = $(this);
                            // check if our current li has children (sub elements)
                            // if it does, skip it
                            // ps, you can work with this by seeing if the first child
                            // is a UL with blank inside and odd your custom BLANK text
                            if (current.children().size() > 0) {
                                return true;
                            }
                            // add current text to our current phrase
                            column += (current.text() + ',');
                        });
                        // now that our current phrase is completely build we add it to our outer array
                        columns.push(column);
                    });

I then have a Web Method on code behind page as below:

    [WebMethod]
    public static void UpdateUserReportingSettings(string reportingSettings)
    {
        string columns = reportingSettings;

        //more code
    }

If I change the data line as below I can hit a breakpoint in the webmethod and the reportingSettings string will be test as expected:

data: "{ 'reportingSettings' : 'test' }",

If I alert columns.join() - I get the comma separated values something line columnA, columnB etc - what is the best way to get this passed acorss to the Code Behind WebMethod in the reportingSettings string?