How to work with jQuery AJAX and PHP array return

Question

I have a jquery ajax request like;

$.ajax({
    type: 'POST',
    url: 'processor.php',
    data: 'data1=testdata1&data2=testdata2&data3=testdata3',
    cache: false,
    success: function(result) {
      if(result){
        alert(result);
      }else{
        alert("error");
      }
    }
});

The handler processor.php is set to return an array like;

$array = array("a","b","c","d");
echo $array;

I want to do action in client side based on this. Say if array[0] is 'b', I want to alert "hi". Again if array[2] is 'x', I want to alert "hello", and so on. How can I filter array elements in order to grab their data?

Solution 1

You will have to return the array encoded in the json form like following

$array = array("a","b","c","d");
echo json_encode($array);

then you can access it in javascript converting it back to an array/object like

var result = eval(retuned_value);

You can also navigate through all array elements using a for loop

for (var index in result){
    // you can show both index and value to know how the array is indexed in javascript (but it should be the same way it was in the php script)
    alert("index:" + index + "\n value" + result[index]);
}

---

in your code it should look something like:

PHP Code:

$array = array("a","b","c","d");
echo json_encode( $array );

jQuery script

$.ajax({
    type: 'POST',
    url: 'processor.php',
    data: 'data1=testdata1&data2=testdata2&data3=testdata3',
    cache: false,
    success: function(result) {
      if(result){
        resultObj = eval (result);
        alert( resultObj );
      }else{
        alert("error");
      }
    }
});

Solution 2

Return JSON from php http://php.net/manual/en/function.json-encode.php

and in javascript create an object from the json string, you can do this with using getJSON instead of ajax http://api.jquery.com/jQuery.getJSON/

Make sure your php sets the right response header:

 header ("content-type: application/json; charset=utf-8");

Solution 3

I find the best way to return an array from php to Ajax (jscript):

on the php side: echo json_encode($myArray); on the javascript side (e.g. myAjax.responseText) replyVal = JSON.parse(myAjax.responseText);

To send arrays TO php from javascript, use the matching JSON.stringify() to send and php json_decode() to receive

Solution 4

In your PHP code encode the array as JSON object

echo json_encode($array);

Then you need to convert the JSON object into a Javascript/jQuery-compatible object. Afterwards you can convert back to an array

$.ajax({
      success: function(result) {

      jq_json_obj = $.parseJSON(result); //Convert the JSON object to jQuery-compatible

      if(typeof jq_json_obj == 'object'){ //Test if variable is a [JSON] object
        jq_obj = eval (jq_json_obj); 

        //Convert back to an array
        jq_array = [];
        for(elem in jq_obj){
            jq_array.push(jq_obj[elem]);
        }
        console.log(jq_array);
      }else{
        console.log("Error occurred!"); 
      }
    }
});

View more solutions

Comments

[Ram]

-1 No need to use eval.

[Janaka R Rajapaksha]

i got it worked with eval but not worked without eval. also my php script didnt set to any specific header like HMR says on below answer.