Show array in Repeater Text Box

Ask the community
,
1

Spinning my wheels here. I queried the database Wine and got the unique values that are now in an array ‘items’. What I am trying to do is use a text box ‘text95’ within a repeater to list the array.

I know from console.log that there are 6 items and that the array is the correct info

Right now, it is only listing the first item in the array (Austria).
Any help is appreciated!

766×566 4.93 KB

import wixData from ‘wix-data’ ;

$w . onReady ( function () {
//Queries DB Wine to get unique countries
wixData . query ( “Wine” )
. distinct ( “country” )
. then ( ( results ) => {

**if** ( results . items . length  >  0 ) { 

  **let**  items  =  results . items ; 
  //End of call for Country data 
 
  console . log ( items ); 
  console . log ( "first item: " ,  items [ 0 ]); 
  console . log ( "array length: " ,  items . length ); 

$w . onReady ( **function**  () {

for ( let i = 1 ; i < items . length ; i ++){
$w ( “#text95” ). text = items [ i ];
}
})

 }  **else**  { 
  // handle case where no matching items found 
}

})
. catch ( ( error ) => {
let errorMsg = error . message ;
let code = error . code ;
console . log ( errorMsg )
} );
});

1 Like
2

Well regarding your post, you are mixing up a few things and also your whole code do not realy look good. Why?

  1. Never use more than 1x $w.onReady() in your code.
  2. You are talking about ARRAY, but in fact you have an OBJECT as RESULT.
ARRAY = ["item1", "item2", "item3"]

OBJECT = {"firstname": "Elaine", "lastname": "Cadman"}

ARRAY of OBJECTS = [
	{"firstname": "Elaine", "lastname": "Cadman"}, 
	{"firstname": "Velo", "lastname": "Ninja"},
]

  1. You are talking about a REPEATER, but at any place in your code you can find any repeater-code. Where is your repeater-code?

  2. But wait, what is a REPEATER-TEXT-BOX?
    First you should learn all the elements, before you start with more complicated things.

But i understand your needs, you want to get DUBLICATE-FREE-DATA out of your DATABASE.

Next to the distinct-function, there are also other ways of how to get UNIQUE-DATA, take a look onto the following example…

This is an excerpt of one of my own running codes, which generates unique DROP-DOWNS.

//--------------------- [ Create unique - Normal-Dropdowns ] -------------------------
function create_UniqueData(items, dbfield, txtField) {
  const uniqueTitles = getUniqueTitles(items);
  $w(txtField).text = buildOptions(uniqueTitles); 
 
  function getUniqueTitles(items) {
    const titlesOnly = items.map(item => item[dbfield]); 
    return [...new Set(titlesOnly.sort())];
  }

  function buildOptions(uniqueTitles) {
    return uniqueTitles.map(x => {
      return {VALUE:String(x);};
    });
  }
}

So, let us use this example for your purposes…

import wixData from 'wix-data';

// ----------- USER-INTERFFACE ----------------------------------------
var database = "Wine";
var dbField =  "country";
var txtField = "text1" ; //<---- the ID of your TEXT-BOX here......
// ----------- USER-INTERFFACE ----------------------------------------
    
$w.onReady(function () {
    var items;    
    wixData.query(database)
    .find()
    //.distinct("country")
    .then((results)=> {console.log("ARRAY-LENGTH: ", results.items.length);
        if(results.items.length > 0) {console.log("Some COUNTRIES found!!!");
            let items = results.items; console.log("ITEMS: ", items);
            let firstItem = items[0]; console.log("FIRST-ITEM: ", firstItem);
            create_UniqueData(items, dbField, txtField)
        }
        else {console.log("No COUNTRIES found!!!");}
    })
    .catch((error)=> {
        let errorMsg = error.message;
        let code = error.code;
        console.log(errorMsg+" / "+code);
    });
});

//--------------------- [ Create UNIQUE - DATA ] -------------------------
function create_UniqueData(items, dbfield, txtField) {
    const uniqueTitles = getUniqueTitles(items); console.log("Unique-Data: ",uniqueTitles);
    $w('#'+txtField).text = String(uniqueTitles);
    
    function getUniqueTitles(items) {
        const titlesOnly = items.map(item => item[dbfield]); 
        return [...new Set(titlesOnly.sort())];
    }
}

Take also a look onto your CONSOLE! Working with console is the right way!

Of course you also can go the direct DISTINCT-WAY, this is just another way to success!

All you have to do, is to use the USER-INTERFACE, to put in your data. Do not touch all the other code-parts.

3

Thank you @russian-dima I didn’t realize you had to use an object in the repeater. Also that I should only be using one onReady().
I made it work, here is the code:

import wixData from ‘wix-data’ ;

$w . onReady (() => {
countryDrop ();
});

//Country dropdown with unique values
function countryDrop ( ){
wixData . query ( “Wine” )
. limit ( 1000 )
. find ()
. then ( results => {
const uniqueTitles = getUniqueTitles ( results . items );
$w ( “#countryDrop” ). options = buildOptions ( uniqueTitles );
});
function getUniqueTitles ( items ) {
const titlesOnly = items . map ( item => item . country );
return [… new Set ( titlesOnly )];
}
function buildOptions ( uniqueList ) {
return uniqueList . map ( curr => {
return { label : curr , value : curr };
});
}
}
});