JSON кодирует массив PHP, готовый для автозаполнения jQuery

Я пытаюсь передать массив PHP в мое представление, а затем использовать этот массив для заполнения jQuery autocomplete.

foreach ($products as $product)
{               
    $productsArray[] = array('label' => $product->getName()  ,'id' => $product->getId() , 'value' => $product->getUrlSafeName());                           
}

$productsJson = json_encode($productsArray);

$productsJson затем передается в представление, где я вставляю его в DOM. Я использую Twig в качестве шаблона для моделирования:

<div id="autocompleteData">{{ productsJson }}</div>

а затем мой jQuery:

$( document ).ready(function() {

    var autocompleteData = $('#autocompleteData').text();       

    $('#findoffice_location').autocomplete({ 
         source: autocompleteData,
         change: function (event, ui) {  } });

});

Если я console.log autocompleteData, он выглядит как объект JSON в структуре, но это не так.

Если я сделаю:

var autocompleteData = [{"label":"Toybox","id":1,"value":"toybox"},{"label":"Shoe","id":2,"value":"shoe"},{"label":"Eggs","id":3,"value":"eggs"}];

а затем консольный журнал, каждый продукт autocompleteData является надлежащим объектом JSON, и автозаполнение работает, как ожидалось.