CODEWITHSUNDEEP
javascriptphpjqueryajaxjson
Junaid Saleem
Junaid Saleem

Reputation: 175

jquery display multiple json objects returned from php

i know that this question is a bit childish but i am unable to find the correct solution to this problem...

i am using jquery and ajax call to user search functionality in website with php returning json objects...

when i search users using php file, if the json return is only one array, the jquery prints it on the screen, but when multiple results are returned, i don't know to print them out....

here are the results returned from the php:

{"search":"10 
junaid 
saleem 
[email protected] 

"}{"search":"13 
zzz 
aaa 
[email protected] 

"}

and here is the jquery webpage:

<?php 
session_start();
require("secure_scripts/getusers.php");
require("secure_scripts/getdp.php");
require("secure_scripts/getusersinfo.php");
if(!isset($_SESSION['id'])){
    header("location: index.php");
}else{
    $zxcv_lgn = base64_encode($_SESSION['id']);
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome <?php echo getusers("first_name"); ?> | Addressbook.com</title>
    <script src="jquery.js" type="text/javascript" ></script>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript">
         $(document).ready(function(){
                $("#search_button").click(function(){
                    $("#search_button").click(function(){ $("#console_loader").hide(); });
                    $("#console_loader").fadeIn("slow").html("<img src='images/ajax-loader.gif' id='ajax-loader' />");
                    var send = $("#search").val();
                    $.ajax({
                        type: "POST",
                        url: "secure_scripts/search_users.php",
                        data: {search: send},
                        dataType: "json",
                        success: function(msg){
                            $("#ajax-loader").fadeOut("slow", function(){
                                $("#console_loader img").remove();
                                $("#console_loader").fadeIn("slow").html(msg.search);
                            });
                        }
                    });

                });
            });

    </script>

</head>
<body>
    <div id="header">
        <p><a href="index.php"><img src="images/header_logo.png" /><span>AddressBook™</span></a></p>


    </div>

    <div id="wrapper" align="center">

        <div id="main">
            <div id="content">
                <div id="top_nav">
                    <div class="userinfo"><span class="user_title">Welcome <?php echo getusers("first_name")." ".getusers("last_name"); ?></span></div>
                    <div class="search">
                        <form onsubmit="return false" id="search_form">
                            <input type="text" name="search" class="search_box" id="search" placeholder="Type in to search...">
                            <input type="button" id="search_button" class="sea" name="search_submit"value="search">
                        </form>
                    </div>
                </div>
                <div id="left_nav">
                    <div id="dp"><img src="<?php echo getdp(); ?>"></div>
                    <div class="left_nav_links">Profile</div>
                    <div class="left_nav_links">Contacts</div>
                    <div class="left_nav_links">Settings</div>
                    <div class="left_nav_links">privacy</div>
                    <div class="left_nav_links">logout</div>
                </div>
                <div id="console">
                    <div id="console_top_nav">Your Contacts:</div>
                    <div id="console_content">
                        <div id="console_loader" style="display: none;"></div>
                    </div>
                    </div>
                </div>
            </div>

        </div>

        <div id="footer">
            <div id="links"><ul><li><a href="index.php">Home</a></li><li><a href="about">About</a></li><li><a href="contact">Contact</a></li></ul></div>
            <div id="copyrights">&copy; 2014 Addressbook.com All Rights Reserved</div>
        </div>  

    </div>
</body>
</html>

whenevery only one object is returned from php, like:

{"search":"13 
zzz 
aaa 
[email protected] 

"}

it works perfectly, but not with multiple json objects....

thanks in advance!

Upvotes: 2

Views: 1328

Answers (2)

Howard Renollet
Howard Renollet

Reputation: 4739

You need to use jQuery's .each() method, like this:

$(document).ready(function(){
    $("#search_button").click(function(){
        $("#search_button").click(function(){ $("#console_loader").hide(); });
        $("#console_loader").fadeIn("slow").html("<img src='images/ajax-loader.gif' id='ajax-loader' />");
        var send = $("#search").val();
        $.ajax({
            type: "POST",
            url: "secure_scripts/search_users.php",
            data: {search: send},
            dataType: "json",
            success: function (msg) {
                $.each(function (index, item) {
                    $("#ajax-loader").fadeOut("slow", function () {
                        $("#console_loader img").remove();
                        $("#console_loader").fadeIn("slow").html(item.search);
                    });
                });
            }
        });
    });
});

When your json is received, it is more than likely an array of objects

[{"search":"10 
    junaid 
    saleem 
    [email protected] 

    "}{"search":"13 
    zzz 
    aaa 
    [email protected] 
"}]

Therefore, by using $.each() to loop through the collection and return the value (index, item) you can get the object's value by referencing it like so:

$("#console_loader").fadeIn("slow").html(item.search);

since json is returning a JavaScript object literal.

Upvotes: 1

Cody Reichert
Cody Reichert

Reputation: 1630

Something like this should work:

$.ajax({
  type: "POST",
  url: "secure_scripts/search_users.php",
  data: {search: send},
  dataType: "json",
  success: function(msg){
    $.each(function() {
      $("#ajax-loader").fadeOut("slow", function(){
        $("#console_loader img").remove();
        $("#console_loader").fadeIn("slow").html(msg.search);
      });
    });
  }
});

We're adding $.each() method to the success function in order to run it for each JSON object that gets returned, not just the first.

Here's the jQuery.each() doc for further reading.

edited for clarity

Upvotes: 0

Related Questions