CODEWITHSUNDEEP
javascriptphpjson
Omar
Omar

Reputation: 73

JSON PHP script appending Javascript to the JSON data

I have following code to return data to a mobile app in JSON format..

    if($_POST){?>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDDEBh6r9r7-VxyYqRehzYZp903M69_W7s&sensor=false&libraries=geometry"></script>
<script src="jquery-1.10.2.min.js"></script>
<?php
    $eventid = $_POST['eventid'];
    $uid = $_POST['uid'];
    $email = $_POST['email'];
    $twitterusername = $_POST['twitterusername'];
    $instausername = $_POST['instausername'];

    .....more PHP code..
    ?>

    <script type="text/javascript" code="maps_code1">

                          var mapCanvas;
                          var container;
                          var zoom = 11;
                          var centerPoint = new google.maps.LatLng(<?php echo $eventimage_latitude;?>, <?php echo $eventimage_longitude;?>);
      <?php 
            $l = 1;
            foreach($user as $userData){
       ?>
      var LatLng<?php echo $l;?> = new google.maps.LatLng(<?php echo $userData['latitude'];?>, <?php echo $userData['longitude'];?>);
....      


function setMarker(marker, point, html, title, icon) {
        if (marker) {
          marker.setPosition(point);
          return marker;
        }

        marker = new google.maps.Marker({
          position : point,
          title : title,
          icon : icon,
          draggable : true,
          map : mapCanvas
        });




<?php $j = 1;
        foreach($user as $userData){?>
     user_marker<?php echo $j;?> = new google.maps.Marker({
        position: LatLng<?php echo $j;?>,
        title: '<?php echo $userData['checkin_email'];?>',
        map: mapCanvas,
        draggable: false
    });
    <?php  $j++;
    }?>
    google.maps.event.addListener(marker, 'click', function() {
      infoWnd.setContent(html);
      infoWnd.open(map, marker);
    });

     print json_encode($data);

So I have a PHP code..than JS code within it, more PHP code that stores data in $data array..and at the end I print the JSON encoded array.

This JSON is consumed by a mobile app. Everything was working fine until I added JavaScript. It even works now, performs what it is required to perform. But App is unable to parse the JSON because its also getting all the Javascript in response.

It is basically the same situation as a webpage. We don't see JS on the page..it works perfectly, but when you view source code/html, all JS is there.

How can I handle this? Any filtering to be done on app side? Or alter the way JSON is served? Just don't want the JS to be returned with the JSON.

Thanks!

Upvotes: 1

Views: 154

Answers (2)

Omar
Omar

Reputation: 73

The only way I could find was to clean up (whatever JS printed on screen) before printing my encoded JSON.

    ob_start();
    ..code..
    ob_end_clean();

print json_encode($data);

This way..JS remained there..processed everything, produced results for $data array..and than wiped out before printing JSON on screen.

Upvotes: 1

Jasper
Jasper

Reputation: 76003

You can add the JS you want to inject into the DOM as a key in your JSON object, then manually pull it out in your code and evaluate it. Your AJAX success function is expecting a valid JSON object, which starts with {. By adding plain-text into the response you've invalidated your JSON.

Just before echoing the data do this:

$data['custom_js'] = '<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDDEBh6r9r7VxyYqRehzYZp903M69_W7s&sensor=false&libraries=geometry"></script><script src="jquery-1.10.2.min.js"></script>';

That will add the JS to the JSON object which can be accessed in your success callback. You can do something like this:

$.ajax({
    ...
    success : function (response) {
        if (typeof response.custom_js === "string") {
            $("body").append(response.custom_js);
        }
        ...
    }
    ...
});

JSON stands for JavaScript Object Notation, meaning the JSON response from your server needs to basically be a Javascript object. You should be able to take the response and set a variable equal to it in JS without creating any parse errors. Something like:

<script>
var someVar = <?php echo json_encode(array("key" => "val")) ?>;
</script>

Upvotes: 1

Related Questions