From PHP array to jQuery array sent via ajax

Question

Now this is a pretty simple question, but due to my lack of jQuery knowledge I have to ask this..

In JS I have this variable, which is an array of marker data for Google Maps:

var Locations = {
        1: {
            info: '1. New Random info and new position',
            lat: -37,
            lng: 124.9634
        },
        2: {
            info: '2. New Random info and new position',
            lat: 70,
            lng: 14.5144
        },
        3: {
            info: '3. New Random info', 
            lat: 30,
            lng: 24.5144
        },
        4: {
            info: '4. New Random info', 
            lat: 34,
            lng: 26.5144
        },
        5: {
            info: '5. 55555. Added',
            lat: -37,
            lng: 0
        }
    };

I then have an ajax call to retrieve a new array of locations with PHP. The PHP looks like this example (note that I echo 3 pieces of data delimited by | ):

$arrayccordinates = array(); 
$countercords = 0;
echo 'Data1 |';
echo 'Data2 |';
foreach ($results as $result) {
    $countercords = $countercords + 1;
    $arrayccordinates[] = array( $countercords => array( 'info' => $infos, 'lat' => $latdata, 'lng' => $lngdata ) 
    );
}
echo json_encode($arrayccordinates);

Here is the ajax call. Here I split the 3 data pieces up and the locations array is found in arr[2].:

//Ajax code
var interval = 5000;  // 5000 ms = 5 secs
function doAjax() {
    jQuery.ajax({
            type: 'POST',
            url: '/codes/LiveVisitsStats/postlivecounter.php',
            dataType : 'html',
            success: function (data) {
            var arr = data.split('|');
                    jQuery('#counterint').html(arr[0]);
                    jQuery('#extrainfoscounter').html(arr[1]);   
                    jQuery('#testdiv').html(arr[2]);  

            var newlocations = arr[2];        
                },
            complete: function (data) {
                    // Schedule the next
                    setTimeout(doAjax, interval);
            }
    });
}

Now, I have tested this and it doesn´t seem to work. The array from PHP stored in "newlocations" variable does not seem to work as the original "Locations" variable. I have really no clue what I´m doing wrong, though I suspect my use of json_encode is completely wack..

Are you using jQuerys' data option for your ajax requests? scratch that. i understand. — Mic1780
– Mic1780, Commented Aug 22, 2014 at 17:08
I´m more or less using the ajax script I have posted. I have set datatype to HTML, which probably is wrong in this case. The problem is that I really have no clue when it comes to this kind of ajax handling and JS arrays.. — GeniusDesign
– GeniusDesign, Commented Aug 22, 2014 at 17:10
have you tried changing your dataType to json? When you send json_encode data from a php script to the success function of ajax, you can then use the associative array like data.key1 or the index like data[0].innerKey — Mic1780
– Mic1780, Commented Aug 22, 2014 at 17:13

Marc B · Accepted Answer · 2014-08-22 17:16:19Z

1

You're setting the datatype to html, but sending JSON. If you set datatype: json, then jquery will decode the json into a native JS array for you.

And besides, since you ARE outputting JSON from PHP, there almost certainly won't be ANY | characters in the string to split on.

answered Aug 22, 2014 at 17:16

Marc B

362k44 gold badges433 silver badges508 bronze badges

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

Comments

Mic1780 · Accepted Answer · 2014-08-22 17:18:56Z

1

As i mentioned in my comments: if you change dataType from html to json you can use the argument inside the success function like you would an array object in javascript.

answered Aug 22, 2014 at 17:18

Mic1780

1,79410 silver badges23 bronze badges

Comments

Axel Amthor · Accepted Answer · 2014-08-22 17:26:32Z

0

Your "array" looks like this:

var Locations = {
        1: {
            info: '1. New Random info and new position',
            lat: -37,
            lng: 124.9634
        },
        2: {
            info: '2. New Random info and new position',
            lat: 70,
            lng: 14.5144
        },
        3: {
            info: '3. New Random info', 
            lat: 30,
        ...

which is not an array, but an object with properties 1, 2, 3 etc. pointing to an object

Your php json_encode will return:

[
   { "1": {
        info: '1. New Random info and new position',
        lat: -37,
        lng: 124.9634
    }},
    { "2": {
        info: '1. New Random info and new position',
        lat: -37,
        lng: 124.9634
    }},
    ...

which is a valid array of objects having a property "1", "2", etc pointing to a nested object - quite a difference.

Either change the layout of your initial object (and the code accessing) or don't use json_encode

edited Aug 22, 2014 at 17:26

answered Aug 22, 2014 at 17:19

Axel Amthor

11.1k1 gold badge28 silver badges45 bronze badges

5 Comments

GeniusDesign Over a year ago

Thanks, that pretty much hits the nail on its head, I think. Then my question is.. What is the easiest way to "convert" my json array to an object, identical to the "Locations" variable? (of course with new updated data)

GeniusDesign Over a year ago

Maybe I could do something like this in ajax success data function??: var myNewObj = jQuery.parseJSON(data);

Axel Amthor Over a year ago

Chang this line $arrayccordinates[] = array( $countercords => array( 'info' => $infos, 'lat' => $latdata, 'lng' => $lngdata ) to $arrayccordinates[$countercords] = array( 'info' => $infos, 'lat' => $latdata, 'lng' => $lngdata ); and use json_encode(...., JSON_FORCE_OBJECT) in oder to force an object and you're pretty much done.

GeniusDesign Over a year ago

I could almost kiss you right now! Absolutely brilliant! That did the trick and now it´s working as needed, thank you so much, good sir!

GeniusDesign Over a year ago

hehem ok then. I will try to restrain myself

GeniusDesign · Accepted Answer · 2014-08-22 18:07:36Z

Thanks to Axel Amthor I figured it all out. I just needed to change 2 minor things.

Firstly I needed to change the PHP code to this:

$arrayccordinates = array(); 
$countercords = 0;
foreach ($results as $result) {
$countercords = $countercords + 1;
$arrayccordinates[$countercords] = array( 'info' => $result->info, 'lat' => $result->lat, 'lng' => $result->lng);
}
echo json_encode($arrayccordinates);

Then I needed to modify my Ajax call slightly into this:

//Ajax code
var interval = 5000;  // 1000 = 1 second, 3000 = 3 seconds
function doAjax() {
    jQuery.ajax({
            type: 'POST',
            url: '/codes/LiveVisitsStats/postlivecounter.php',
            dataType: "json",
            success: function (data) {

            var NewLocation = data;                                                   

            },
            complete: function (data) {
                    // Schedule the next
                    setTimeout(doAjax, interval);
            }
    });
}
setTimeout(doAjax, interval);

Of course I then need to make seperate ajax calls for other kind of ajax updates..

Collectives™ on Stack Overflow

From PHP array to jQuery array sent via ajax

4 Answers 4

Comments

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related