Ajax: jsに移すと配列がおじゃんになるのを阻止したいです

Question

開発環境

デバイス->macbook air
実行->mamp(象のアイコン)

問題点

このスレッドの続きです。質問案件が別なのと、コードの量が膨大なので、こちらに分けます。
ajaxを利用して、画面遷移なしでphpでDBから得たデータをjsに返すコードを作ってます。
返す際、渡すデータが30以上あるので、phpで一旦配列に入れてからjson処理してます。
そして、jsで解凍、、と言う風にしたかったのですが、jsで受け取った値で例えばresponse[2]とか指定すると、[12,13,14]と言う配列があったとして2を取ってきます。本当に欲しい値は14です。この現象どうすれば解決できるのでしょうか？よろしくお願いします。おそらくですが、jsについた頃には配列ではなく文字列として認識されているかもしれません...

コード

(demo.js)

const atkId = '322';
const difId = '350';

$.ajax({
    type:'post',
    url:'http://localhost:8888/demo.php',
    data:{'func':'get_context',atkId:atkId,'difId':difId},
    datatype : "json",
})
.done(function(response) { //正常に処理が完了した時
    //成功した時に、計算用関数（下にあるやつ）を実行するようにします！
    element.innerHTML = "<p>"+response[2]+"</p>";


})
.fail(function(xhr) {  
    alert("失敗！");

})
.always(function(xhr, msg) { 

});

(demo.php)

<?php

function get_context($atk_name,$dif_name){
    try {

        /* リクエストから得たスーパーグローバル変数をチェックするなどの処理 */

        // データベースに接続
        $pdo = new PDO(
            'mysql:dbname=----;host=------;charset=utf8mb4',
            '------',
            '------',
            [
                PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
                PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
            ]
        );

        $stmt =$pdo->prepare('SELECT * FROM yokai_data WHERE id = :id');
        $stmt->bindValue(':id', $atk_name);
        $stmt->execute();
        foreach($stmt as $row)
        {
        $atkStatus_a_h = (int)$row['status_a_h'];//dif
        $atkStatus_a_a = (int)$row['status_a_a'];
        $atkStatus_a_m = (int)$row['status_a_m'];
        $atkStatus_a_d = (int)$row['status_a_d'];
        $atkStatus_a_s = (int)$row['status_a_s'];
        $atkStatus_b_h = (int)$row['status_b_h'];
        $atkStatus_b_a = (int)$row['status_b_a'];
        $atkStatus_b_m = (int)$row['status_b_m'];
        $atkStatus_b_d = (int)$row['status_b_d'];
        $atkStatus_b_s = (int)$row['status_b_s'];
        $atkSkill = $row['skill_name'];//dif
        $weapon_a = $row['weapon_a'];//none
        $weapon_m = $row['weapon_m'];//none
        $atkName = $row['yokai_name'];//dif
        $atkVisu = $row['visu'];//dif
        $spe_type = $row['spe_type'];//none
        $spe_damage = (int)$row['spe_damage'];
        $spe_num = (int)$row['spe_num'];
        $spe_name = $row['spe_name'];
        }
    
        $stmt =$pdo->prepare('SELECT * FROM weapon WHERE weapon_name = :wea');//ここは、weaponaゾーン difは必要ないのだ
        $stmt->bindValue(':wea', $weapon_a);
        $stmt->execute();
        foreach($stmt as $row)
        {
        $weapon_a_dam = (int)$row['damage'];//武器のデータはatkの特権
        $weapon_a_num = (int)$row['num'];//idじゃなくってさっき手に入れたデータをwhereにしないといけない
        }
        $stmt =$pdo->prepare('SELECT * FROM weapon WHERE weapon_name = :wea');//ここはweaponmゾーン 
        $stmt->bindValue(':wea', $weapon_m);
        $stmt->execute();
        foreach($stmt as $row)
        {
        $weapon_m_dam = (int)$row['damage'];
        $weapon_m_attribute = $row['attribute_type'];
        $weapon_m_heal = (int)$row['heal'];
        }
  
        //したからdifゾーンだぞ
        $stmt =$pdo->prepare('SELECT * FROM yokai_data WHERE id = :id');
        $stmt->bindValue(':id', $dif_name);
        $stmt->execute();
        foreach($stmt as $row)
        {
            $difStatus_a_h = (int)$row['status_a_h'];//dif
            $difStatus_a_a = (int)$row['status_a_a'];
            $difStatus_a_m = (int)$row['status_a_m'];
            $difStatus_a_d = (int)$row['status_a_d'];
            $difStatus_a_s = (int)$row['status_a_s'];
            $difStatus_b_h = (int)$row['status_b_h'];
            $difStatus_b_a = (int)$row['status_b_a'];
            $difStatus_b_m = (int)$row['status_b_m'];
            $difStatus_b_d = (int)$row['status_b_d'];
            $difStatus_b_s = (int)$row['status_b_s'];
            $difSkill = $row['skill_name'];//dif
            $difName = $row['yokai_name'];//dif
            $difVisu = $row['visu'];//dif
        }
        
        $atkArray =array($atkStatus_a_h,$atkStatus_a_a,$atkStatus_a_m,$atkStatus_a_d,$atkStatus_a_s,$atkStatus_b_h,$atkStatus_b_a,$atkStatus_b_m,$atkStatus_b_d,$atkStatus_b_s,$atkSkill,$atkName,$atkVisu,$weapon_a,$weapon_m,$spe_type,$spe_damage,$spe_num,$spe_name);

        $weaponArray =array($weapon_a_dam,$weapon_a_num,$weapon_m_dam,$weapon_m_attribute,$weapon_m_heal);

        $difArray =array($difStatus_a_h,$difStatus_a_a,$difStatus_a_m,$difStatus_a_d,$difStatus_a_s,$difStatus_b_h,$difStatus_b_a,$difStatus_b_m,$difStatus_b_d,$difStatus_b_s,$difSkill,$difVisu,$difName);
            
        $combinedArray =array_merge($atkArray, $difArray, $weaponArray);

        

        $combinedArray_json = json_encode($combinedArray,JSON_UNESCAPED_UNICODE);
        return $combinedArray_json;

        //print_r($combinedArray_json);
        
        $pdo =null;
      
      } catch (PDOException $e) {
        header('Content-Type: text/plain; charset=UTF-8', true, 500);
        exit($e->getMessage()); 
      
    } catch (PDOException $e) {
        header('Content-Type: text/plain; charset=UTF-8', true, 500);
        exit($e->getMessage()); 
      
      }

}

$func = $_POST['func'];
$atk_name= $_POST['atkId'];
$dif_name= $_POST['difId'];
echo $func($atk_name,$dif_name);


?>

<!DOCTYPE html>
<html lang="jp">
<head>
<title>サンプルページ</title>

<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

</head>
<body>
<!-- ここからHTMLでマークアップする -->

<!-- JQeryを読み込む -->
<!--<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- 自分で作成したJavaScriptを読み込む -->
<script src="demo.js"></script>

<div id="element"></div>
<div id="element2"></div>
</body>
</html>

Answer 1

    datatype : "json",

dataType です。

Comments

[TrueRyoB]

その通りでしたm(_ _)m
回答ありがとうございました！
他の方の回答が気になるのでベストアンサーつけるのは少しだけ待ってください！

Answer 2

非同期処理はそろそろfetchに切り替えた方がよいかもしれません

const atkId = '322';
const difId = '350';
const url='http://localhost:8888/demo.php';
const method='post';
const body=Object.entries({'func':'get_context',atkId,difId}).reduce((x,y)=>(x.append(y[0],y[1]),x),new FormData);
fetch(url,{method,body}).then(res=>res.json()).then(console.log);