質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.32%

  • JavaScript

    17548questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Ajax

    1157questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 899

MakotoHoshi

score 38

現在、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;
?>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+2

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/24 15:42

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

    キャンセル

  • 2017/02/24 15:59

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

    キャンセル

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

回答削除       

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.32%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    17548questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Ajax

    1157questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。