Question

I’m trying to merge these 3 functions together so I can get all my data into stream and it will show up in the individual div. How would I go about this?

AJAX It won’t get the users first, middle or last name as that is returned under response.users not 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>

I need the 3 json objects that are sent back to all be inside 1 div so I get no 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);
}
?>

Answer 1

What you need to do is convert your comments and users data into a format where you can easy look up the comments and users relating to your streams. As it is now, you would have to loop through each comment object in comments to find the comments that relate to your stream, then through each user in users to find a user which relates to your comment. This is not only horribly inefficient but code intensive.

To solve this, instead of sending flat arrays in your JSON, you should send objects with keys to aid you in looking things up. In other words, instead of your JSON looking like this:

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

It should look more like this:

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

Or even embed your comments in the stream objects that they relate to:

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

With these structures, it’s much easier to find the data you need while you’re processing your streams.

It’s best if your PHP produces the data in this more ideal format. I’m not a PHP expert, so I’ll show you how you’d transform the data in your JavaScript. Before looping through your stream objects, preprocess your other arrays so that data lookup is easier:

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;
});

Now when you’re looping through your streams, you can easily look up your related objects:

$.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.
    });

});