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

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

ただいまの
回答率

90.34%

  • jQuery

    8775questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

.ajaxでphpから受け取ったオブジェクトをfor文で繰り返し表示させたいのですが

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,091
退会済みユーザー

退会済みユーザー

チャットを作っているのですが
.ajaxでphpから受け取ったオブジェクトをfor文で繰り返し表示させるようなコードを書いたつもりなのですが
.html()だと繰り返した最後のオブジェクトしか表示されません
どうすれば受け取ったすべてのオブジェクトを表示できるのでしょうか

こんな感じのオブジェクトです
name:"???"
num:"1"
postnum:2
res:"1"
time:"2016-02-14 02:39:03

.append()で表示させた場合下のように繰り返しレスが表示されるのですが

4
???
4
2016-02-14 02:39:13

3
???
3
2016-02-14 02:39:06

2
???
2
2016-02-14 02:39:05

1
???
1
2016-02-14 02:39:03

setTimeoutで更新した場合上書きではなくどんどん下に表示されていってしまいます
ですので.html()で完全に上書きといったようにしたかったのですが.html()だと上書きはされるのですが
繰り返した最後のレスしか表示されないといった状況です。
上のレスでいえば

4
???
4
2016-02-14 02:39:13

だけ表示されるということになります

すごくわかりづらい説明で申し訳ないのですが回答お願いします

$(document).ready(function(){
  $('#form').submit(function(){
    $('#post').attr('hidden',true);
    $.ajax({
      type:'POST',
      url:'post.php',
      datatype:'json',
      data:$('#message').serialize(),
    })
      .done(function(data){
        var res = JSON.parse(data);
        if (res!==null && res.postnum==1) {
          $('#message').after('<p id="thanks">'+'Thanks!'+'</p>');
          $('#message').val("");          
        }else{
           $('#message').after('<p id="fuck">'+'Fuck!!!'+'</p>');
        }
      })
      .fail(function(){
        $('#res').html('er');
      })
      function resreturn(){
          $('#thanks').remove();
          $('#fuck').remove();
          $('#post').attr('hidden',false);
        }
        setTimeout(resreturn,666);
      return false;
  });
function all(){
    $.ajax({
      type:'POST',
      url:'post.php',
      datatype:'json',
    })
    .done(function(data){
      var log = JSON.parse(data);
      console.log(log);
      if (log !== null && log[0].postnum==2 ) {
          var typelog =  log[0].num;
          for (var i = 0 ; i < typelog  ; i++) {
          $('#log').append('<p id="res">'+log[i].num+'<br/>'+log[i].name+'<br/>'+
            log[i].res+'<br/>'+log[i].time+'</p>');
          }
          console.log('ok');
        }else{
          console.log("error");
        }
    })
    setTimeout(all,2000);
  }
  all();
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • yng13

    2016/02/14 18:10 編集

    すみません、コード表示ができないので解答欄に書きます。

    キャンセル

回答 2

checkベストアンサー

0

setTimeoutで更新した場合上書きではなくどんどん下に表示されていってしまいます 
ですので.html()で完全に上書きといったようにしたかったのですが.html()だと上書きはされるのですが 
繰り返した最後のレスしか表示されないといった状況です。 

"上書き" というのはもしかして、新しく追加する要素が先頭になるようにしたい。と言うことでしょうか?
で、あればjQueryであれば.prepend()を使えば実現できます。
.prepend( content )

content: HTML文字列, DOM要素, jQueryオブジェクトを指定して、マッチした各要素内の一番前に挿入します。
.prepend() | jQuery 1.9 日本語リファレンス | js STUDIO

$('#log').prepend('<p id="res">'+log[i].num+'<br/>'+log[i].name+'<br/>'+ 
            log[i].res+'<br/>'+log[i].time+'</p>');

Ajaxで取得したものだけを表示させたい場合、上記の方法では前もって#logを空にする必要があります。
そしてこの書き方だとDOMへの挿入の回数が多いし、ループ内で何度もjQueryオブジェクトの初期化が実行されるのでパフォーマンス的にはあまりよろしくないかと思います。for文内では挿入するHTMLを作成しておき、最後にまとめて#logに入れるようにするのが良いでしょう。

if (log !== null && log[0].postnum == 2) {
  var typelog = log[0].num;
  var html = '';
  for (var i = 0; i < typelog; i++) {
    // for文内では挿入するHTMLを作るだけ
    html = '<p id="res">' + log[i].num + '<br/>' + log[i].name + '<br/>' +
    log[i].res + '<br/>' + log[i].time + '</p>' + html;
  }
  /* note. 最後のから取り出せばOKなので下記でもOK
    while(typelog--) {
      // for文内では挿入するHTMLを作るだけ
      html += '<p id="res">' + log[i].num + '<br/>' + log[i].name + '<br/>' +
      log[i].res + '<br/>' + log[i].time + '</p>'; 
    }
  */
  // #log 内を空にして Ajaxで取得したものだけを表示させる場合は .html()で↓
  // $('#log').html( html );

  // #log 内の先頭に追加するのであれば .prepend()で↓
  $('#log').prepend( html );
}


※ 動作確認とかしてないのであしからず

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/02/15 18:39

    稚拙な文章から伝えたい事を汲み取りコードにする
    なんだただの神か

    キャンセル

0

このjavascriptコード、エラーになりませんか?
jsのコードを貼るのであれば、全体を貼っていただいたほうがいいです。
あと、投稿時のコード投稿のボタンを使ってもらうと見やすく表示されます。

function all() {
    $.ajax({
            type: 'POST',
            url: 'post.php',
            datatype: 'json',
        })
        .done(function (data) {
            var log = JSON.parse(data);

            if (log !== null && log[0].postnum == 2) {
                var typelog = log[0].num;

                for (var i = 0; i < typelog; i++) {
                    $('#log').html('<p id="res">' + log[i].num + '<br/>' + log[i].name + '<br/>' +
                        log[i].res + '<br/>' + log[i].time + '</p>');
                }
                console.log('ok');
            } else {
                console.log("error");
            }
        }) // <-ここにセミコロン(;)がない
    setTimeout(all, 2000);
} // <-ここがfunction all(){}のとじカッコですが、セミコロンがない
all();
}) // <-ここに対応する開始のカッコ({がないです
;

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/02/14 21:20

    function all() {} は function 文なのでセミコロンを打つべき場所ではありません

    キャンセル

  • 2016/02/15 18:44

    ご指摘ありがとうございます。
    質問の仕方を改善させていただきます

    キャンセル

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

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

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

  • jQuery

    8775questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。