Set repeater button value to referenced field by querying database

Ask the community
,
1

Hi. For some reason I can’t seem to assign the value of a referenced field in a database to a button in a repeater. I know it’s something basic that I am missing which is frustrating. Please let me know.

import wixData from 'wix-data';

$w.onReady(function () {
  $w("#repeater1").onItemReady( ($item, itemData, index) => {
    $item("#bookTitle").text = itemData.title;
    $item("#bookSubtitle").text = itemData.subtitle;
    $item("#bookButton").src = itemData.referencedBook; ----> this is where I want the value of the dynamic page of the referenced field to be assigned to the button 
  } );

  wixData.query("Books")
    .find()
    .then( (results) => {
      $w("#repeater1").data = results.items;
    } );
} );

Can someone please guide me on this. TIA.

2

In your query, you might need to include() the referenced field. Something like this:

wixData.query("Books")
  .include('referencedBook')
  .find()
  .then((results) => {
    $w("#repeater1").data = results.items;
  });
3

Hi. Yes. I missed that. I get the values in a console log. but how do i assign the button to that value of the referenced field.

Sorry. Just ignore the code above for a real example below:


import wixData from 'wix-data';

$w.onReady(function () {
  $w("#repeater1").onItemReady( ($item, itemData, index) => {
    $item("#text12").text = itemData.bikeType;
    $item("#text13").text = itemData.bikeName;
    $item("#button3").link = itemData.link-multifilter-1-title;  --> the link of the button should be the referenced field  values.
  } );

  wixData.query("multifilter")
    .include("barlocations")
    .find()
    .then( (results) => {
      $w("#repeater1").data = results.items;
      console.log(results.items[0]);
    } );
} );

_id: "f986b4b3-8f4e-4dcf-8fdd-8c50199d1dc4"
_owner: "f45dfa2f-60d1-4224-b07e-5cff48ca8f76"
_createdDate: "Sun Sep 12 2021 17:23:06 GMT+0530 (India Standard Time)"
bikeType: "Yamaha"
otherreference: "6635b4d6-8330-4707-a3c2-f2cd54127bd7"
_updatedDate: "Mon Feb 07 2022 15:05:23 GMT+0530 (India Standard Time)"
engineCc: 800
barReference: "c2bc0ebb-8731-436f-88d6-341dcd716c8b"
details: "125 cc | 69 kmpl | 99 Kg | 8.2 bhp. "
bikeName: "RayZR 125"
link-multifilter-1-title: "/multifilter-1/yamaha/rayzr-125"

how do i get the value of “barReference” which is the referenced field as the value to be assigned to the button link ?

4

There are a couple of ways to access an object’s property.

Instead of this:

$item("#button3").link = itemData.link-multifilter-1-title;

This method works as long as the property name is a valid Javascript identifier. However, link-multi filter-1-title is an invalid identifier so therefore the square brackets method needs to be used. You want this:

$item("#button3").link = itemData['link-multifilter-1-title'];
1 Like
5

Thanks @yisrael-wix this worked great. I have ONE more question if you can help me.

Now that I’ve got the ID of the referenced value field within the first database – barReference : “c2bc0ebb-8731-436f-88d6-341dcd716c8b” –

I want to query the second database called “barlocations”, and get a particular link from that database and assign to a specific button on the repeater. Do I just query the second database within the same loop?

I know I am wrong in assigning it in this way, but a guide would be great!

import wixData from 'wix-data';

$w.onReady(function () {
  $w("#repeater1").onItemReady( ($item, itemData, index) => {
    $item("#text12").text = itemData.bikeType;
    $item("#text13").text = itemData.bikeName;
    $item("#button3").link = itemData['link-multifilter-1-title'];
   

  //--> the link of the button should be the referenced field  values.
  } );

  wixData.query("multifilter")
    .include("barlocations")
    .find()
    .then( (results) => {
      $w("#repeater1").data = results.items;
      let barlocationid = results.items[0].barReference;
      

      console.log(barlocationid);

                wixData.query("barlocations")
                .eq("_id", barlocationid)
                .find()
                .then( (results) => {
            
                console.log(results.items[0]);
                                $w("#repeater1").onItemReady( ($item, itemData, index) =>                 
                                {
                                $item("#button4").link = itemData['link-barlocations-title'];


                } );

                } );



    } );
} );