Translate dynamic data

[Tobfather]

Hi I'm having a difficult time wrapping my head around dynamic data translation. Assuming I've the following translation data:

const en = {
HI: 'Hi {name:string}!',

MenuItems: {
	HOME: 'Home',
	ABOUT: 'About',
	CONTACT: 'Contact',
},
PageCreator :{
	TextareaPlaceholder: 'Please insert the text you want a cover image for ...',
	SubmitButton: 'Generate Image',
	SubmitButtonLoading: 'Generating...',
	ButtonTextSettings : 'Text Settings',
},
Data : {
	TextSettingsData : {
		Genre : {
				Epic: {
				  Anecdote : "anecdote",
				  Fable: "fable",
				  ShortStory: "short story",
				  FairyTale: "fairy table",
				  Novella : "novella",
				  Parable : "parable",
				  Novel : "novel",
				  Legend: "legend",
				  Satire: "satire"
				},
				Lyric: {
				  Lay: "lay",
				  Epigram: "epigram",
				  Ode : "ode",
				  Sonnet: "sonnet"
				},
				Drama: {
				  Comedy: "Comedy",
				  Tragedy: "Tragedy"
				},
				NonFictionalTexts: {
				  Report : "report",
				  Essay: "essay",
				  FormalLetter : "formal letter",
				  Apostil: "apostil",
				  OpinionPiece : "opinion piece",
				  LetterToTheEditor : "letter to the editor",
				  Minutes : "minutes",
				  Speech : "speech",
				  Reportage : "Reportage",
				  Review : "Rezension",
				  Profile: "profile",
				  NewspaperArticle : "newspaper article",

				}
		}
	}
}

} satisfies BaseTranslation;

I'm using SvelteKit Version 1.0.

1.) I want to generate a list of all Genres. How would I create the list from the Translation Data. Is it even the right way to do it?
2.) Assuming there's input field where someone can type in a genre. How could I search for the corresponding key? Is there an easy way like f.e. a findKeyFor('rezension') or something similiar?

I hope you can help me better understand how to approach those needs.

Best regards

Tobias

[ivanhofer]

Hi @Tobfather,

the translation function ($LL) behaves like an object. You can do any kind of object modifications on them.

const LL_Genre = $LL.Data.TextSettingsData
const genres = Object.keys(LL_Genre)
const translated_genre = LL_Genre.Epic.FairyTale() // => 'fairy table' <- probably a typo in your base translation??

...

[Tobfather]

Hi Ivan,

thanks for your answer. That got me an idea on how to procceed. That's how I'm able to create that list I want:

` const LL_genre = $LL.Data.TextSettingsData.Genre;
console.log('LL_genre', LL_genre) // The proxy-object
const genres = Object.keys(LL_genre);
console.log('genres', genres); // [ 'Epic', 'Lyric', 'Drama', NonFictionalTexts' ]

// foreach genre get it's subgenres and create an array of objects with key, value and fn
const all_genres = genres.map((genre) => {
	return Object.entries(LL_genre[genre]).map((entry) => {
		return {
			key : entry[0] ,
			value : entry[1](),
			fn : entry[1]
		}
	});
});

// flatten the array
const all_genres_flat = all_genres.flat();

`

And then later loop over it:

<select class="select" size="4" bind:value={selectedGenre}> {#each all_genres_flat as genre} <option value={genre}>{genre.value}</option> {/each} </select>

To find a translation based on a key I recreate the same flattened list as above and find the value of the coressponding key. If there's a more efficient solution than I'd more than glad to know about. I wondered if there are generic helper functions where I just can pass a key and locale and then get value returned.

Best regards

Tobias

[ivanhofer]

Sounds great!

No there are no such utility functions. You can create a PR and add that functionality to the utils-package if you think those are useful.