CODEWITHSUNDEEP
javascriptphpjqueryhtmljson
lama
lama

Reputation: 21

Search in JSON and display results using jquery

I have this PHP file:

 <?php
 //Get data from instagram api
 $keyword = $_GET['keyword'];
 if(!isset($_GET['count'])) $count = 20;
 else $count = $_GET['count'];

 //Query need client_id or access_token
 $query = array(
'client_id' => '8c81a425a76340a79aa66cb88aa74c89',
'count'     => $count
 );
 $url = 'https://api.instagram.com/v1/users/search?q='.$keyword.'&'.http_build_query($query);

 try {
$curl_connection = curl_init($url);
curl_setopt($curl_connection, CURLOPT_CONNECTTIMEOUT, 30);
curl_setopt($curl_connection, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl_connection, CURLOPT_SSL_VERIFYPEER, false);

//Data are stored in $data
$data = curl_exec($curl_connection);
curl_close($curl_connection);
echo $data;
 } catch(Exception $e) {
return $e->getMessage();
 }
 ?>

that takes a keyword and display all user's info from instagram api..

i want to create a html file whivh have a textfield that takes the keyword and send it to the php file and retrieve and display the first 20 results

suppose this is my html file 

 <!DOCTYPE html>
 <html>

 <head>
 <meta charset="UTF-8">
 <title>Instagram Search</title>
 </head>
 <script>
         //here will be the function 
 </script>
 <body>

 <header>
 <div align="left">
 <h3>Instagram User Search</h3>
 </div>
 <div align="center">
 <form>
 Search:<input type="text" name="keyword">
 <input type="submit" value="Search">
 </form>
 </div>
 </header>

 <section>
 <h1></h1>
 <div class="images">
 <img src=""></img> // here where to retrive picture
 <h1> </h1> // here where to retrive the name of the user
 </div>
 </section>

 </body>

 </html>

i know that im going to use jquery to do it but i don't know how also i know that i need to pass "keyword", value from text field also i know that im going to use retrieved data by its keywords for example if i have this returned data : 

 {"meta":{"code":200},"data":[{"username":"php","bio":"","website":"","profile_picture":"http:\/\/images.ak.instagram.com\/profiles\/anonymousUser.jpg","full_name":"Henrik Pedersen","id":"224046"},{"username":"2popetorn","bio":"The best thing you can put on your face is \"your smile\" #BEsomethingspecial","website":"http:\/\/youtu.be\/-tGIMN_27uQ","profile_picture":"http:\/\/photos-a.ak.instagram.com\/hphotos-ak-xfa1\/10632506_282561178612800_200298941_a.jpg","full_name":"\u0e15\u0e39\u0e48 \u0e20\u0e1e\u0e18\u0e23","id":"10731841"}]}

i will take the value of "username" and store it in string and so in

i know the idea of how to do it but i dont know how to do it as coding in jquery and javascript .. can someone please help ?

tried this :

  <!DOCTYPE html>
  <html>
<head>
   <title>jQuery Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {

        $("#submit").click(function(){

        $.ajax({
        url: "http://www.lamia.byethost18.com/get_info.php",
        type: "GET",
        data: {keyword: $("#keyword").val()},
        dataType: "JSON",
        success: function (jsonStr) {
            $("#result").text(JSON.stringify(jsonStr));
        }
    });

}); 

});
</script>
</head>
<body>
<div id="result"></div>
    <form name="contact" id="contact" method="get">
     keyword : <input type="text" name="keyword" id="keyword"/><br/>
    <input type="button" value="search!" name="submit" id="submit"/>
    </form>

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

and it will print me the json result string on my html like 

  {"meta":{"code":200},"data":[{"username":"lama","bio":"","website":"","profile_picture":"http://images.ak.instagram.invalid/profiles/profile_42284_75sq_1353177507.jpg","full_name":"Li Shing","id":"42284"},{"username":"bekhand_lamasab","bio":"??? ?? ?? Kik : narsis.fashion ??\n????? ? ? ?? sfs : 520 k ??\n????? ??? ???? ????? ??????????? ?? \n??????????????? ?? ??? ????? ???????????","website":"","profile_picture":"http://photos-f.ak.instagram.invalid/hphotos-ak-xap1/10349797_785664258123877_321110299_a.jpg","full_name":"?????????? ??? ???????????????","id":"1085311553"},{"username":"lamarquisette","bio":"","website":"","profile_picture":"http://images.ak.instagram.invalid/profiles/profile_279115230_75sq_1378119768.jpg","full_name":"Youssef Marquis","id":"279115230"},{"username":"timlaman","bio":"NatGeo Wildlife Photographer - Filmmaker - Field Biologist. Exploring wild places, rare species, rain forests and coral reefs.\nSee more on FB:","website":"https://www.facebook.invalid/TimLamanPhoto","profile_picture":"http://images.ak.instagram.invalid/profiles/profile_195678468_75sq_1342554137.jpg","full_name":"Tim Laman","id":"195678468"},{"username":"lamamadelrap","bio":"#RIPMonkeyBlack\n??MELYMEL NO UTILIZA FACEBOOK??\n(Twitter) @MELYMELMELADA \n(RD) 809.360.9052\n(USA) 347.209.2816","website":"http://www.youtube.invalid/MelymelVEVO","profile_picture":"http://photos-g.ak.instagram.invalid/hphotos-ak-xpf1/10693447_660276060736558_41448872_a.jpg","full_name":"MelyMel #zeroDembow","id":"305872466"},{"username":"lamarctaylor","bio":"no reality is the same.","website":"","profile_picture":"http://photos-f.ak.instagram.invalid/hphotos-ak-xpa1/10731950_736068223151773_567726601_a.jpg","full_name":"lamarctaylor","id":"206461711"},{"username":"lamaisond","bio":"","website":"","profile_picture":"http://photos-g.ak.instagram.invalid/hphotos-ak-xpa1/10610996_331177297053686_1564957178_a.jpg","full_name":"","id":"1572747"},{"username":"joud_lama","bio":"?? ???? ???? ????? ?????????\nAll about my kids ????\nOur daily life in videos \n????? ???? ????? ??? ?????\n?????? ???? ???? ??????? ??????? ?? ?? ????","website":"https://m.youtube.invalid/watch?v=6PvF2TjuhQw","profile_picture":"http://images.ak.instagram.invalid/profiles/profile_812908181_75sq_1399322579.jpg","full_name":"Joud_lama","id":"812908181"},{"username":"co._lams","bio":"","website":"","profile_picture":"http://photos-h.ak.instagram.invalid/hphotos-ak-xpa1/10731956_923164217707383_1481888166_a.jpg","full_name":"Lamar","id":"940742669"},{"username":"lamarca941fm","bio":"","website":"","profile_picture":"http://images.ak.instagram.invalid/profiles/profile_1173210472_75sq_1394672048.jpg","full_name":"La Marca 94.1 FM","id":"1173210472"},{"username":"jonjonlamar","bio":"#Miami - #NYC. ????\nA Private Life is a Happy Life.. ??","website":"","profile_picture":"http://photos-e.ak.instagram.invalid/hphotos-ak-xap1/10483455_526566950776404_1475004702_a.jpg","full_name":"Jonathan Lamar Green","id":"18211272"},{"username":"lamafiabeats","bio":"?Produccion y promocion de eventos??\n?cuenta aliada @shopvipcaracas??\n?publicidad y contacto +58 4242308332","website":"","profile_picture":"http://photos-b.ak.instagram.invalid/hphotos-ak-xaf1/10731882_609733789138665_677150285_a.jpg","full_name":"la mafia lifestyle","id":"1533879744"},{"username":"marisa_lmp","bio":"???? Co-Founder : @micha_thailand\n???????????????????????-????????????\n???????????? : lmp.marisa/fon-lamapearl???\n?????: 092-2845899 , 085-389-5648 ??","website":"http://www.lamapearl-scare.invalid","profile_picture":"http://photos-f.ak.instagram.invalid/hphotos-ak-xaf1/10731597_1494940657448173_726227876_a.jpg","full_name":"??CEO of LaMaPearl scare??","id":"10083328"},{"username":"lamaterialista1","bio":"Artista, Actriz, compositora Booking: RD 829-963-3653 USA 917-743-5599 / [email protected] / sigueme en twitter @LAMATERIALISTA1","website":"http://www.youtube.invalid/LaMaterialistaVEVO","profile_picture":"http://photos-c.ak.instagram.invalid/hphotos-ak-xap1/10665318_743709879028514_706220468_a.jpg","full_name":"LA REINA DE LA CHAPA QUEVIBRAN","id":"177807899"},{"username":"lamaris87","bio":"","website":"","profile_picture":"http://photos-f.ak.instagram.invalid/hphotos-ak-xpa1/10665398_1493770557570293_1634650289_a.jpg","full_name":"Lamaris","id":"30943990"},{"username":"lamaracuchis","bio":"Animadora de La Bomba \nFashion Blogger\nBlog: http://www.carlafieldproject.invalid\nChequea mi nuevo tutorial de maquillaje \naquí ? espero lo disfruten.","website":"http://youtu.be/uLLv72vmgG4","profile_picture":"http://photos-a.ak.instagram.invalid/hphotos-ak-xfp1/891345_637029753056760_2048316896_a.jpg","full_name":"Carla Field","id":"238108076"},{"username":"lamaskeproduce","bio":"Producción de Tv y Radio,influyente,sarcástica,Yal, turista sin visa,Fan d Miley Cyrus,Dra. Polo y Dr. House.?Cuenta Alterna @lamaskeproducetv","website":"http://www.lamaskeproduce.invalid","profile_picture":"http://photos-a.ak.instagram.invalid/hphotos-ak-xap1/925887_491093354357472_430852604_a.jpg","full_name":"Jenifel Galcia Cyrus","id":"30637470"},{"username":"dalailama","bio":"Welcome to the official Instagram Account of the Office of His Holiness the 14th Dalai Lama.","website":"http://www.dalailama.invalid/","profile_picture":"http://images.ak.instagram.invalid/profiles/profile_1044003089_75sq_1391167280.jpg","full_name":"Dalai Lama","id":"1044003089"},{"username":"lamarquenyc","bio":"Creative Consultancy co-founded by Meredith Melling and Valerie Boster; la marque, get set, go!","website":"http://lamarquenyc.invalid","profile_picture":"http://images.ak.instagram.invalid/profiles/profile_1031042100_75sq_1390883999.jpg","full_name":"la marque","id":"1031042100"},{"username":"lamasat.iq","bio":"? Official Account\n| ???? ??????? ????? |\n????? ????????? ????????\n?? ???? ?????? ???? ???? ????? ?????? \nadmins\n?????????????????","website":"","profile_picture":"http://photos-a.ak.instagram.invalid/hphotos-ak-xpa1/10755896_316197498569544_758738327_a.jpg","full_name":"? ?????????? ????????? ?","id":"1360750684"}]}

this is what i want but i don't want it to print the json string i want to use the data in username and profile picture only for example somewhere in my html .. how to do it ???

solved by :

$(document).ready(function() {
            $("#submit").click(function(){
                $.ajax({
                    url: "http://www.lamia.byethost18.com/get_info.php",
                    data: {keyword: $("#keyword").val()},
                    dataType: 'JSON',
                    success: 
                        function(jsonStr) {
                        $('#name').text($("#keyword").val());
                        var all_results = '';
                        $.each(jsonStr.data, function(index, element){
                            all_results += '<div style="float:left; margin-left: 100px;" class="result_row">';
                            all_results += '<img src="'+element.profile_picture+'" />';
                            all_results += '<p> @' + element.username + '</p>';
                            all_results += '</div>';
                        });
                            $('#images').html(all_results);
                        }
                });
            }); 
        });

Upvotes: 1

Views: 2131

Answers (2)

Yash Mehrotra
Yash Mehrotra

Reputation: 3120

JSON String can be treated as a dictionary .

What you should do : 

 success: function (jsonStr) {
        var json_result = JSON.Parse(jsonStr);
        // To get profile picture & username
        for( var i=0; i<json_result['data'].length; i++ ) {
            var username = json_result['data'][i]['username'];
            var profile_pic = json_result['data'][i]['profile_picture'];
            $("#result").text( username );
            $("#id_of_image_tag").attr( 'src',profile_pic );
        }
    }

The variables contain the respective text , using jquery you can add them to any html as you wish.

I would also advise to use $('#id').append() rather than text if you are adding text to the same div.

Upvotes: 1

Kasey E
Kasey E

Reputation: 21

You are going to want to use Jquery's Ajax method for sending the information to your script. (put inside your <script> tags and be sure to use $(document).ready({ //jquery here }); to wrap your jquery code)

$.ajax({
    url: '/point/to/php/script.php',
    type: 'GET', //or POST if you prefer
    data: { "keyword" : $("#keywordElementID").val(), /* other variables */ },
    dataType: 'JSON',
    success:
         function( returnedJSON  ){

             //use returned text here


             //to loop through data objects from API
             $.each( returnedJSON.data, function( index , dataObject ){
                 var name = dataObject.full_name;
             });                

        }
});

this is just a simple example to get you started. read more about the ajax method here. and more about json here.

There are tons of questions here on stackoverflow with answers to your question also, just do a little more searching

Upvotes: 0

Related Questions