Autocomplete search result with only one record problem while selecting

Autocomplete search result with only one record problem while selecting

Database query result:
<dict>
  <product>
    <id>12345</id>
    <value>Product Name</value>
  </product>
</dict>

Js code:
 $(element).autocomplete({
            source: function (request, response) {
this.$autocomplete(function (result) //server side function to fetch data from db {
response(JSON.parse(result).root['dict'][product]);
});
},
 minLength: 2,
            position: { my: "right top", at: "right bottom" },
select: function (event, ui) {
             
                console.log(ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.id : "Nothing selected, input was " + this.value);
            }
});
autocomplete response fetches below response

response: "{"root":{"dict":{"product":{"id":"12345","value":"Product Name"}}}}"
 
but whenever going select , it unable to select id field

select: function (event, ui) {
             
                console.log(ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.id : "Nothing selected, input was " + this.value);
            }
getting  ui.item.id  is undefined

and value giving correctly to  ui.item.value is  Product Name

Thanks

One thing i have noticed that, response missed json array means data should be in array format even it contains single record.
e.g. result[ {{{....}}}} ]