Selection Tags Populated By Tags Collection on the Database

Ask the community
, ,
1

Hello.

I created a tags collection and I want to populate my Selection Tag element using the tags stored on the database.

I’ve come as far as been able to query the tags from the collection:

wixData.query( “myCollection” )
.find()
.then( (results) => {
console.log(results.items[ 0 ].myTags);
???
} );

I put all my 30 tags on a single cell of “myCollection”. Thats why " results.items[ 0 ]"

I know that the code to populate the tags without querying it from a collection is:

$w( '#selectionTags1' ).options = [ 
{  "label" :  "Onion" ,  "value" :  "Onion" }, 
{  "label" :  "Carrot" ,  "value" :  "Carrot" }

];

Thank you

2

poke. Just gonna leave this comment here to see if anyone wants to answer this.

3 
var itemData;

$w.onReady(()=>{  
    1) Query Collection --> get ITEM-DATA out of DATABASE.
    2) Then.... Use the gotten DATA to get OPTIONS.
    3) Use the returned OPTIONS to fill your Selection-Tag-Element with generated options!
});

function query_Collection{
   wixData.query("myCollection")
   .find()
   .then((results)=>{console.log(results);
     let myTags = results.items.myTags; console.log(myTags);
     itemData = results.items;
   }).catch((err)=>{console.log(err);});
}

$item('#sTags').options = get_Options(itemData.myTags);

function get_Options(data) {
    let options = []
    for (let i = 0; i < data.length; i++) {
        const element = data[i];
        options.push({label: element, value: element})
    } return options;
}

Put all these code-snippets together + add a little bit more of logical final code and make it work :wink:

4

You’ll have to be more specific :(. Could someone kindly write this out WITH the “little big more of logical”???

5

Populating Selection-Tags is nothing else as populating - → DropDowns.
If you can populate DropDowns - → you also should be able to populate → S-Tags.

There are just some differences in which FIELD-TYPE is used…

  1. FIELD-TYPE —> ARRAY
  2. FIELD-TYPE ----> TAGS

But at all both works like arrays.

Let’s say this is your S-Tag-Array: including two OBJECTS → Onion & Carrot

 [  { "label": "Onion", "value": "Onion"},    { "label": "Carrot", "value": "Carrot"}  ];

Let’s say your DB-FIELD-ID of TYPE ARRAY is → myArray.
And let’s say you have found exactly the data-row, you were looking for in your DB.

let myArray = results.items.myArray; console.log(myArray);

Now you can get every single item of the ARRAY-FIELD like…

let arrayResult1 = results.items.myArray[0]; console.log(arrayResult1);
let arrayResult2 = results.items.myArray[1]; console.log(arrayResult2);

As Result you will get each object which is inside your DB-Array…

{ "label": "Onion", "value": "Onion"}

…&…

{ "label": "Carrot", "value": "Carrot"}

If you want to get the label —> Onion

let arrayResult = results.items.myArray[0].label; console.log(arrayResult);

If you want to get the value —> Onion

let arrayResult = results.items.myArray[0].value; console.log(arrayResult);

This is how we populate our S-Tag-Element…

let options = $w("#myStagElementIDhere").options;
options.push({"label": "Olives", "value": "olives"});
$w("#myStagElementIDhere").options = options;

First —> getting the current options out of our S-Tag-Element…

let options = $w("#myStagElementIDhere").options;

Second —> we push new values into the new generated ARRAY, called → options

options.push({"label": "Olives", "value": "olives"});

Third —> we put/push back the new generated ARRAY with the new generated DATA…

$w("#myStagElementIDhere").options = options;

…to our S-Tag-Element.

It’s the same process, like on dropdowns.

To populate multiple items/values into a DropDown or S-Tag-Element, you will need to use a → LOOP (either a for-loop, or an each-loop).

Good luck!

6

@joaoguidev , @josephchancewatkins this is the code I went with to get tag labels and values from the database collection.


**import**  wixData  **from**  'wix-data' ; 

$w . onReady ( **function**  () { 
  wixData . query ( "Courses" ) //this is my collection - make sure you use the collection ID, not the Collection name - check - it may have changed!! 
  . find () 
  . then (( r ) => { 
    **let**  tags  = []; 
    r . items . forEach (( r ) => { 
      tags . push ( r . tags ) //'tags' is the field name within the collection  
    }) 

    **const**  uniqueTags  = [... **new**  Set ( tags . flat ( 1 ))]  //we needed to get rid of the duplicate tags within each record of the field.  
    
    **const**  options  =  uniqueTags . map (( r ) => ({ label :  r ,  value :  r })) 

    $w ( "#typeTags" ). options  =  options ; //typeTags is the name of my tag cloud element. 
  }) 
}); 


export function  typeTags_change ( event ) { 

  **let**  tagValue  =  $w ( "#typeTags" ). value ; 

  $w ( "#dynamicDataset" ). setFilter ( wixData . filter (). hasSome ( "tags" ,  tagValue )) 
  . then (() =>{ 
      $w ( "#resetText" ). show (); 
  }) 
  
  
} 


//this next bit is to reset the filter.  I also have a contracted strip that the filters are placed on. 

export function  resetText_click ( event ) { 
  $w ( "#dynamicDataset" ). setFilter ( wixData . filter ()) 
  . then (() =>{ 
      $w ( "#resetText" ). hide (); 
    $w ( "#typeTags" ). value  = []; 
  })  
} 

export function  filter_click ( event ) { 
  $w ( '#tagsStrip' ). expand () 
} 


Hope this helps!   

#createtagsfromdatabasecollection
7

Looks good ! And if everything works → good work!

But also for you the tip → please use → CODE-BLOCKS to show your code.
You do not know what CODE-Blocks are?

Look onto the code-format provided by me and compare it with the code-format provided by you. Are you able to recognize some differences?

Which one of the provided codes is better readable?

8

No, I don’t know what codeblocks are. No, I can’t recognise any difference. Your instructions are obscure and that code is apparently not Javascript ES6 compliant, according to the coders I asked to interpret it.

9

This thread is old and will be closed, if you have any questions or concerns feel free to open up a new thread instead of bumping up old ones.