Passing PHP Array into Javascript

Question

I have an Array like below in PHP

array(
    (int) 0 => array(
        'id' => '1',
        'name' => 'Mink7',
        'about' => 'Creative Design agency',
        'logo' => null,
        'lat' => '13.004870000000',
        'lng' => '77.576686084656'
    ),
    (int) 1 => array(
        'id' => '2',
        'name' => 'Bakasura',
        'about' => 'Live 2 Eat',
        'logo' => null,
        'lat' => '13.005643569006',
        'lng' => '77.577485382942'
    )
)

What have i done. I load the Function in the Header and have written the following in the body tag.

<script type="text/javascript">
$(document).ready(function(){
        var startups = <?php echo json_encode($startups); ?>;
        $.each(startups, function(key, val) {
            markMe(val.lat, val.lng, val.name, val.description, val.logo);
        });
});
</script>

I am getting the following error

markMe is not defined

markMe(val.lat, val.lng, val.name, val.description, val.logo);

Javascript File that is attached to HEAD.

// JavaScript Document
$(document).ready(function () {
    var map = new GMaps({
        div: '#map',
        lat: 13.00487,
        lng: 77.576729,
        zoom: 13,
    });

    /*
    GMaps.geolocate({
        success: function (position) {
            map.setCenter(position.coords.latitude, position.coords.longitude);
        },
        error: function (error) {
            alert('Geolocation failed: ' + error.message);
        },
        not_supported: function () {
            alert("Your browser does not support geolocation");
        },
        always: function () {
            //alert("Done!");
        }
    });
    */

    map.addControl({
        position: 'top_right',
        text: 'Geolocate',
        style: {
            margin: '5px',
            padding: '1px 6px',
            border: 'solid 1px #717B87',
            background: '#fff'
        },
        events: {
            click: function () {
                GMaps.geolocate({
                    success: function (position) {
                        map.setCenter(position.coords.latitude, position.coords.longitude);
                    },
                    error: function (error) {
                        alert('Geolocation failed: ' + error.message);
                    },
                    not_supported: function () {
                        alert("Your browser does not support geolocation");
                    }
                });
            }
        }
    });

    map.addMarker({
        lat: 13.00487,
        lng: 77.576729,
        title: 'Lima',
        icon: "http://i.imgur.com/3YJ8z.png",
        infoWindow: {
          content: '<p>HTML Content</p>'
        }
    });

    function markMe(lat, lng, name, description, logo){
        map.addMarker({
            lat: lat,
            lng: lng,
            title: name,
            icon: "http://i.imgur.com/3YJ8z.png",
            infoWindow: {
              content: description
            }
        });
    }

});

Community · Accepted Answer · 2023-11-17 20:08:53Z

3

look for json_encode in PHP, and use JSON.parse in JavaScript (or a library like jQuery.parseJSON if you need broad browser support)

-- after update

instead of function markMe(lat, lng, name, description, logo){

do: markMe = function (lat, lng, name, description, logo){

that's because a function declared in a function is not availlable outside that function

edited Nov 17, 2023 at 20:08

CommunityBot

11 silver badge

answered Jun 25, 2012 at 9:45

Mathieu

5,7033 gold badges34 silver badges48 bronze badges

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

1 Comment

Harsha M V Over a year ago

yeah i tried that method.. but i am getting the following error markMe is not defined markMe(val.lat, val.lng, val.name, val.description, val.logo);

Nicholas King · Accepted Answer · 2012-06-25 10:05:42Z

1

Before answering id like to point out that i am making some assumptions.

I assume that the above array is in php
I assume that the below function is javascript

if that is the case you can just put array references into the javascript function and it will work.

Im guessing at your data mappings and I would suggest that a better method would be to build the whole function up by php and output it to the screen with a method call to make the code easier to read/understand

However with a guess at your mappings and to test to see if the code works before creating a method call i would run with something like this as a first stab.

<script type="text/javascript">
<?php
 foreach($array as $point)
 {
?>
 {
 map.addMarker({
  lat: <?php print $point["lat"]; ?>,
  lng: <?php print $point["lng"]; ?>,
  title: <?php print $point["name"]; ?>,
     icon: <?php if(!is_null($point["logo"]){ print $point["logo"];} ?>,
     infoWindow: {
       content: <?php print $point["about"]; ?>
     }
 });
 <?php } ?>
</script>

Thanks

Nicholas

answered Jun 25, 2012 at 10:05

Nicholas King

9387 silver badges22 bronze badges

13 Comments

Harsha M V Over a year ago

with $.each function i am able to do the iteration. But it says the function is missing

Nicholas King Over a year ago

sorry my answer was given before the question was edited and it was not apparent you were making JSON calls.

Harsha M V Over a year ago

i am not making json calls still. I am converting the Array into json and assigning it to a variable

Nicholas King Over a year ago

is the top array in php or js?

Harsha M V Over a year ago

PHP.. which i am json_encoding in the next step. Edited my Question to show the clarity

|

Collectives™ on Stack Overflow

Passing PHP Array into Javascript

2 Answers 2

1 Comment

13 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

13 Comments

Your Answer

Sign up or log in

Post as a guest

Related