Javascript/JQuery AJAX can't parse AJAX response

Question

I know there is are a tone of post on this but I can't seems to find them. Here is where I am being stupid:

I have an AJAX resqueting for an id and a integer (will be a margin apply on the DOM later on)

Here is the request:

$(function(){
    $("#divAccordion").accordion({
    //Accordion options here, not relevant
    }).sortable({
    //Other sortable options here, not relevant
    //This is the important part:
        update:
            function(event, ui){
                var data = $(this).sortable('toArray');
                $.ajax({
                    url:"prc.php",
                    type:"POST",
                    dataType:'JSON',/*--Added this also--*/
                    data:{sort:data},
                    contentType : "application/x-www-form-urlencoded;charset=UTF-8"
                }).done(
                    function(margin){
                        console.log(margin);//This log [sebastien20140804130001:45, sebastien20140804130002:30]
                        for(key in margin){
                            console.log(key+"=>"+margin[key]);
                        }
                    }
                );
            }
    });
});

Here is what I get in the console:

[sebastien20140804130001:45, sebastien20140804130002:30]
0=>[
1=>s
2=>e
3=>b
4=>a
...

See the problem? My response (margin) is a string and my for loop goes through each char. I was expecting something like this instead:

[sebastien20140804130001:45, sebastien20140804130002:30]
sebastien20140804130001=>45
sebastien20140804130002=>30

Just a side note I can't know I much 'key/value' pairs I will receive neither if the IDs will follow each other (numeric order) ([ID:MARGIN_TO_APPLY])

What I am aiming at is to be able to loop through each 'key/value' pair and apply something like this:

$('#'+key).css('margin-left', value);

If you guys needs any other information please ask in the comments I will provide them.

Thanks!

--EDIT--

Here is the server side code:

echo '{';/*--was [--*/
sortRN('rn_GLOBAL', 0);
echo '}';/*was ]--*/

function sortRN($dep, $i)
{
    if(isset($_POST['sort'][$i]) && $_POST['sort'][$i] != '')
    {
        $cnSort = new cConnexion('***', '***', '***', '***');
        if($cnSort->DBConnexion())
        {
            $query = "UPDATE ***.reunion SET rn_DEP = :DEP WHERE REPLACE(REPLACE(REPLACE(CONCAT('rn_', rn_SAMAORG, rn_DTSTART), ' ', ''), ':', ''), '-', '') = :ID";

            while(isset($_POST['sort'][$i]) && preg_match('#^.+[0-9]{4}$#', $_POST['sort'][$i]))
            {
                if($i > 0)
                {
                    echo ',';/*--Added this so there wouldn't always be a coma at the end--*/
                }

                switch($dep)
                {
                    case 'rn_GLOBAL':
                        $params = array('DEP'=>str_replace('rn_', '', $dep), 'ID'=>$_POST['sort'][$i]);

                        $rsSort = $cnSort->SecureExecute($query, $params);
                        if($rsSort)
                        {
                            echo '{"'.$_POST['sort'][$i].'":15}';/*--Changed every line like this to add {} and also removed the coma at the end--*/
                        }
                    break;
                    case 'rn_JRT':
                        $params = array('DEP'=>str_replace('rn_', '', $dep), 'ID'=>$_POST['sort'][$i]);

                        $rsSort = $cnSort->SecureExecute($query, $params);
                        if($rsSort)
                        {
                            echo '"'.$_POST['sort'][$i].'":30,';
                        }
                    break;
                    case 'rn_ACHAT':
                        $params = array('DEP'=>str_replace('rn_', '', $dep), 'ID'=>$_POST['sort'][$i]);

                        $rsSort = $cnSort->SecureExecute($query, $params);
                    if($rsSort)
                    {
                        echo '"'.$_POST['sort'][$i].'":45,';
                    }
                break;
                case 'rn_ADM':
                    $params = array('DEP'=>str_replace('rn_', '', $dep), 'ID'=>$_POST['sort'][$i]);

                    $rsSort = $cnSort->SecureExecute($query, $params);
                    if($rsSort)
                    {
                        echo '"'.$_POST['sort'][$i].'":45,';
                    }
                break;
                case 'rn_ASC':
                    $params = array('DEP'=>str_replace('rn_', '', $dep), 'ID'=>$_POST['sort'][$i]);

                    $rsSort = $cnSort->SecureExecute($query, $params);
                    if($rsSort)
                    {
                        echo '"'.$_POST['sort'][$i].'":45,';
                    }
                break;
                case 'rn_COMP':
                    $params = array('DEP'=>str_replace('rn_', '', $dep), 'ID'=>$_POST['sort'][$i]);

                    $rsSort = $cnSort->SecureExecute($query, $params);
                    if($rsSort)
                    {
                        echo '"'.$_POST['sort'][$i].'":45,';
                    }
                break;
                case 'rn_DIRECTION':
                    $params = array('DEP'=>str_replace('rn_', '', $dep), 'ID'=>$_POST['sort'][$i]);

                    $rsSort = $cnSort->SecureExecute($query, $params);
                    if($rsSort)
                    {
                        echo '"'.$_POST['sort'][$i].'":45,';
                    }
                break;
                case 'rn_INDUS':
                    $params = array('DEP'=>str_replace('rn_', '', $dep), 'ID'=>$_POST['sort'][$i]);

                    $rsSort = $cnSort->SecureExecute($query, $params);
                    if($rsSort)
                    {
                        echo '"'.$_POST['sort'][$i].'":45,';
                    }
                break;
                case 'rn_INFO':
                    $params = array('DEP'=>str_replace('rn_', '', $dep), 'ID'=>$_POST['sort'][$i]);

                    $rsSort = $cnSort->SecureExecute($query, $params);
                    if($rsSort)
                    {
                        echo '"'.$_POST['sort'][$i].'":45,';
                    }
                break;
                case 'rn_PROD':
                    $params = array('DEP'=>str_replace('rn_', '', $dep), 'ID'=>$_POST['sort'][$i]);

                    $rsSort = $cnSort->SecureExecute($query, $params);
                    if($rsSort)
                    {
                        echo '"'.$_POST['sort'][$i].'":45,';
                    }
                break;
                case 'rn_RED':
                    $params = array('DEP'=>str_replace('rn_', '', $dep), 'ID'=>$_POST['sort'][$i]);

                    $rsSort = $cnSort->SecureExecute($query, $params);
                    if($rsSort)
                    {
                        echo '"'.$_POST['sort'][$i].'":45,';
                    }
                break;
                case 'rn_STD':
                    $params = array('DEP'=>str_replace('rn_', '', $dep), 'ID'=>$_POST['sort'][$i]);

                    $rsSort = $cnSort->SecureExecute($query, $params);
                    if($rsSort)
                    {
                        echo '"'.$_POST['sort'][$i].'":45,';
                    }
                break;
                case 'rn_TEST':
                    $params = array('DEP'=>str_replace('rn_', '', $dep), 'ID'=>$_POST['sort'][$i]);

                    $rsSort = $cnSort->SecureExecute($query, $params);
                    if($rsSort)
                    {
                        echo '"'.$_POST['sort'][$i].'":45,';
                    }
                break;
                case 'rn_VENTE':
                    $params = array('DEP'=>str_replace('rn_', '', $dep), 'ID'=>$_POST['sort'][$i]);

                    $rsSort = $cnSort->SecureExecute($query, $params);
                    if($rsSort)
                    {
                        echo '"'.$_POST['sort'][$i].'":45,';
                    }
                break;
                case 'rn_CUSTOME':
                    $params = array('DEP'=>str_replace('rn_', '', $dep), 'ID'=>$_POST['sort'][$i]);

                    $rsSort = $cnSort->SecureExecute($query, $params);
                    if($rsSort)
                    {
                        echo '"'.$_POST['sort'][$i].'":45,';
                    }
                break;
                case 'rn_CRP':
                    $params = array('DEP'=>str_replace('rn_', '', $dep), 'ID'=>$_POST['sort'][$i]);

                    $rsSort = $cnSort->SecureExecute($query, $params);
                    if($rsSort)
                    {
                        echo '"'.$_POST['sort'][$i].'":30,';
                    }
                break;
                case 'rn_FAB':
                    $params = array('DEP'=>str_replace('rn_', '', $dep), 'ID'=>$_POST['sort'][$i]);

                    $rsSort = $cnSort->SecureExecute($query, $params);
                    if($rsSort)
                    {
                        echo '"'.$_POST['sort'][$i].'":45,';
                    }
                break;
                case 'rn_IC':
                    $params = array('DEP'=>str_replace('rn_', '', $dep), 'ID'=>$_POST['sort'][$i]);

                    $rsSort = $cnSort->SecureExecute($query, $params);
                    if($rsSort)
                    {
                        echo '"'.$_POST['sort'][$i].'":45,';
                    }
                break;
                case 'rn_MAG':
                    $params = array('DEP'=>str_replace('rn_', '', $dep), 'ID'=>$_POST['sort'][$i]);

                    $rsSort = $cnSort->SecureExecute($query, $params);
                    if($rsSort)
                    {
                        echo '"'.$_POST['sort'][$i].'":45,';
                    }
                break;
                case 'rn_PRD':
                    $params = array('DEP'=>str_replace('rn_', '', $dep), 'ID'=>$_POST['sort'][$i]);

                    $rsSort = $cnSort->SecureExecute($query, $params);
                    if($rsSort)
                    {
                        echo '"'.$_POST['sort'][$i].'":45,';
                    }
                break;
                case 'rn_SERV':
                    $params = array('DEP'=>str_replace('rn_', '', $dep), 'ID'=>$_POST['sort'][$i]);

                    $rsSort = $cnSort->SecureExecute($query, $params);
                    if($rsSort)
                    {
                        echo '"'.$_POST['sort'][$i].'":45,';
                    }
                break;
                case 'rn_VE':
                    $params = array('DEP'=>str_replace('rn_', '', $dep), 'ID'=>$_POST['sort'][$i]);

                    $rsSort = $cnSort->SecureExecute($query, $params);
                    if($rsSort)
                    {
                        echo '"'.$_POST['sort'][$i].'":45,';
                    }
                break;
                case 'rn_CAL':
                    $params = array('DEP'=>str_replace('rn_', '', $dep), 'ID'=>$_POST['sort'][$i]);

                    $rsSort = $cnSort->SecureExecute($query, $params);
                    if($rsSort)
                    {
                        echo '"'.$_POST['sort'][$i].'":30,';
                    }
                break;  
            }
            $i++;
        }

        $cnSort->DBDeconnexion();
        if(isset($_POST['sort'][$i]) && $_POST['sort'][$i] != '')
        {
            $ii = $i + 1;
            sortRN($_POST['sort'][$i], $ii);
        }
    }
    else
    {
        echo $cnSort->m_log->getMessageFR();
    }
}
}

Side note #2: The PHP script is updating the DB with the position of the JQuery sortable items then it echo the element ID and the value for the border.

--EDIT2--

I changed some of the code see code above /--Highlighted this way--/

What data structure did you have in your server-side script before encoding it as JSON? Looks like you just got an array containing two string values, and not key-values-pairs as you think … — C3roe
– C3roe, Commented Aug 8, 2014 at 19:24
It doesn't look like the server is encoding it as JSON at all. — Quentin
– Quentin, Commented Aug 8, 2014 at 19:25
Let me post the server side code maybe i'll help you guys out — Sebastien
– Sebastien, Commented Aug 8, 2014 at 19:27
@Quentin Did I had to do that? I just echoed the values I wanted I tough I'd be able to parse them into a structure similar to a PHP array on client side... — Sebastien
– Sebastien, Commented Aug 8, 2014 at 19:35
It is terribly important to specify the dataType option in the .ajax() call as 'json' and to echo json_encode() the data on the server side all in one go unless you're very confident about how you build JSON strings. As you iterate through, build it as a php array and then echo the entire thing json_encoded. — Malovich
– Malovich, Commented Aug 8, 2014 at 19:38

Rajkumar Madhuram · Accepted Answer · 2014-08-08 19:35:17Z

2

The response is not a valid JSON (Specification: http://json.org/). It sends an array, but each element is not a valid object. It should be something like this:

[{"sebastien20140804130001" : 45}, {"sebastien20140804130002": 30}]
Once you receive the response, you have to do a JSON.parse(response) to convert to a JSON object, or use the dataType: 'json' configuration so that jQuery does it for you automatically.

answered Aug 8, 2014 at 19:35

Rajkumar Madhuram

6843 silver badges9 bronze badges

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

2 Comments

Sebastien Over a year ago

I followed what you proposed but now my consol.log(margin) doesn't log anything... I'll try and make it work and post back.

Sebastien Over a year ago

Fixed it! I didn't put the dataType:'JSON' because I didn't want to send JSON I wanted to receive it. I formatted all the echoes in the switch case so it would echo something like {"sebastien20140804130001":45, "sebastien20140804130002":30} and before the loop on client side I do a margin = JSON.parse(margin);

Ilya Luzyanin · Accepted Answer · 2014-08-08 19:43:56Z

0

This is terribly wrong and you should by any means to structure your data as valid json and follow Rajkumar Madhuram's answer, but here you go, as an exsercise in regEx:

function(margin){
    var values = margin.match(/(\w+:\d+)+/);
    var keyValues = [];
    for (var i=0 ; i< values.length; i++) {
        var keyValue = values[i].split(":");
        keyValues.push({ key: keyValue[0], value: keyValue[1] });
    }
    // now you have an array with key-value pairs;
}

answered Aug 8, 2014 at 19:43

Ilya Luzyanin

8,1204 gold badges32 silver badges50 bronze badges

3 Comments

Leeish Over a year ago

My eyes. Oh my eyes are burning.

Ilya Luzyanin Over a year ago

Yeah, I know. It's just to follow TO style and fix problem on client side. Although it should be fixed on server

Sebastien Over a year ago

Thanks for this @IlyaLuzyanin but as you said I think I'll try to fix things on server side

Collectives™ on Stack Overflow

Javascript/JQuery AJAX can't parse AJAX response

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related