AJAX: Problems returning multiple variables - php

Question

First off sorry if I'm missing something simple just started working with AJAX today. I have an issue where I'm trying to get information from my database, but different records have different amounts of values. For instance, each record has a "features" column. In the features column I store a string. (ex: Feature1~Feature2~Feature3~Feature4... ) When I'm building the object I take apart the string and store all the features into an array. Some objects can have 1 feature others can have up to whatever. So... how do I return this values back to my ajax function from my php page? Below is my ajax function that I was trying and I'll provide a link with my php file. [ next.php : http://pastebin.com/SY74jV7X ]
$("a#next").click(function()
{
$.ajax({
type : 'POST',
url : 'next.php',
dataType : 'json',
data : { nextID : $("a#next").attr("rel") },
success : function ( data ) {
var lastID = $("a#next").attr("rel");
var originID = $("a#next").attr("rev");
if(lastID == 1)
{
lastID = originID;
}
else
{
lastID--;
}
$("img#spotlight").attr("src",data.spotlightimage);
$("div#showcase h1").text(data.title);
$("div#showcase h2").text(data.subtitle);
$("div#showcase p").text(data.description);
$("a#next").attr("rel", lastID);
for(var i=0; i < data.size; i++)
{
$("ul#features").append("<li>").text(data.feature+i).append("</li>");
}
/*
for(var j=1; j < data.picsize; j++)
{
$("div.thumbnails ul").append("<li>").text(data.image+j).append("</li>");
}
*/
},
error : function ( XMLHttpRequest, textStatus, errorThrown) {
$("div#showcase h1").text("An error has occured: " + errorThrown);
}
});
});

Answer 1

First replace the below in your next.php file:
for ( $i=0; $i < $arraySize; $i++ )
{
$return['feature'.$i.''] = $features[0];
}
With:
$return['features'] = $features;
P.S: the current code is wrong you should have ... = $features[$i]; anyway, you don't need that just send the array as is. and then in the JS part replace:
for(var i=0; i < data.size; i++)
{
$("ul#features").append("<li>").text(data.feature+i).append("</li>");
}
With:
$.each(data.features, function(k,v){
var li = '<li>' + v + '</li>';
$("ul#features").append(li);
});
This way, don't need the data.size anymore.