Ajax取得できた配列が空で表示される

Question

以下のコードを実行するとconsole.log()の部分で取得できた入れsつが表示されず、空の配列が表示されます。

質問❶
書く位置が悪いのでしょうか。通信がまだ終了していないということでしょうか。
質問❷
console.log()をした際、表示がPHPファイルの中の$hotelsを受け取る時だけ

[Object, Object, Object] (3)

となり
$pics,$tagsの時は

[{hotel_id: "1", country_code: "PHL", pic: "hotel_idが1の画像です"}, {hotel_id: "2", country_code: "PHL", pic: "hotel_idが2の画像です"}, {hotel_id: "3", country_code: "PHL", pic: "hotel_idが3の画像です"}] 

のようになります。これはなぜでしょうか。

<script>
  $(function() {
    var array = [];
    var hotels = [];
    var hotelpics = [];
    var hoteltags = [];

    // 関数からは$.postの結果をreturnする
    function pics() {
      return $.post('sampleAjax.php', {
        kind: 'pics'
      });
    };

    function tags() {
      return $.post('sampleAjax.php', {
        kind: 'tags'
      });
    };

    $('#sortbyprice').on('click', function() {
      $.post('sampleAjax.php', {
        kind: 'hotels'
      }, function(result) {
        hotels = result;
        pics().done(function(result) {
　　　　　//ここでresultコンソールすると配列が表示される
        hotelpics = result;
        });
        tags().done(function(result) {
        //ここでresultコンソールすると配列が表示される
        hoteltags = result;
        });
        //空のの値が表示される
        console.log(hotels);
        console.log(hotelpics);
        console.log(hoteltags);
      });
      return false;
    });
  });
</script>

<?php
//返すデータ
//以下の配列はDBから取得したものであると仮定する。
//ホテルの基本情報(値段でソートした設定)
$hotels = array(
  array('hotel_id' => '1', 'country_code'=>'PHL', 'hotel_name'=>'SARROSAホテル', 'hotel_address'=>'セブ シティ, セブ', 'hotel_tel'=>'12345', 'price'=>'30'),
  array('hotel_id' => '2', 'country_code'=>'PHL', 'hotel_name'=>'SPAホテル', 'hotel_address'=>'セブ シティ, セブ', 'hotel_tel'=>'12345', 'price'=>'40'),
  array('hotel_id' => '3', 'country_code'=>'PHL', 'hotel_name'=>'MATTHERホテル', 'hotel_address'=>'セブ シティ, セブ', 'hotel_tel'=>'12345', 'price'=>'50')
);

//$hotelsに含まれているそれぞれのホテルの画像(DBの設定によりホテルの数と必ず一致する。今回はホテルが3つなのでこちらも同じ)
$pics = array(
  array('hotel_id' => '1', 'country_code'=>'PHL', 'pic'=>'hotel_idが1の画像です'),
  array('hotel_id' => '2', 'country_code'=>'PHL', 'pic'=>'hotel_idが2の画像です'),
  array('hotel_id' => '3', 'country_code'=>'PHL', 'pic'=>'hotel_idが3の画像です')
);
//ホテル側が自由に複数持つことができるタグ。
$tags = array(
  array('hotel_id' => '1', 'country_code'=>'PHL', 'tag'=>'無料Wi-Fi'),
  array('hotel_id' => '1', 'country_code'=>'PHL', 'tag'=>'後日支払い可'),
  array('hotel_id' => '1', 'country_code'=>'PHL', 'tag'=>'宿泊施設へ直接支払い'),
  array('hotel_id' => '2', 'country_code'=>'PHL', 'tag'=>'キャンセル無料'),
  array('hotel_id' => '2', 'country_code'=>'PHL', 'tag'=>'無料Wi-Fi'),
  array('hotel_id' => '3', 'country_code'=>'PHL', 'tag'=>'無料Wi-Fi'),
  array('hotel_id' => '3', 'country_code'=>'PHL', 'tag'=>'後日支払い可'),
  array('hotel_id' => '3', 'country_code'=>'PHL', 'tag'=>'宿泊施設へ直接支払い'),
  array('hotel_id' => '3', 'country_code'=>'PHL', 'tag'=>'朝食付き'),
  array('hotel_id' => '3', 'country_code'=>'PHL', 'tag'=>'キャンセル無料')
);

/*
表示に関して
HTML .hotel .nameクラスは $hotelsのhotel_name
HTML .hotel .priceクラスは $hotelsのhotel_price
HTML .hotel .imgクラスは $$picsのpic
HTML .tags .tagクラスは $tagsのtag
*/
// $allOfHotelsInfo = array($hotels,$pics,$tags);

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['kind']) && $_POST['kind'] == 'pics') {
        header('Content-Type: application/json');
        echo json_encode($pics);
        exit;
    } elseif (isset($_POST['kind']) && $_POST['kind'] == 'tags') {
        header('Content-Type: application/json');
        echo json_encode($tags);
        exit;
    } elseif (isset($_POST['kind']) && $_POST['kind'] == 'hotels') {
        header('Content-Type: application/json');
        echo json_encode($hotels);
        exit;
    }
}

Comments

[m.ts10806]

何度も指摘されてると思いますが、あなたがやろうとしていることはあなたの持っている技術知識に対しては難しすぎるので基礎の基礎の基礎からやりなおすことを強くすすめる。
プログラムは思った通りに動くのではなく書いた通りにしか動かない。
それがわかるまでHelloWorldから脱することはできません。

Answer 1

        pics().done(function(result) {
　　　　　//ここでresultコンソールすると配列が表示される
        hotelpics = result;
        });
        tags().done(function(result) {
        //ここでresultコンソールすると配列が表示される
        hoteltags = result;
        });
        //空のの値が表示される
        console.log(hotels);
        console.log(hotelpics);
        console.log(hoteltags);

無名関数の外だから、スコープの問題で値を参照できません。

Comments

[m.ts10806]

どうやったらこんなコードになるのだろうと疑問しかないですねえ…

[退会済みユーザー]

失礼承知ですが、なんでこうも物覚えが悪いのだろうと、甚だ疑問。
なんでわからないのかを素直に聞いてみたいです。

[m.ts10806]

思った通りに動くというところから離れてないからかなと。好き勝手に書いて「どこか間違ってる？」という質問ばかりですし。

[Chandler_Bing]

ありがとうございました。この問題は理解できました。

[退会済みユーザー]

@YutaNkai

本当に理解してます？
同じことを何回も繰り返している印象ですが。

[退会済みユーザー]

やめてあげて、彼の応用力はマイナスよ（おい

[m.ts10806]

問題の本質が自身にあることに気づけないと無理でしょうね…。枝葉ばかりで幹ボロボロ。その枝葉も枝があればまだいい方