wixData.get() - unable to use results

[ken-yeh]

I’m trying to build a “similar products” gallery with a reference to another item in the collection using its item ID. The .get() function lets me define an item “relatedItem” with the results but I’m having trouble using the defined item “relatedItem”.

My goal is to just identify an item ID in one of the fields of my current item, then pull up its frontImage value as the source for one of my gallery images.

The current item has image fields where I’ve manually put images (as shown by the other 3 image slots in the gallery).

The bolded part is where it gives me an undefined variable error.

Any guidance would be much appreciated.

import wixData from ‘wix-data’;
import wixWindow from ‘wix-window’;

$w.onReady(() => {
$w(‘#dynamicDataset’).onReady(() => {
let item = $w(‘#dynamicDataset’).getCurrentItem();
$w(‘#styleImageGallery’).items = [
{src: item.frontImage},
{src: item.closeImage},
{src: item.backImage}
];

wixData.get("ProductPages", item.relatedItem1Id).then( (results) => { 
	let relatedItem = results; 
} ) 
.catch( (err) => { 
	let errorMsg = err; 
 } ); 

$w('#relatedStylesGallery').items = [ 
	{src:  **relatedItem.frontImage** , title: item.relatedStyle1, link: "/style-detail-page/".concat(item.relatedStyle1)}, 
	{src: item.relatedStyle2Image, title: item.relatedStyle2}, 
	{src: item.relatedStyle3Image, title: item.relatedStyle3}, 
	{src: item.relatedStyle4Image, title: item.relatedStyle4} 
]; 

});
});

[_tal]

Hi,
Note that the wixData.get function returns a Promise . In order to resolve it, I would try to set the $w(’ #relatedStylesGallery ').items inside the wixData.get function, as demonstrated below:

import wixData from 'wix-data';
import wixWindow from 'wix-window';

$w.onReady(() => {
 $w('#dynamicDataset').onReady(() => {
   let item = $w('#dynamicDataset').getCurrentItem();
   $w('#styleImageGallery').items = [
     {src: item.frontImage},
     {src: item.closeImage},
     {src: item.backImage}
   ];
   wixData.get("ProductPages", item.relatedItem1Id)
     .then( (results) => {
   	let relatedItem = results;
        $w('#relatedStylesGallery').items = [ 
          {src: relatedItem.frontImage, 
          title: item.relatedStyle1, 
          link: "/style-detail-page/".concat(item.relatedStyle1)}, 
          {src: item.relatedStyle2Image, 
          title: item.relatedStyle2}, 
          {src: item.relatedStyle3Image, 
          title: item.relatedStyle3}, 
          {src: item.relatedStyle4Image, 
          title: item.relatedStyle4} ];
     })
     .catch( (err) => {
   	let errorMsg = err;
     });
 });
});

Have a good day,
Tal.

[ken-yeh]

Hi Tal,

Is there another way to reference a related item’s ID than using my current method of copy/pasting the ID into a collection field of the current item?

The reason I’m asking is because the get function as its coded now is not resolving.

Copied ID from Style 1758

Into the Related Style 1 ID field of Style 1757

Also, Is it possible to use the collection’s primary field instead of the ID?

[_tal]

Hey,
You can use a reference field in case you have database relations.
Click here to learn more Reference Fields.
Click here to learn more about How to Create a Reference Field.

Best,
Tal.

[ken-yeh]

Reference Fields are referring to items in different Collections. I’m trying to refer to items in the same Collection. Is there an approach you can recommend for this?

[_tal]

Hey,
The best solution to refer to items in the same Collection is by using the " _id " attribute since this is a unique string of each record.

Tal.

[ken-yeh]

Right I understand the _ID attribute is the best way to go about it, my question is how would I go about implementing that? Is there a general example you can provide?

I mentioned earlier that I just copied/pasted the _ID attribute from one item to another.

Copied ID from Style 1758

Into the Related Style 1 ID field of Style 1757

I then try to call up the ID using this, but it does not work ( bolded ):

import wixData from ‘wix-data’;
import wixWindow from ‘wix-window’;

$w.onReady(() => {
$w(‘#dynamicDataset’).onReady(() => {
let item = $w(‘#dynamicDataset’).getCurrentItem();
$w(‘#styleImageGallery’).items = [
{src: item.frontImage},
{src: item.closeImage},
{src: item.backImage}
];

wixData.get(“ProductPages”, item.relatedItem1Id)
.then( (results) => {
let relatedItem = results;
$w(‘#relatedStylesGallery’).items = [
{src: relatedItem.frontImage, title: item.relatedStyle1, link: “/style-detail-page/”.concat(item.relatedStyle1)} ];
})
.catch( (err) => {
let errorMsg = err;
});
});
});

[_tal]

Hey,
You can find a general information about how to use the function in the documentation of the get function.
Another option is using the query function:

import wixData from 'wix-data';


wixData.query("ProductPages") 
  .eq("_id", item.relatedItem1Id) 
  .find() 
  .then( (results) => { 
       let firstItem = results.items[0]; 
   })
  .catch( (err) => { 
      let errorMsg = err; 
   });
   
 

Should the issue persists, please send us the site URL and the page to which the code was added so that I can have a look.

Moreover, note that you can debug the code to better understand what causing the issue.

Thanks,
Tal.

[ken-yeh]

You’re awesome, thanks Tal. Your recommendation on using query() works much better for my scenario.

Thank you for your patience and attention on this! Cheers.

[ken-yeh]

Alrighty, I need some help figuring out why the page works on Mobile but not on Desktop… Here’s the link:
https://ken28914.wixsite.com/kennethwinston-dynam/style-detail-page/1757

Here’s the code:
import wixData from ‘wix-data’;
import wixWindow from ‘wix-window’;

$w.onReady(() => {
$w(‘#dynamicDataset’).onReady(() => {
let item = $w(‘#dynamicDataset’).getCurrentItem();
$w(‘#styleImageGallery’).items = [
{src: item.frontImage},
{src: item.closeImage},
{src: item.backImage}
];

wixData.query("ProductPages")  
	.eq("title", item.relatedStyle1)  
	.find()  
	.then( (results) => {  
   		let RelatedItem1 = results.items[0]; 
   		
   			wixData.query("ProductPages")  
				.eq("title", item.relatedStyle2)  
				.find()  
				.then( (results) => {  
   				let RelatedItem2 = results.items[0]; 
   					wixData.query("ProductPages")  
						.eq("title", item.relatedStyle3)  
						.find()  
						.then( (results) => {  
   						let RelatedItem3 = results.items[0]; 
   							wixData.query("ProductPages")  
							.eq("title", item.relatedStyle4)  
							.find()  
							.then( (results) => {  
   							let RelatedItem4 = results.items[0]; 
   								$w('#relatedStylesGallery').items = [ 
									{src: RelatedItem1.frontImage, title: RelatedItem1.title, link: "/style-detail-page/".concat(RelatedItem1.title)}, 
									{src: RelatedItem2.frontImage, title: RelatedItem2.title, link: "/style-detail-page/".concat(RelatedItem2.title)}, 
									{src: RelatedItem3.frontImage, title: RelatedItem3.title, link: "/style-detail-page/".concat(RelatedItem3.title)}, 
									{src: RelatedItem4.frontImage, title: RelatedItem4.title, link: "/style-detail-page/".concat(RelatedItem4.title)} 
								]; 
   					
							}) 
							.catch( (err) => {  
  							let errorMsg = err; 
  		
					}); 
						}) 
						.catch( (err) => {  
  							let errorMsg = err; 
  		
					}); 
			}) 
				.catch( (err) => {  
  					let errorMsg = err; 
  		
			}); 
	}) 
	.catch( (err) => {  
  		let errorMsg = err; 
  		
}); 

});
});

export function button1_click(event, $w) {
wixWindow.openLightbox(‘Full Size Images’, $w(‘#dynamicDataset’).getCurrentItem());
}

export function styleImageGallery_click(event, $w) {
wixWindow.openLightbox(‘Full Size Images’, $w(‘#dynamicDataset’).getCurrentItem());
}

[ken-yeh]

Ok it seems to work fine for mobile Safari and Chrome (mobile and desktop).

The desktop Safari pulls up this error:

[blocked] The page at https://ken28914.wixsite.com/kennethwinston-dynam/style-detail-page/1757 was not allowed to display insecure content from http://daaf1cd8-d4e7-422a-84e5-3b312acf07a4.static.pub.wix-code.com/static/v2/d62db30e-c9ed-42a6-9339-7f2139f3860c/daaf1cd8-d4e7-422a-84e5-3b312acf07a4/pages/lxf5m.js.map?empty-if-missing=true&exclude=wix-&module-name=lxf5m.

[Error] Failed to load resource: the server responded with a status of 404 (HTTP/2.0 404) (mobx.umd.min.js.map, line 0)

[_tal]

Hey,
It seems like you were trying to add an HTTP URL to your secured site. Note that you can use only HTTP S when adding HTML component to your site. Click here to learn more About SSL and HTTPS.

Have a good day,
Tal.

[ken-yeh]

The issue here is that the error is referring to image assets in the collection that was placed using the Wix Content Manager. I don’t have control over the URL. Is this an issue on the Wix-end?