title: jQuery Autocomplete update source with object - formatting the array
body: <p>Im trying to dynamically update jQuery UI source. I can do this fine with an array such as:</p>
  
  <pre><code>  var arrProducts = ['cheese' , 'bread' ,  'milk'];
  </code></pre>
  
  <p>But need to do it using an object. Before switching to using AJAX, this was working fine on first page load, passing in an array of objects from PHP into Twig:</p>
  
  <pre><code> var arrProducts = [
                        {% for product in allproducts %}
                            {
                                title:  "{{ product.title }}",
                                url:  "{{ product.url }}",                                 
                                label: "{{ product.label }}"                              
                            },
                        {% endfor %}
                ];
  </code></pre>
  
  <p>So , how can I replicate this formatting within javascript?  I've tried this: </p>
  
  <pre><code>                           var arrProducts = [];
  
                              $.each(data.products, function(index, product)
                              {
                                     prod['title'] = product.title;
                                     prod['url'] = product.url;
                                     prod['label'] = product.label;
  
                                     arrProducts.push(prod);
                              });                          
  
                             $('.searchBox' ).autocomplete( "option", "source", arrProducts );
  </code></pre>
  
  <p>But that produces nested objects , which then autocomplete seems not to be able to read properly . </p>