How to pass multidimensional array via ajax and display it?

Question

I'm creating my project using OOP. I need to pass all the values inserted in the database in the form of array. And it's a multidimensional array. SO when I pass now via ajax as a 'text' datatype it displays array in console.log(). But I'm unsure if this is the correct way and how to display the value in a table form in jquery.

Below are the functions where the values returned to the object in another page.

public function selectType()
    {

        $sql="SELECT * FROM car_type";
        $stmt =connection::$pdo->prepare($sql);
        $stmt->execute();
        $carType=array();

        while($row = $stmt->fetch())
        {
          array_push($carType,$row['car_type']);
        }
        return $carType;
    }

    public function selectMaker()
    {

        $sql="SELECT * FROM car_maker";
        $stmt =connection::$pdo->prepare($sql);
        $stmt->execute();
        $carMaker=array();

        while($row = $stmt->fetch())
        {
          array_push($carMaker,$row['car_maker']);
        }
        return $carMaker;
    }

ANd this is how I'm fetching the values to be passed to another page to be displayed to the user.

$setting = new setting($car_type,$car_maker,$rental_type,$rental);
//$setting->connection;
$setting->addCarType();
$setting->addCarMaker();
$setting->addRentalBy();
$carType=$setting->selectType();
$carMaker=$setting->selectMaker();


$json=array();
array_push($json,array("type"=>$carType,"maker"=>$carMaker));
echo $json;

Finally ajax to fetch and display data

$("#submit").on("click",function()
    {

          $("#set_setting").submit(function(){            

            data = $(this).serialize()
            $.ajax({
              type: "POST",
              dataType: "html",
              url: "submit_setting.php", //Relative or absolute path to response.php file
              data: data,
              success: function(data) {
              //hide the form
              $("#set_setting").slideUp("slow");
              //show the result
              for (i = 0; i < data.length; i++) {
                  console.log(data);//outputs array
                  $(".the-return").html(data);
              }


              }

            });
            return false;

          });

        });

Answer 1

You need to pass array as JSON and post it using name value pairs.

var data = {a:{'foo':'bar'},b:{'this':'that'}};
$.ajax({ url        : '/',
         type       : 'POST',                                              
         data       : {'data':JSON.stringify(data)},
         success    : function(){ }
       });

And in backend (PHP):

$data = json_decode($_POST['data']);
print_r($data);
// Result:
// Array( "a" => Array("foo"=> "bar"), "b" => Array("that" => "this"))