Sending 2D JavaScript array to PHP via AJAX

Question

I want to send a 2D array to PHP via AJAX and then access the content in PHP. I have the following setup for creating the 2D array:

var data = [];
data['items1'] = ["item1_1", "item1_2"];
data['items2'] = ["item2_1", "item2_2"];

I then send this info to PHP via Ajax like this which works fine (I get to the case "my_php_case")

jQuery.ajax({
    type: "POST",
    url: ajax_site_url, 
    dataType: 'json',
    data: {
        action: "my_php_case",
        data: data,
    },
    success: function(response) { 
    },
});

Now I want to access say "items1" on the PHP side and tried the following which gave an empty result:

$items1 = $_POST['data']['items1'];

I have tried JSON.stringify on data and then use json_decode on PHP side but still not working. I can only find more complex cases online when searching and just want this simple case to work.

How can I send and access the data with my Ajax call?

Try to see the actual content of the $_POST variable by using var_dump() or print_r(). This docs about the .ajax() method (especially the data option description) may give you additional hints about why you have this: api.jquery.com/jquery.ajax — indyteo
– indyteo, Commented Feb 27, 2023 at 16:35
@indyteo, I don't see anything, where do the print_r or var_dump go? I don't find in console nor on screen. — eligolf
– eligolf, Commented Feb 27, 2023 at 16:41
Check the network tab. That will show you what is being sent and received. At this point you are probably just getting errors. — Jason K
– Jason K, Commented Feb 27, 2023 at 16:44
data['items1'] is not adding an item to an array, that is what you would do if data was an object literal. To add to an array use data.push(["item1_1", "item1_2"]) — Professor Abronsius
– Professor Abronsius, Commented Feb 27, 2023 at 16:54
@JasonK, As mentioned in the post I get no errors when sending the data. The problem is I don't know how to pack/unpack it. — eligolf
– eligolf, Commented Feb 28, 2023 at 5:13

Professor Abronsius · Accepted Answer · 2023-02-28 07:25:28Z

0

Arrays in Javascript are numerically indexed so you can't add string keys as it appears you are doing above. To use string keys change data to an Object Literal and then use JSON.stringify prior to sending the ajax request.

var ajax_site_url=location.href;
var data = {};
    data['items1'] = ["item1_1", "item1_2"];
    data['items2'] = ["item2_1", "item2_2"];
    
console.log( data );

jQuery.ajax({
    type: "POST",
    url: ajax_site_url,
    data: {
        action: "my_php_case",
        data: JSON.stringify( data ),
    },
    success:(res)=>alert('Success:\n'+res),
    error:(err)=>alert('Error:\n'+err)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Alternatively, using an array means in PHP you would not longer be able to access using items1 as per your requirement.

var ajax_site_url=location.href;
var data = [];
    data.push( ["item1_1", "item1_2"] );
    data.push( ["item2_1", "item2_2"] );
    
console.log( data );

jQuery.ajax({
    type: "POST",
    url: ajax_site_url,
    data: {
        action: "my_php_case",
        data: JSON.stringify( data ),
    },
    success:(res)=>alert('Success:\n'+res),
    error:(err)=>alert('Error:\n'+err)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

In response to your comments I put together this simple demo of the above. When executed this will output Items1 Item_1=item1_1 Items2 Item_2=item2_2 to the browser. The Javascript is virtually identical to that shown above except for a modified callback function - otherwise it is the same.

<?php
    error_reporting( E_ALL );
    
    if( $_SERVER['REQUEST_METHOD']=='POST' && isset( 
        $_POST['action'],
        $_POST['data']
    )){

        $json=json_decode( $_POST['data'] );
        
        echo 'Items1 Item_1=' . $json->items1[0] . PHP_EOL;
        echo 'Items2 Item_2=' . $json->items2[1];
        
        exit();
    }
?>
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Basic JSON & AJAX</title>
        <script src='//code.jquery.com/jquery-latest.js'></script>
    </head>
    <body>
        <output></output>
        <script>
        
            var ajax_site_url=location.href;
            var data = {};
                data['items1'] = ["item1_1", "item1_2"];
                data['items2'] = ["item2_1", "item2_2"];
                
            console.log( data );

            jQuery.ajax({
                type: "POST",
                url: ajax_site_url,
                data: {
                    action: "my_php_case",
                    data: JSON.stringify( data ),
                },
                success:(res)=>{
                    console.info(res)
                    document.querySelector('output').textContent=res;
                },
                error:(err)=>alert('Error:\n'+err)
            });
            
        </script>
    </body>
</html>

edited Feb 28, 2023 at 7:25

answered Feb 27, 2023 at 17:02

Professor Abronsius

33.9k5 gold badges36 silver badges49 bronze badges

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

4 Comments

indyteo Over a year ago

I think you should encode the whole data object as JSON, instead of data.data (I agree that this naming choice may lead to unclear situations...)

eligolf Over a year ago

I tried using your first approach and then print the data in PHP as $_POST['data']['items1'] but get "{" as result. Do I need to do something in PHP to unpack the stringified variable?

eligolf Over a year ago

I also tried to json_decode on php like this: $data = json_decode($_POST['data']); and then use $data['items1'] but that gives me an empty result.

Jason K Over a year ago

In the php you need to do a $data = json_decode($_POST['data'], True); To put it an an associated array.

Collectives™ on Stack Overflow

Sending 2D JavaScript array to PHP via AJAX

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related