Glad that it works.
To make the data array dynamically, you can follow these steps:
1. You'll create a new post view to get all "Products" posts and select the "List with separators" in the loop wizard.
The Loop Editor content will look like this:
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop>
[wpv-item index=other]
{ id: 0, text: '-select-'}, { id: [wpv-post-id], text: '[wpv-post-title]', img: '[wpv-post-featured-image size="full" output="url"]' },
[wpv-item index=last]
{ id: [wpv-post-id], text: '[wpv-post-title]', img: '[wpv-post-featured-image size="full" output="url"]' }
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
{ id: , text: 'No items found'}
[/wpv-no-items-found]
[wpv-layout-end]
Please note how I've used the "wpv-post-id", "wpv-post-title", and "wpv-post-featured-image" shortcodes, to get the ID, title and the featured image's URL, respectively.
( ref: https://toolset.com/documentation/programmer-reference/views/views-shortcodes/ )
If you need an image other than the featured image, for example from a Type's image custom field, you can use the Types fields API shortcode in place of "wpv-post-featured-image".
( ref: https://toolset.com/documentation/customizing-sites-using-php/functions/ )
2. To get this newly created view's output in the code snippet that I shared earlier, you can use "render_view" function:
( ref: https://toolset.com/documentation/programmer-reference/views-api/#render_view )
Example, the existing data array part:
var data = [
{
id: 0,
text: '-select-',
},
{
id: 123,
text: 'Product A',
img: '<em><u>hidden link</u></em>'
},
{
id: 456,
text: 'Product B',
img: '<em><u>hidden link</u></em>'
}
];
Will become:
var data = [
<?php
$args = array(
'title' => 'View to get raw products data',
);
echo render_view( $args );
?>
];
Please replace "View to get raw products data" with your actual view's title.