how to return multiple array items using json/jquery

Question

Hey guys, quick question, I have a query that will usually return multiple results from a database, while I know how to return one result, I am not sure how to return multiple in jquery. I just want to take each of the returned results and run them through my prepare function. I have been trying to use 'for' to handle the array of data but I don't think it can work since I am returning different array values. If anyone has any suggestions, I would really appreciate it.

JQUERY RETRIEVAL

 success: function(json) {

 for(i=0; i < json.rows; i++) {

                $('#users_online').append(online_users(json[i]));
                $('#online_list-' + count2).fadeIn(1500);
} 

}

PHP PROCESSING

$qryuserscount1="SELECT active_users.username,COUNT(scrusersonline.id) AS rows FROM scrusersonline LEFT JOIN active_users ON scrusersonline.id=active_users.id WHERE topic_id='$topic_id'";
$userscount1=mysql_query($qryuserscount1);
while ($row = mysql_fetch_array($userscount1)) {
$onlineuser= $row['username'];
$rows=$row['rows'];
if ($username==$onlineuser){
    $str2=  "<a href=\"statistics.php?user=$onlineuser\"><div class=\"me\">$onlineuser</div></a>";
    }
else {
$str2= "<b><a href=\"statistics.php?user=$onlineuser\"><div class=\"others\">$onlineuser</div></a></b>";
}
$data['rows']=$rows;
$data['entry']=$str1.$str2;
}

EDIT ONLINE USERS FUNCTION

function online_users(response) {
  count2++;

  var string = '<div class="update-entry"><li id="online_list-'+count2+'">'
      + ''+response.entry+''
      +'</li></div>';

  return string;
}

Could you share some more code? The code snippet you provided doesn't show us what is inside online_users ( is it a function? ) or the values inside of json — Mottie
– Mottie, Commented Apr 28, 2010 at 15:58

maček · Accepted Answer · 2010-04-28 16:56:45Z

1

Hopefully this will help you get pointed in the right direction:

foo.php

<html>
  <head>
    <script type="text/javascript" src="user_list.js"></script>
    <style type="text/css" media="screen">
      /* instead of using html tags for markup, use CSS */
      #users_online .me {}
      #users_online .other { font-weight: bold; }
    </style>
  </head>
  <body>
    <div id="content">foo</div>
    <div id="users_online">
      <div class="count"></div>
      <div class="list"></div>
    </div>
  </body>
</html>

user_list.js

<script type="text/javascript" charset="utf-8">
  (function($){

    var refresh_user_list = function(){

      // get the data
      $.getJSON("/user_list.php", function(data)){

        // insert HTML into DOM 
        $("#users_online .count").html(data['count']);
        $("#users_online .list").html(data['users']);

      };

      // refresh users list again every 15 seconds
      setTimeout(refresh_user_list, 15000);
    };

    // after the page is ready, get the user list
    $(document).ready(function(){
      refresh_user_list();
    });
  })(jQuery);
</script>

user_list.php

<?php

// header
header("Content-Type: application/json");

// return data
$data = array(
  "users" => "",
  "count" => 0
);

// query users
$result = mysql_query("
  SELECT
    active_users.username,
    COUNT(scrusersonline.id) AS rows

  FROM scrusersonline

  LEFT JOIN active_users ON scrusersonline.id=active_users.id

  WHERE topic_id='$topic_id';
");

// load users
while($u = mysql_fetch_object($result)){
  $link_class = ($username == $u->username)
    ? "me"
    : "other"
  ;
  // don't use <b> tag here. define bold in the stylesheet with the link's class
  $data["users"]  .= "<a class=\"${link_class}\" href=\"statistics.php?user={$u->username}\">{$u->username}</a>";
}

// load count
// this is sort of silly, but I don't know the way your database is setup so it's hard to advise you how to improve it
$data["count"] = $u->rows;

// return the result
echo json_encode($data);

// make sure you stop the script here so nothing else gets output
exit;
?>

edited Apr 28, 2010 at 16:56

answered Apr 28, 2010 at 16:35

maček

78k37 gold badges172 silver badges200 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Scarface Over a year ago

First of all, thanks macek for your detailed response, it helped me in some respects. The only reason I had a count rows was for the for loop. I do not actually need it. As for your suggestion, while it will likely work. the whole point of the trouble with this jquery structured approach was so I could fade in and fade out updates individually based on post data. I wanted to send data with a jquery post and then fade in updates in the database. That is why I had the variable 'count2'.

Scarface Over a year ago

With the count variable new count entries can be faded in after they are appended

animuson · Accepted Answer · 2010-04-28 15:52:38Z

0

Why do you need to return multiple results? For something as simple as that, just format everything on the server-side and return all the HTML at once, then have jQuery just put it in. Don't make the client-side have to process things because it will likely be slower.

answered Apr 28, 2010 at 15:52

animuson♦

54.9k28 gold badges142 silver badges150 bronze badges

2 Comments

Scarface Over a year ago

the reason I wanted to return multiple results is because I want to fade in individual updates. For example if someone comes online, then they fade in. That is why I thought it would be best to run through the array to fade in results individually. Maybe I am approaching it the wrong way.

Scarface Over a year ago

I did not include it, but the getjson function is on a setinterval to check for updates

Collectives™ on Stack Overflow

how to return multiple array items using json/jquery

2 Answers 2

foo.php

user_list.js

user_list.php

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

foo.php

user_list.js

user_list.php

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related