CODEWITHSUNDEEP
javascripthtmlexcel
Aleister
Aleister

Reputation: 25

Read an excel file and update webpage information?[HTML]

I have doubts on how this can be achieved, the language I'm using is HTML and some javascript, but what I want is to read an excel file, on this case, languages, and update the webpage depending on whats chosen(English, Spanish, etc).

For example:

enter image description here

What I want is the website to update when Spanish or English or any other language is chosen:

banner:

enter image description here

Right now it changes but it's done with javascript

Upvotes: 0

Views: 873

Answers (2)

potasmic
potasmic

Reputation: 1097

If you have access to the Excel file and you don't have super fancy formattings in the Excel file, you can save the file as a CSV (comma-separated values) and parse it with JS. CSV is quite easy to parse, but there are libraries such as PapaParse that you can utilize.

Usually, CSV files are delimited using return characters \n (sometimes \r\n, RFC 4180) for rows and commas , for columns.

Here's a rough sketch of what you're trying to achieve with no libraries:

// Whichever way you end up with getting the CSV as a string
let csvFile = fetch("lang.csv").then(x => x.text()); 

    csvFile = csvFile.split("\r\n").map( x => x.split(",") );

// Assuming your field name is the element ID you want to replace the text with.
function selectLanguage(lang) {
    if (lang == "") return;

    let langRowNum = csvFile.some( (row, index) => {
        langRowNum = index;
        return row[0] == lang; // see if the first cell of the row is matching
    })? langRowNum : 1; // default to Espanol

    // assuming first row is the ID of the elements
    for (let i = 1; i < csvFile[0].length; ++i)
        document.getElementById(csvFile[0][i]).textContent = csvFile[langRowNum][i]
}

selectLanguage("English");

Excel should allow you to save files as CSV:

excel screenshot

Upvotes: 2

Dulara Malindu
Dulara Malindu

Reputation: 1637

you can't process an excel file without the help of a server side language. browsers are sand-boxed. so it can't use libraries other than it's own.

but you can achieve what you want with a help of a .JSON file which contain the settings you want.

JSON is a better file type/ Format to store and exchange data in JavaScript.

this article will teach you how to do so.

Upvotes: 2

Related Questions