Reading an offline csv table

1

Hello,
I would like to create a hype project in two languages. My Javascript and other programming skills are unfortunately very rudimentary.
I have attached a small file, the javascript for it I have here from the forum. This works very well. But it would be a lot of work if every text would have to be inserted bilingually in the HTML attributes in Hype.
There will be a bigger table, from which ideally all texts should be read. It will not necessarily be available online, so the table should be in the hyperesources as csv (or another adequate format).
Unfortunately I didn’t find anything in the forum about how to access the bilingual cells of the table in Hype.
I am happy about every tip.

The csv table is in the zip-file.

Language_Table.zip (27.2 KB)

2

This is done much easier with a json than with a csv file.

Also where you may have the advantage of using an editor like Pages.app or excel.
You may not get strict syntax from either, which may throw any code written to parse the file.

Json is somewhat more strict. But you will normally have to edit it in a plain text editor in what may seem like a very raw way.
try BBEdit from the AppStore

A couple of changes to your hype file example I have made.

No need to run the initAndSetLanguage from the selectLang if you are using the landing page Szene1 before any other scene displays any thing, the same goes for using the Szene1 on scene load to do the same.

The second scene on load can run the initAndSetLanguage.
This also ensures that the hype text box elements exist. ( some element do not until a scene is first displayed)

Have changed the en and de in the language pickers datasets to capitals. i.e EN and DE.
This is to match the json keys we will look for.

Added a json file to the hype project.

its text looks like this.

{ 
"headline1": 
{

"DE":"Vor- und Nachteile" , 
"EN": "Assets and drawbacks"
} ,

"subhead1": 
{

"DE":"Fahrzeug" , 
"EN": "Vehicle"
} ,

"subhead2": 
{

"DE":"Bewertung" , 
"EN": "Evaluation"
} ,



"text101": 
{ 

"DE":"Auto" ,
"EN" :"Car"
},

"text102": 
{ 

"DE":"Vor- und Nachteile" , 
"EN": "Assets and drawbacks"
},

"text201": 
{

"DE":"schnell, teuer" , 
"EN": "fast, expensive"
} ,

"text202": 
{

"DE":"umweltfreundlich, sportlich " , 
"EN": "environmentally friendly, sporty"
}

}

As you can see, we have the id of the text box as a key name. Then it has two ( in this case) values.
The values are also objects with Key/Names being the lang and the value being the text.

Our
*initAndSetLanguage will read this file and use the text box ID’s and the chosen language to set each boxes innerHTML after finding its key and values in the json file.

	const lang_list = '${resourcesFolderName}/lang.json'
 
	 
 	    async   function getLang() {
 	    //-- Only  run this part once
 	    if(typeof   hypeDocument.customData.dataLangChosen == "undefined") { 
		 hypeDocument.customData.dataLangChosen = "EN"
		 }
		 if(typeof   hypeDocument.customData.dataLang == "undefined") { 
		 
		 const response = await fetch(lang_list);
            
         const data = await response.json();
            
       hypeDocument.customData.dataLang = data
    } 
    
   //-- run this part always  
  loadLangs()
}


 function loadLangs(){
 
 //-- get text boxes
 var langTexts = document.querySelectorAll('.langText')
 
 
 
 var i;
for (i = 0; i < langTexts.length; i++) { 

 //-- get text box ID
  var thisTextBox = langTexts[i].id;
    
    //--  Use the id and chosen lang to pick the correct lang.
 langTexts[i].innerHTML = hypeDocument.customData.dataLang[thisTextBox][hypeDocument.customData.dataLangChosen]
}
 
 }


//-- start
 getLang()

Language_Table.hype.zip (34.7 KB)

3 Likes