JQuery UI自动完成错误：未捕获TypeError：无法读取null的属性“label”

Question

when I start typing product names into the textbox I get the following error in my console output:

Uncaught TypeError: Cannot read property 'label' of null jquery-ui.js:45
a.extend.filter jquery-ui.js:45
e.extend.grep jquery.js:2
a.extend.filter jquery-ui.js:45
a.widget._initSource.a.isArray.source jquery-ui.js:45
a.widget._search jquery-ui.js:45
a.widget.search jquery-ui.js:45
(anonymous function)

Javascript

<script type="text/javascript">
 $('document').ready(function() {

    var products = <?php echo json_encode($products_arr); ?>;

    console.log(products); //products are displayed ok
   $("#product").autocomplete({
      source: products
   });
 });
</script>

My jquery works as I've tried the example in the the jquery docs.

I stepped through my products array limiting my sql results to 10 results at a time and it began to work until i got to 66. In the JS console output it shows me a null entry.

.."PN", null, "SS"]

I did remove all empty/null values which appears to fix it but can someone tell me why this might happen? I don't have any empty records in the DB.