(Resolved)How can i display gallery images from database based on id?

Ask the community
,
1

Im trying to fetch the images with code based on a owners id, a dataset doesn’t work

my code Ive tried

let userId = $w("#idText").text;

  $w.onReady(function () {

    wixData.query("workGalleryPictures", "image" ,userId)
 
        .find().then(results => {
            console.log(results)
            $w('#gallery1').items = results.items[0].image;
        });
});

3360×2100 1.25 MB

2

I’m not sure what you’re trying to do, but you first line is not in the right place. You need to keep every reference to $w inside the $w.onReady(){}.

3

Ok, I’ll change that, all those pictures with the same userId’s I want to display in a gallery with code? a dataset won’t work as there is 2 databases involved thanks

4

@millwards322 Your query is syntactically wrong. Try:

wixData.query("workGalleryPictures")
 .eq("image" ,userId)
 .find()
5

Also see here the structure of a gallery item:
https://www.wix.com/corvid/reference/$w/gallery/items

6

@jonatandor35 Thanks i did try your code above but the images aren’t appearing in the gallery display
it came up saying image is undefined

$w.onReady(function () {

 
let userId = $w("#idText").text;

    wixData.query("WorkGalleryPictures")
    .eq("image", userId)

 
        .find().then(results => {
            console.log(results)
            $w('#gallery1').items = results.items[0].image; // undefined image
        });
});
7

@millwards322 this line is wrong:

$w('#gallery1').items = results.items[0].image;

In this line you’re trying to assign a single src string (of a single image) to the gallery.
You have to assign an array of objects in this structure:

8

So Try:

//.....
.find().then(results => {
let items = results.items.map(e => {
return {src: e.image, title: e.title, type: "image"};
});
$w('#gallery1').items = items;
});
//...
9

still no good i tried

$w.onReady(function () {

 
let userId = $w("#idText").text;

    wixData.query("WorkGalleryPictures")
    .eq("image", userId)

      .find().then(results => {
let items = results.items.map(e => {
return {src: e.image, title: e.title, type: "image"};
});
$w('#gallery1').items = items;
});
 
        });
10

Hi still no good i tried

$w.onReady(function () {

 
let userId = $w("#idText").text;

    wixData.query("WorkGalleryPictures")
    .eq("image", userId)

      .find().then(results => {
let items = results.items.map(e => {
return {src: e.image, title: e.title, type: "image"};
});
$w('#gallery1').items = items;
});
 
        });
11

@millwards322 don’t forget to put this line at the top of the code (before the $w.onReady() ):

import wixData from 'wix-data';
12

@jonatandor35 Hi, yes thats already up the top of page, do you have any other suggestions thanks what the issue could be? also whist you mentioned the $w.onReady() ): i have about 6-7 of those on one page within my site and it’s quite laggy at times could this be why? should there only ever be one $w.onReady() per page?

13

@millwards322 You should add console.log() to find the error.

$w.onReady(function () {
let userId = $w("#idText").text;
console.log("userId", userId);
    wixData.query("WorkGalleryPictures")
    .eq("image", userId)
   .find().then(results => {
console.log("res", results);
console.log("res.items", results.items);
let items = results.items.map(e => {
return {src: e.image, title: e.title, type: "image"};
});
console.log("items", items);
$w('#gallery1').items = items;
}).catch(err => console.log("error", err));
        });

Look at your console and see what is logs.
In addition, make sure you have field keys: “image” and “title” in you collection,
Check your collection permission, check you data in the sandbox and live collections.

14

In addition this line doesn’t make sense:

.eq("image", userId)

You probably want to compare to the userId field:

.eq("userId", userId)
15

@jonatandor35

ok i managed to alter the code and now the images are being displayed but every single image is now displayed and not just the ones tied to the owners id’s within the column

 $w.onReady(function () {

 
let userId = $w("#dynamicDataset").getCurrentItem().id

    wixData.query("WorkGalleryPictures")
    .eq("image", userId)

      .find().then(results => {
let items = results.items.map(e => {
return {src: e.image, title: e.title, type: "image"};
});
$w('#gallery1').items = items;
});
 
        });
16

@millwards322 see my previous comment

17

@jonatandor35 Still no look it just outputs all the images in every row instead of just the owners images?

i tried this

.eq("userId", userId)

you can see the owner id’s do not match up in every image here

2880×1800 638 KB

18

@millwards322 I don’t see the result of
console . log ( “userId” , userId );
in the screenshot

19

@jonatandor35 Hi thanks i have figured out what the problem was i never put _id at the end of this line

let userId = $w("#dynamicDataset").getCurrentItem().id

this is the working code now thanks


$w.onReady(function () {
let userId = $w("#dynamicDataset").getCurrentItem()._id
console.log("userId", userId);
    wixData.query("WorkGalleryPictures")
    .eq("userId", userId)

   .find().then(results => {
console.log("res", results);
console.log("res.items", results.items);
let items = results.items.map(e => {
return {src: e.image, title: e.title, type: "image"};
});
console.log("userId", userId);
console.log("items", items);
$w('#gallery1').items = items;
}).catch(err => console.log("error", err));
        });