How to return an array from an AJAX call?

Question

I'm searching for a better solution to making an AJAX call with jQuery, having the PHP file return an array, and have it come out client-side as a Javascript array. Here is what I have been doing this:

PHP File (Example.php):

<?php
    $id_numbers = array('NES-ZL','NES-AL','SNS-ZL');

    for ($i=0; $i<count($the_array); $i++){
        echo $id_numbers[$i];
        echo '|';
    }
?>

JS File:

id_numbers = new Array();
$.ajax({
    url:"Example.php",
    type:"POST",
    success:function(msg){
        id_numbers = msg.split('|');
    }
});

My current method is just a little too convoluted for my taste.

What I'd like to do is to be able to just

return $id_numbers;

on the PHP side and directly translate it to a Javascript array after the AJAX call.

Ideas, anyone?

score 143 · Accepted Answer · edited Oct 09 '18 at 17:32

143

Use JSON to transfer data types (arrays and objects) between client and server.

In PHP:

In JavaScript:

PHP:

echo json_encode($id_numbers);

JavaScript:

id_numbers = JSON.parse(msg);

As Wolfgang mentioned, you can give a fourth parameter to jQuery to automatically decode JSON for you.

id_numbers = new Array();
$.ajax({
    url:"Example.php",
    type:"POST",
    success:function(msg){
        id_numbers = msg;
    },
    dataType:"json"
});

edited Oct 09 '18 at 17:32

MorganFreeFarm

3,811
8
23
46

answered Jan 11 '12 at 17:41

Alex Turpin

46,743
23
113
145

1

Incredibly helpful! It will definitely make everything simpler and prettier. – k_sel Jan 11 '12 at 19:52
3

@k_sel it's pretty much an industry standard. Everyone uses this for AJAX. You'll notice that JSON is also valid JavaScript. – Alex Turpin Jan 11 '12 at 20:27
2

Don't forget to use `async: false` – Yuri Feb 22 '17 at 07:52
For other noobs: The response must be pure json. I had some HTML in it, a comment. No error message, just failed. – Ralf Jul 28 '19 at 19:55
Thanks a lot. Its really helpful for me – A.A Noman Aug 31 '20 at 07:40

score 10 · Answer 2 · answered Jan 11 '12 at 17:41

10

Have a look at json_encode() in PHP. You can get $.ajax to recognize this with the dataType: "json" parameter.

answered Jan 11 '12 at 17:41

Wolfgang Stengel

2,867
1
17
22

score 1 · Answer 3 · answered Feb 13 '13 at 01:19

@Xeon06, nice but just as a fyi for those that read this thread and tried like me... when returning the array from php => json_encode($theArray). converts to a string which to me isn't easy to manipulate esp for soft js users like myself.

Inside js, you are trying to get the array values and/or keys of the array u r better off using JSON.parse as in var jsArray = JSON.parse(data) where data is return array from php. the json encoded string is converted to js object that can now be manipulated easily.

e.g. foo={one:1, two:2, three:3} - gotten after JSON.parse

for (key in foo){ console.log("foo["+ key +"]="+ foo[key]) } - prints to ur firebug console. voila!

Weird as it may be, if you are working with multidimensional arrays, try and `json_encode` the inner arrays, thus `$parent_array = array (json_encode($child_array));` . It worked in my case. — Hlawuleka MAS, Jan 22 '17 at 21:56

score 0 · Answer 4 · edited Aug 18 '20 at 22:02

well, I know that I'm a bit too late, but I tried all of your solutions and with no success! So here is how I managed to do it. First of all, I'm working on an Asp.Net MVC project. The Only thing I changed was in my c# method getInvitation:

public ActionResult getInvitation (Guid s_ID)
{
    using (var db = new cRM_Verband_BWEntities())
    {
        var listSidsMit = (from data in db.TERMINEINLADUNGEN where data.RECID_KOMMUNIKATIONEN == s_ID select data.RECID_MITARBEITER.ToString()).ToArray();
        return Json(listSidsMit);
    }
}

SuccessFunction in JS :

function successFunction(result) {
    console.log(result);
}

I changed the Method Type from string[] to ActionResult and of course at the end I wrapped my array listSidsMit with the Json method.

score 0 · Answer 5 · answered Jan 11 '12 at 17:41

Have a look at json_encode (http://php.net/manual/en/function.json-encode.php). It is available as of PHP 5.2. Use the parameter dataType: 'json' to have it parsed for you. You'll have the Object as the first argument in success then. For further information have a look at the jQuery-documentation: http://api.jquery.com/jQuery.ajax/

score 0 · Answer 6 · edited Dec 25 '15 at 14:55

0

Php has a super sexy function for this, just pass the array to it:

$json = json_encode($var);

$.ajax({
url:"Example.php",
type:"POST",
dataType : "json",
success:function(msg){
    console.info(msg);
}
});

simples :)

edited Dec 25 '15 at 14:55

skypjack

49,335
19
95
187

answered Jan 11 '12 at 17:41

Jamie Hutber

26,790
46
179
291

How to return an array from an AJAX call?

6 Answers6

Linked