Translating retrieved Information from Collection

Ask the community
,
1

Hello to everyone.

First of all, I want to thanks, in advance, Wix (which are all those people who work there), and especially those who answer our questions on Wix-Code forum, you are doing really hard work, which is really important for us, and I really appreciate that.

About my issue. I’m trying to translate data, which is retrieved from database. Here is code:

$w.onReady(() => {
//Retrieving data from “Users” collection
wixData.query(‘Users’)
.find()
.then(res => {
function unique(array) {
return array.filter((value, index) => array.indexOf(value) === index);
}

const genders = res.items.map(users => users.gender);
const uniqueGenders = unique(genders);
const options = uniqueGenders.map(gender => {
return {
“value”: gender, “label”: gender
};
});
$w(‘#genderDropDown’).options = options;

});

});

“Gender” field has many “male” and “female” values, so when it’s retrieved from “Users”, code decreases them for Drop-Down (#genderDropDown), so it will have only one - “male”, and one - “female” options, to choose between. With your help it works perfectly.

Thing is that, I need the same page to be on several languages, and have duplicated the page, translated all of the other elements on the page, but I can’t translate Drop-Down options.
I’ve tried this:

$w(‘#genderDropDown’).options[0][“label”] = “Мужчины”;

But it doesn’t work.

console.log($w(‘#genderDropDown’).options[0][“label”]);
still returns “male” to console.

Also, thought to use hooks, but have no idea how can it be done in this case. Would be very thanksfull, for your attention, time and help!

2

Your function can not be inside the results function I would suppose you need to move that unique function outside your function.

Outside onready

function unique(array) { return array.filter((value, index) => array.indexOf(value) === index); }

3

Hi Andreas.

Thanks for your replay. Unfortunately it’s still doesn’t translate “Male” to “Мужчины”…

unique function was working inside of onReady function. In the end all of the code above gives to options to dropdown: male; female. I just want those options to be translated , result should be the same.

4

i dont understand translated to another language?

5

Yes. For example if drop down option is male, instead of “male” to be written “Мужской”, or “მამრობითი”.
Same with female, if one of the drop down options is female, instead of “female” to be written “Женский”, or “მდედრობითი”.

6

Here is a drop down that I have. So, instead of “Male” and “Female” I need options to be written, for example “Мужчины” and “Женщины”.

7

Are here anyone who could help?

8

Hi!

Are you trying to display data in a different language or are you receiving data and need to translate it in order to use it?

Assuming you’re trying to display the menu in a different language, you have few options:

  1. Creating a multilingual site
    Tutorial: Creating a Multilingual Site without the Language Menu App | Help Center | Wix.com

  2. Using the Wix Language Menu App
    https://www.wix.com/app-market/language-menu/overview

  3. Using an outsource translating API and Wix-fetch
    wix-fetch - Velo API Reference - Wix.com

Read about those and let me know if they work for you.

Doron. :slight_smile:

9

Hi Doron!

Thank you for your reply and time.

Here I’ll try to explain in detail, what I want to achieve:
So, I have a database, which stores information about actors. It has a column called - “Gender”, which has only two items: “Male” and “Female”.


Than I have a page, which retrieves information about actors from this collection. This page has drop down search by Gender:


By default this page is in English. I need this pages on different languages, too. That’s why I’ve used one of the instructions you gave me above, and multiplied pages. Thing is with the code:

wixData.query(‘Users’)
.find()
.then(res => {
function unique(array) {
return array.filter((value, index) => array.indexOf(value) === index);
}

const genders = res.items.map(users => users.gender);
const uniqueGenders = unique(genders);
const options = uniqueGenders.map(gender => {
return {
‘value’: gender, ‘label’: gender
};
});
$w(‘#genderDropDown’).options = options;
});

The dropdown’s options are directly retrieved from Gender column, and as it has only “Male” and “Female” (English words) that dropdown also has the same options. I want to translate just the labels of options, so information retrieved and showed on the page from collection should be the same, just the labels “Male” and “Female” to be “Мужчины” and “Женщины”.

10

Hi!

Having a button for Russian language like described in the first option I gave and will show labels in Russian (text boxes that are hidden on load and .show( ) once clicked) OR redirects to the same page but in Russian won’t work for you?

Doron.

11

Hi, Doron.

Everything is being translated, except I can’t translate Drop-Down options… They are retrieved directly from database (“Users”).

Look, users of a web-site will send some data to this database, and it should be on English. But when it’s retrieved to show on pages (on different language pages), it should be translated and put inside Drop-Down… which is a filtering tool on that pages.