JSON编码PHP数组准备好jQuery自动完成

我试图将一个PHP数组传递给我的视图，然后使用该数组填充jQuery自动完成

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>

如果我输入console.log autocompleteData，它在结构上看起来像一个JSON对象，但实际上不是

如果我这样做：

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

---

然后是consolelog，每个autocompleteData产品都是一个正确的JSON对象，autocomplete的工作原理与预期一致。

您需要将

.text（）

的字符串输出转换为JSON：

source: jQuery.parseJSON(autocompleteData)

---

当您手动输入它时，您输入的是实际的JSON，这就是它工作的原因。

尝试在调用$.parseJON时包装

autocompleteData

，如下所示：

$( document ).ready(function() {

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

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

});

---

编辑@George击败了我。

在JS中，

console.log（autocompleteData）

的输出是什么？[{“label”：“Toybox”，“id”：1，“value”：“Toybox”}，{“label”：“Shoe”，“id”：2，“value”：“Shoe”}，{“label”：“egs”，“id”：3，“value”：“egs”}]，如果我按照我的问题中的最后一个代码块在JS中手动输入，console.logging会告诉我[对象，对象，对象]和自动完成功能。

$( document ).ready(function() {

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

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

});