getting data from JSON in Jquery

Question

i have this php file which get user's info from instagram API

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

?>

and return JSON string with 20 user's info like

  {"meta":{"code":200},"data":[{"username":"lama","bio":"","website":"","profile_picture":"http://images.ak.instagram.com/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.com/hphotos-ak-xap1/10349797_785664258123877_321110299_a.jpg","full_name":"😊بزرگترین پیج ایرانی😊⠀⠀⠀⠀⠀⠀⠀","id":"1085311553"},{"username":"lamarquisette","bio":"","website":"","profile_picture":"http://images.ak.instagram.com/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.com/TimLamanPhoto","profile_picture":"http://images.ak.instagram.com/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.com/MelymelVEVO","profile_picture":"http://photos-g.ak.instagram.com/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.com/hphotos-ak-xpa1/10731950_736068223151773_567726601_a.jpg","full_name":"lamarctaylor","id":"206461711"},{"username":"lamaisond","bio":"","website":"","profile_picture":"http://photos-g.ak.instagram.com/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.com/watch?v=6PvF2TjuhQw","profile_picture":"http://images.ak.instagram.com/profiles/profile_812908181_75sq_1399322579.jpg","full_name":"Joud_lama","id":"812908181"},{"username":"co._lams","bio":"","website":"","profile_picture":"http://photos-h.ak.instagram.com/hphotos-ak-xpa1/10731956_923164217707383_1481888166_a.jpg","full_name":"Lamar","id":"940742669"},{"username":"lamarca941fm","bio":"","website":"","profile_picture":"http://images.ak.instagram.com/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.com/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.com/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-skincare.com","profile_picture":"http://photos-f.ak.instagram.com/hphotos-ak-xaf1/10731597_1494940657448173_726227876_a.jpg","full_name":"💗CEO of LaMaPearl Skincare💗","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.com/LaMaterialistaVEVO","profile_picture":"http://photos-c.ak.instagram.com/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.com/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.com\nChequea mi nuevo tutorial de maquillaje \naquí ⬇ espero lo disfruten.","website":"http://youtu.be/uLLv72vmgG4","profile_picture":"http://photos-a.ak.instagram.com/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.com","profile_picture":"http://photos-a.ak.instagram.com/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.com/","profile_picture":"http://images.ak.instagram.com/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.com","profile_picture":"http://images.ak.instagram.com/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.com/hphotos-ak-xpa1/10755896_316197498569544_758738327_a.jpg","full_name":"❣ لَمّـჰـاتْ عِرّاقـية ❣","id":"1360750684"}]}

and i have html file which send keyword to the php and return values

<!DOCTYPE html>

<html>
<head>
    <title>jQuery Test</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(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) {
                        $.each(jsonStr.data, function(index, element){
                            $("#result").text(element.username);
                            $("#img").attr('src', element.profile_picture);
                        });
                    }
            });
        }); 
    });

    </script>
</head>
<body>

    <div id="result"></div>

    <img src="" id="img" alt="" />
    <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>

the problem is nothing is retrived ! i don't know if there is something wrong with my code ?

i just want to use username and profile_picture from retrived data and display it in the tags..

but nothing displayed i dont know why .. can someone help please ?

the first step in solving this is opening the console browser and checking for errors — Kevin
– Kevin, Commented Nov 12, 2014 at 12:58
Your response should already be in JSON format, no need to parse it again. Moreover try console.log(jsonStr) to see what was returned. — nilobarp
– nilobarp, Commented Nov 12, 2014 at 12:58
@Mahendra i got this: Object {meta: Object, data: Array[20]} that's mean its retriveing data right ? — tatwany
– tatwany, Commented Nov 12, 2014 at 14:00
@NilotpalBarpujari i got this: Object {meta: Object, data: Array[20]} that's mean its retriveing data right ? — tatwany
– tatwany, Commented Nov 12, 2014 at 14:01

Cerbrus · Accepted Answer · 2014-11-13 11:10:03Z

2

You can remove the line with JSON.parse() as already explicitly set that you will receive a JSON:

dataType: 'JSON',

Then in your success block, handle it as follows:

$.each(jsonStr.data, function(index, element){
    $("#result").text(element.username);
    $("#img").attr('src', element.profile_picture);
});

edited Nov 13, 2014 at 11:10

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

answered Nov 12, 2014 at 13:07

Kevin

41.9k12 gold badges57 silver badges72 bronze badges

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

11 Comments

Kevin Over a year ago

@tatwany yes it is working. i tried accessing your json and it works fine.

Kevin Over a year ago

@tatwany i'l setup a demo so that you could see. i'l get back to you in a while

Kevin Over a year ago

@tatwany its basically almost the same, of course i tweaked it a little bit but should be fairly straightforward codepad.viper-7.com/gMC8Ms

tatwany Over a year ago

thank you so much for the demo! its almost the same as mine and working fine but its weird why mine is not working ?? i know i bothered you but can you please recheck my post i edited the html file maybe i missed something without knowing ?

Kevin Over a year ago

besides this things: put $keyword = urlencode($keyword); and $("#submit").click(function(e){ e.preventDefault();. there is nothing more that i can say really.

|

Collectives™ on Stack Overflow

getting data from JSON in Jquery

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related