autocomplete source from php file

I'm quite newbie in JSON, just started it the last night, I'm very close to the deadline of a project, I used xml, and tried now to switch to json. I started with the simplest representation of a json object, let me go to code:

PHP Code:

<?php
//phpPage.php
$json = array();
$json[]='Jquery';
$json[]='AJAX';
$json[]='JSON';
//for example

echo json_encode($json);
?>

js code:

$(document).ready(function(){  
  $.post('phpPage.php', { /*no matter*/ }, showResult, "text");  
});

function showResult(res)开发者_高级运维{
  var obj = JSON.parse(res);
  $("input#autocomplete").autocomplete({
    source: function() {
        var rows = new Array();
        for(var i=0; i<3; i++){//Assume that I know array size, skip it
            //what to do here?
        }
        return rows;
    }
  });
}

I don't know how to convert the sent object to an array ready to be used in the 'source' of the autocomplete. Thanks for your time, Regards!

The solution:

<script type="text/javascript">
$(document).ready(function(){  
  $.post('phpPage.php', { /**/ }, showResult, "text");  
});

function showResult(res){
  var obj = JSON.parse(res);
  $("input#autocomplete").autocomplete({
    source: obj
  });
}
</script>

use jquery's getJSON() function (if you can GET).

OR

$.post('phpPage.php', { /*no matter*/ }, showResult, "json"); 

function showResult(data){
  $("input#autocomplete").autocomplete({
    source: data;
  });
}

Well there are a couple things that I would change and a couple things you are doing right. First your post request can encode the json all by it's self. Take a look at your line

$.post('phpPage.php', { /*no matter*/ }, showResult, "text");  

and change it to

$.post('phpPage.php', { /*no matter*/ }, showResult, "json");  

jQuery will parse the json and turn it into an object.

Now for an explanation, when you use encode_json() with php it does not create a json object all php does is format at an array like an object for JS to then turn into json.

What you are doing with JSON.parse is taking the string that php returns that will probably look like this

{"1":"jquery", "2":"AJAX","3":"JSON"}

with your example, and turning it into an object in JS.

Now for the important part. Objects in JS can be treated as an associative array, this means that they are array where the key is the index. So manipulation of an object or traversing an object can be very easy.

So you have the function showResult(res) if you want to traverse the json object and print results to the screen its pretty darn easy. First I want to change your for loop to a for...in then we just use your json object like an array

function showResult(res){
  var obj = JSON.parse(res);
  $("input#autocomplete").autocomplete({
    source: function() {
        var rows = new Array();
        for (x in obj){//Assume that I know array size, skip it
            $('body').append(obj[x]+'<br>');
        }
        return rows;
    }
  });
}

The only thing I changed in your code is

for (x in obj){//Assume that I know array size, skip it
    $('body').append(obj[x]+'<br>');
}

This will traverse the array and plug in the correct key where x is to use every single value of the json object and add it to the body on a new line.

Now to use it with autocomplete is what ever those plugin docs say. I hope this helps you a little.