Pass PHP array to js variable

Question

I know there are at least 100 pages regarding this issue, and I did try a lot of them still with no luck.

It might be a very silly thing I might be missing some where but I'll grateful if someone can help me with it.

This is the php code:

<?php

   $std_res = array();
   $thumb_res = array();

   $hashtag = $_GET['hashtag'];

    if ($hashtag != "")
        get_hashtag($hashtag);

  function get_hashtag($hashtag){ 
            $access_token = ACCESS_TOKEN; 
            $instagram = new Instagram(INSTA_CLIENT_ID, INSTA_CLIENT_SECRET, $access_token);
            try {
                $feed = $instagram->get('tags/'.$hashtag.'/media/recent');
            }catch(InstagramApiError $e) {
                die($e->getMessage());
            }

            $counter = 0;
            //$std_res = array();
            //$thumb_res = array();
            foreach($feed->data as $item){
                $std_res[$counter] = $item->images->standard_resolution->url;
                $thumb_res[$counter] = $item->images->thumbnail->url;
                $counter++;
            }
            print_r ($std_res);
            //echo "<script> trial(); </script>"; 
        }

?>

Then in javascript I trying access the content of $std_res

    <script type="text/javascript">
        //public function trial(){
            var std_resol = <?php echo htmlspecialchars(json_encode($std_res), ENT_NOQUOTES); ?>;
            //var std_resol = <?php echo json_encode($std_res ); ?>;
            //var std_resol = <?php echo '["' . implode('", "', $std_res) . '"]' ?>;
            for(var i=0;i<20;i++){
                alert(std_resol[i]);
            }
            <!--
              //var viewer = new PhotoViewer();
              //viewer.add('images/1.jpg');
              //viewer.add('images/2.jpg');
              //viewer.add('images/3.jpg');
            //-->
        //}
    </script>

I have tried lots of methods trying to access the array in javascript, it always throws a alert with undefined.

This is an example of the result in $std_res:

Array
(
    [0] => https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e15/11098632_1592161574372304_946830181_n.jpg
    [1] => https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e15/11137792_375372262654484_983054129_n.jpg
)

Answer 1

Are you looking for something like this:

<?php
   $std_res = array();
   $thumb_res = array();

   $hashtag = $_GET['hashtag'];

    if ($hashtag != "")
        get_hashtag($hashtag);

  function get_hashtag($hashtag){ 
            $access_token = ACCESS_TOKEN; 
            $instagram = new Instagram(INSTA_CLIENT_ID, INSTA_CLIENT_SECRET, $access_token);
            try {
                $feed = $instagram->get('tags/'.$hashtag.'/media/recent');
            }catch(InstagramApiError $e) {
                die($e->getMessage());
            }

            $counter = 0;
            //$std_res = array();
            //$thumb_res = array();
            foreach($feed->data as $item){
                $std_res[$counter] = $item->images->standard_resolution->url;
                $thumb_res[$counter] = $item->images->thumbnail->url;
                $counter++;
            }

            $std_res = array(
                    0 => "https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e15/11055580_727474890707390_1934245715_n.jpg", 
                    1 => "https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/e15/11111531_372354296294035_723344480_n.jpg", 
                    2 => "https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e15/11098632_1592161574372304_946830181_n.jpg",
                    3 => "https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e15/11137792_375372262654484_983054129_n.jpg",
                    4 => "https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/e15/11116667_1565277043745270_1469416835_n.jpg",
                    5 => "https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e15/11015580_893395314058707_653192214_n.jpg",
                    6 => "https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e15/11085153_1564735420461543_1794751821_n.jpg",
                    7 => "https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e15/11111394_486476084853947_1828992005_n.jpg",
                    8 => "https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e15/11123773_1604640419822229_54424738_n.jpg",
                    9 => "https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/e15/11117138_1586126428339275_1273079713_n.jpg",
                    10 => "https://scontent.cdninstagram.com/hphotos-xfp1/t51.2885-15/e15/10809595_749490181832280_1688748735_n.jpg",
                    11 => "https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e15/11085015_822598601166812_226286803_n.jpg",
                    12 => "https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/e15/11015600_606519929483157_1838052366_n.jpg",
                    13 => "https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e15/11084823_781169181966563_782497156_n.jpg",
                    14 => "https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e15/11137893_702739529837518_1586561101_n.jpg",
                    15 => "https://scontent.cdninstagram.com/hphotos-xpa1/t51.2885-15/e15/10731578_859809880731769_652613025_n.jpg",
                    16 => "https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e15/11055988_1600208130226646_618821130_n.jpg",
                    17 => "https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e15/11116893_1568124210107697_1675930404_n.jpg",
                    18 => "https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/e15/11098688_1573534352884643_128369426_n.jpg",
                    19 => "https://scontent.cdninstagram.com/hphotos-xfp1/t51.2885-15/e15/1661965_361029627440040_1980925925_n.jpg"
    );
  }
?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
        var std_resol = <?php echo json_encode($std_res); ?>;
        for(var i=0;i<std_resol.length;i++){
            console.log(std_resol[i]);
        }
</script>