javascript - 3 つの機能を統合する

Question

これらの 3 つの関数をマージして、すべてのデータをストリームに取得し、個々の div に表示できるようにしようとしています。これについてどうすればいいですか？

AJAX response.users ではなく response.stream で返されるため、ユーザーの姓、名、ミドルネームは取得されません。

 <script type="text/javascript">
$(function() 
{
$('.load_more').live("click",function() 
{
var ID = $(this).attr("id");
if(ID)
{
$("#load"+ID).html('Loading...');

$.ajax({
type: "POST",
url: "include/load_more_home_posts.php",
cache: false, 
dataType: "json",
data: { streamitem_id: ID},
cache: false,
success: function(response){
     $.each(response.streams, function(i, stream) {
    $("#articles").prepend("<div id='divider-"+stream['streamitem_id']+"'><div class='userinfo'><a href='/profile.php?username="+stream['username']+"'><img class='stream_profileimage' style='border:none;padding:0px;display:inline;' border=\"0\" src=\"imgs/cropped"+stream['id']+".jpg\" onerror='this.src=\"img/no_profile_img.jpeg\"' width=\"40\" height=\"40\" ></a><div class'delete' style='cursor:pointer;position:relative;top:0px;float:right;padding-right:5px;' onclick=\"delete_('"+stream['streamitem_id']+"');\">X</div><a href='/profile.php?username="+stream['username']+"'>"+stream['first']+" "+ stream['middle']+" "+stream['last']+"</a><span class='subtleLink'> said</span><br/><a class='subtleLink' style='font-weight:normal;'>"+stream['streamitem_timestamp']+"</a><hr>"+stream['streamitem_content']+"<div style='height:20px;' class='post_contextoptions'><div id='streamcomment'><a style='cursor:pointer;' id='commenttoggle_"+stream['streamitem_id']+"' onclick=\"toggle_comments('comment_holder_"+stream['streamitem_id']+"');clearTimeout(streamloop);swapcommentlabel(this.id);\">Write a comment...</a></div><div id='streamlike'><a title='Like "+stream['first']+" "+ stream['middle']+" "+stream['last']+"s status' id='likecontext_"+stream['streamitem_id']+"' style='cursor:pointer;' onClick=\"likestatus("+stream['streamitem_id']+",this.id);\"><div style='width:50px;' id='likesprint"+stream['streamitem_id']+"'>Like</a></div><div style='width:50px;' id='likesprint"+stream['streamitem_id']+"'><a title='See who likes "+stream['first']+" "+ stream['middle']+" "+stream['last']+"s status' href='include/likes.php?streamitem_id="+stream['streamitem_id']+"' /></a></div></div></form></div><div id='streamdislike'><a id='dislikecontext_"+stream['streamitem_id']+"' style='cursor:pointer;' onClick=\"dislikestatus("+stream['streamitem_id']+",this.id);\"><div style='width:70px;' id='dislikesprint"+stream['streamitem_id']+"'>Dislike</a></div><div style='width:70px;' id='dislikesprint"+stream['streamitem_id']+"'></div></div></form><div class='stream_comment_holder' style='display:none;' id='comment_holder_"+stream['streamitem_id']+"'><div id='comment_list_"+stream['streamitem_id']+"'></div><div class='stream_comment_inputarea'><form id='mycommentform' method='POST'  class='form_statusinput'>\
<input type='hidden'  name='streamidcontent' id='streamidcontent' value='"+stream['streamitem_id']+"'>\
<input type='input' name='commentingcontents' id='commentingcontents' placeholder='Say something' autocomplete='off'>\
<input type='submit' id='button' value='Feed'><br/></div></div>").show();

      // the rest of your code from inside your $.each() here
   });
};


  // Comments
    $.each(response.comments, function(i, comment) {

    });

 // Users
    $.each(response.users, function(i, user) {    
    });

// remove the previous load more link
$("#load"+ID).remove();
}
});
}
return false;
});
});
</script>

すべてに送り返される3つのjsonオブジェクトが1つのdiv内にある必要があるため、UNDEFINEDは取得されません。

$following_string = mysqli_real_escape_string($mysqli,$_SESSION['id']);
$call="SELECT * FROM streamdata WHERE streamitem_id < '$lastID' AND streamitem_target=".$following_string." OR streamitem_creator=".$following_string." ORDER BY streamitem_id DESC LIMIT 10";
$chant = mysqli_query($mysqli, $call) or die(mysqli_error($mysqli));
$json = array();
$json['streams'] = array();

while ($resultArr = mysqli_fetch_assoc($chant)) {
    $arr = array();
    $arr['streamitem_id'] = $resultArr['streamitem_id'];
    $arr['streamitem_content'] = $resultArr['streamitem_content'];
    $arr['streamitem_timestamp'] = Agotime($resultArr['streamitem_timestamp']);

    $json['streams'][] = $arr;
}

/***** COMMENTS *****/
$check = "SELECT comment_id, comment_datetime, comment_streamitem, comment_poster, comment_content FROM streamdata_comments WHERE comment_poster=".$following_string."  ORDER BY comment_datetime DESC";
$check1 = mysqli_query($mysqli,$check);
$json['comments'] = array();

while ($resultArr = mysqli_fetch_assoc($check1)) {
    $arr = array();
    $arr['comment_id'] = $resultArr['comment_id'];
    $arr['comment_content'] = $resultArr['comment_content'];
    $arr['comment_poster'] = $resultArr['comment_poster'];
    $arr['comment_datetime'] = Agotime($resultArr['comment_datetime']);
    $arr['comment_streamitem'] = $resultArr['comment_streamitem'];

    $json['comments'][] = $arr;
}

/***** USERS *****/

$check = "SELECT * FROM users WHERE id=".$following_string."";
$check1 = mysqli_query($mysqli,$check);
$json['users'] = array();

while ($resultArr = mysqli_fetch_assoc($check1)) {
    $arr = array();
    $arr['username'] = $resultArr['username'];
    $arr['id'] = $resultArr['id'];
    $arr['first'] = $resultArr['first'];
    $arr['middle'] = $resultArr['middle'];
    $arr['last'] = $resultArr['last'];

    $json['users'][] = $arr;
}


echo json_encode($json);
}
?>

score 0 · Accepted Answer

ストリームに関連するコメントやユーザーを簡単に検索できる形式にデータをcomments変換する必要があります。users現在のようcommentsに、ストリームに関連するコメントを見つけるために各コメントオブジェクトをループしてから、コメントに関連するusersユーザーを見つけるために各ユーザーをループする必要があります。これは恐ろしく非効率であるだけでなく、コード集約的です。

これを解決するには、JSON でフラットな配列を送信する代わりに、検索に役立つキーを含むオブジェクトを送信する必要があります。つまり、JSON の代わりに次のようになります。

{
    "streams": [...],
    "comments": [...],
    "users": [...]
}

次のようになります。

{
    "streams": [...],
    "comments": {
        943: [...], /* 943 is the ID of the stream */
        945: [...],
        975: [...],
    },
    "users": {
        34: { ... }, /* these keys are user IDs */
        45: { ... },
        398: { ... },
    },
}

または、関連するストリームオブジェクトにコメントを埋め込むこともできます。

{
    "streams": [
        { 
            ...,
            "comments": [...]
        },
        { 
            ...,
            "comments": [...]
        },
    ],
    "users": {
        34: { ... }, 
        45: { ... },
        398: { ... },
    },
}

これらの構造を使用すると、ストリームの処理中に必要なデータを見つけるのがはるかに簡単になります。

PHP がこのより理想的な形式でデータを生成するのが最善です。私は PHP の専門家ではないので、JavaScript でデータを変換する方法を紹介します。ストリームオブジェクトをループする前に、他の配列を前処理して、データの検索が簡単になるようにします。

var commentLookup = {};
var userLookup = {};

$.each(response.comments, function(i, comment) {
    var streamId = comment.comment_streamitem;
    if (!(streamId in commentLookup)) {
        commentLookup[streamId] = [];
    }
    commentLookup[streamId].push(comment);
});

$.each(response.users, function(i, user) {
    userLookup[user.id] = user;
});

ストリームをループしているときに、関連するオブジェクトを簡単に検索できます。

$.each(response.streams, function(i, stream) {

    // Output stream content

    // Output comments
    $.each(commentLookup[stream.streamitem_id], function(i, comment) {
        // Output comment contents

        var commenter = userLookup[comment.comment_poster];
        var name = commenter.first + ' ' + commenter.last;
        // etc.
    });

});

javascript - 3 つの機能を統合する

1 に答える 1

Related

Reference