jsの連想配列でキーから値を取り出せない

Question

現在、WordPressを使ったサイトで、アーカイブページをajaxを使って無限ロードできるようにしようとしています。
その際、ajaxで取得したデータ（配列）が上手く取り出せずにいます。
その配列構造は以下です。

{
"noDataFlg" : "1か0が入ります",
"html" : "取得したデータが入ります"
}

調べてみると、[]内にキーを入れれば取り出せるとかいてあったので
これを以下のようにして試しましたが、undefinedとなってしいます。

console.log(data["html"]);

他に連想配列でキーから値を取り出す方法はないでしょうか？

<script>
//Ajax
$(function(){
	var now_post_num = 5;
	var get_post_num = 5;
	$('#moredisp').on('click', function(){
		//$("#moredisp").html(ロード画像);
		$.ajax({
			url: 'http://test.localhost/wordpress/wp-content/themes/news-mix-lite/ajax-load.php',
			type: 'post',
			data:{
				'now_post_num': now_post_num,
				'get_post_num': get_post_num
			},
			success: function(data){
				console.log(data);
				now_post_num = now_post_num + get_post_num;
				$("#content").append(data["html"]);
                $("#moredisp").remove();
                if(!data["noDataFlg"]){
                	$("#content").append('<a id="moredisp" href="#">もっと見る</a>');
            	}
			}
		});
		return false;
	});
});
</script>

<?php
require_once("../../../wp-config.php");

$now_post_num = $_POST['now_post_num'];
$get_post_num = $_POST['get_post_num'];

$next_now_post_num = $now_post_num + $get_post_num;
$next_get_post_num = $get_post_num + $get_post_num;

$sql = "SELECT
        $wpdb->posts.ID, 
        $wpdb->posts.post_title, 
        $wpdb->posts.post_content 
    FROM
        $wpdb->posts  
    WHERE
        $wpdb->posts.post_type = 'post' AND $wpdb->posts.post_status = 'publish'
    ORDER BY
        $wpdb->posts.post_date DESC
    LIMIT $now_post_num, $get_post_num";
         
$results = $wpdb->get_results($sql);

$sql = "SELECT
        $wpdb->posts.ID, 
        $wpdb->posts.post_title, 
        $wpdb->posts.post_content 
    FROM 
        $wpdb->posts  
    WHERE 
        $wpdb->posts.post_type = 'post' AND $wpdb->posts.post_status = 'publish'
    ORDER BY 
        $wpdb->posts.post_date DESC 
    LIMIT $next_now_post_num, $next_get_post_num";
 
$next_results = $wpdb->get_results($sql);
 
$noDataFlg = 0;
if ( count($results) < $get_post_num || !count($next_results) ) {
    $noDataFlg = 1;
}

$html = "";

foreach($results as $result){
    $html .= '<li>';
    $html .= '<p><a href="'.get_permalink($result->ID).'">'.apply_filters('the_title', $result->post_title).'</a></p>';
    $html .= '<p>'.apply_filters('the_content', $result->post_content).'</p>';
    $html .= '</li>';
}

$returnObj = array();
$returnObj = array(
    'noDataFlg' => $noDataFlg,
    'html' => $html,
);
$returnObj = json_encode($returnObj);
 
echo $returnObj;
?>

Answer 1

phpからはjsonを返却されているようですので、
javascriptで受け取り後、jsonからオブジェクトへ変換すると上手く行くと思います。

var obj = JSON.parse(data);
console.log(obj["html"]);

Comments

[退会済みユーザー]

ありがとうございます！
ご指摘頂いた内容で解決できましたが、
ロードする記事がなくなった時にボタンを消すという処理がうまく動きません。
http://hijiriworld.com/web/wp-ajax-loading/
今回のコードはここを参考にしています。
該当部分は以下です。
何か原因はありますか？
if(!data["noDataFlg"]){
$("#content").append('<a id="moredisp" href="#">もっと見る</a>');
}

[mri0815]

特に問題なさそうに見受けられますので、data["noDataFlg"]に誤った値が入っている等でしょうか。。。
別件の場合、お手数ですが別立てでご質問いただくと他の方々からもご回答がいただけると思います。

Answer 2

$.ajax()のパラメータにdataType: "json"を追加するのはどうでしょうか。

Answer 3

回答削除