How to pass php array to jquery and turn into json?

Question

Using php4 how could I store an array in a hidden div so that jquery can pick it up and then turn it into a json object? Im trying to pass an array of data to gmap so that I can load multiple markers, but cant seem to figure out how to pass a php array to jquery and then turn it into a json object.

I tried using a custom json encode class for php4 and encoding the php array to json, the problem is it spits out a bunch of garbage characters and appears to cause errors in the jquery code. Here is the array Im creating in php:

$map_array[] = array('latitude' => $result_latitude,'longitude' => $result_longitude,'html' => $result_html,'title' => $result_name,'icon' => array('image' => '/pathtoicon' .$mapi .'.png','iconsize' => array(27,27)));

$map_json = $json->encode($map_array);

Then in jquery:

    var mapcoords = $('#mapcoord').html();

        $('#rmap').gMap(
                {
                    zoom: 10,
                    markers:$.parseJSON(mapcoords)
                }

        );

When I do this, I get this error:

"SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data"

This works if I do var mapcoords = $('#mapcoord').text();

The problem is, it strips out the html. So how do I pass the php array to jquery and be able to preserve the html code?

@Evert I dont have a choice, sorry. Any suggestions besides upgrading which is not an option. — John, Aug 06 '12 at 13:50
http://stackoverflow.com/questions/8835042/convert-array-to-json — Piyush Sardana, Aug 06 '12 at 13:51
I don't get it, why would you parse HTML from an element as json ? — adeneo, Aug 06 '12 at 13:51
@KalpeshMehta I am storing the json directly in the hidden element. The problem is I keep getting jquery errors when parsing the hidden element. Only when I grab just the text it works. But I need the html code preserved. — John, Aug 06 '12 at 13:52
@John I'm not a PHP4 guru, but shouldn't it be, even in PHP4, `$map_json = json_encode($map_array);` ? — Ohgodwhy, Aug 06 '12 at 13:55
@adeneo Because the js script is an external file and I cant parse php in a js file. — John, Aug 06 '12 at 14:10

score 4 · Accepted Answer · edited Aug 06 '12 at 14:33

4

Why don't you simply create the javascript variable with php and set it there?

For example:

<?php

   $obj = "{'test': 1}";

    echo "<script type='text/javascript'>";
    echo "var myString = " . $obj;
    echo "</script>";
?>

Now the variable is accessible through javascript as an object.

If you can't do that, you can try to convert the string into an json object using jQuery.parseJSON.

Hope it helps!

Did you try jQuery.parseJSON(myString)?

edited Aug 06 '12 at 14:33

James M

18,506
3
48
56

answered Aug 06 '12 at 13:56

VVV

7,563
3
34
55

Ok, looks like the issue I was hung up on was I had the script in an external js file. That is why I was passing the json value via a hidden element. Because I cant parse php inside a js file. But I guess I can render it like you have it. – John Aug 06 '12 at 14:06
If the script is external, you can still write the javascript variable as a global variable so you can access it everywhere. If your external file is a plugin or something you could then pass along the variable as a parameter to the plugin. If you're really stuck, then the jQuery.parseJSON would probably be our best option. – VVV Aug 06 '12 at 14:16

score 0 · Answer 2 · answered Aug 06 '12 at 13:56

Assuming that the html page and the json data are sent from the webserver to the client in the same request you should write the necessary js in the server side as php strings. The following snippet should illustrate what needs to be done:

$map_json = "var jsonData = " . $json->encode($map_array); 
$map_json = '<script type="text/javascript">' . $map_json . '</script>'; 
echo $map_json;

The variable jsonData should be accessible for your js snippet in the client.

score 0 · Answer 3 · answered Aug 06 '12 at 14:02

I would try something like this:

$json = json_encode($my_array);
echo <<<EOS
<script type="text/javascript">
     my_global_js_var = $json
</script>
EOS;

Since JSON is valid javascript, you should get a variable with the json content. You even do not need an hidden HTML Element.

How to pass php array to jquery and turn into json?

3 Answers3