Question

Hello fellow StackOverflowers!

I have some information in a database that I need pulled out and put into javascript context.

I am successfully getting the data with mysqlli:

$mysqli = new mysqli("localhost", "censored", "censored", "censored");

/* check connection */
if (mysqli_connect_errno())
{
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}

$query = "SELECT * FROM foodstuff";

The foodstuff_categories contain:

• id, category_id, category and language.
• example: 1, 1, vegetables, en

The foodstuff contain:

• id, category, name and language
• example : 1, 1, potato, en

category in foodstuff is the same as category_id in foodstuff_categories.

foodstuff_categories contains the name of the category whilst foodstuff contains the name of the foodstuff.

Problem:
I need to make an object out of the database data that is compliant with jQuery UI’s autosuggestion widget which looks like this:

 var availableTags =
 [
    { label: "veal"  , category: "meat" },
    { label: "potato", category: "vegetables" }
 ];

I am currently calling the php script with:

$.get('php/dbFoods.php', function(data)
{
    //gotta do something with that data! :)
});

my thoughts
I think i need to join some information in the select statement and then find a smart way to turn that data into an object compliant with the jquery UI widget.

appended inoformation after answer has been given

Use the alteriative answer in the accepted answer.

The jquery ui autocomplete from database requires more information than is immediately apparent! Refer to this page: http://www.simonbattersby.com/blog/jquery-ui-autocomplete-with-a-remote-database-and-php/

Answer 1

Untested:

...
$query = "
  SELECT fc.`category` AS category, f.`name` AS label
  FROM `foodstuff` AS f 
  INNER JOIN `foodstuff_categories` AS fc 
  ON fc.`category_id` = f.`category`
";
$res = $mysqli->query($query);
$rows = array();
while ($data = $res->fetch_assoc()) {
    $rows[] = $data;
}
// convert iso to utf8 data 
function encodeArray($array) {
    foreach ($array as $index => $row) {
        $array[$index] = array(
            'category' => mb_check_encoding($row['category'], 'UTF-8') ? $row['category'] : utf8_encode($row['category'])
            , 'label' => mb_check_encoding($row['label'], 'UTF-8') ? $row['label'] : utf8_encode($row['label'])
        );
    }
    return $array;
}
echo json_encode(encodeArray($rows));

Alternative:

...
$mysqli->query("SET NAMES 'utf8'", $connection); // from now on return data in utf8 format (only)
$query = "
  SELECT fc.`category` AS category, f.`name` AS label
  FROM `foodstuff` AS f 
  INNER JOIN `foodstuff_categories` AS fc 
  ON fc.`category_id` = f.`category`
";
$res = $mysqli->query($query);
$rows = array();
while ($data = $res->fetch_assoc()) {
    $rows[] = $data;
}
echo json_encode($rows);

The query builds an associative array with the given structure. json_encode() builds an JSON for the client. jQuery can automatically convert the JSON to an object which could be parsed by javascript. Possibly you should add the dataType parameter (here ‘json’) to your jQuery get:

$.get('php/dbFoods.php', function(data)
{
    //gotta do something with that data! :)
}, 'json');