# 👁️‍🗨️ Om detta avsnitt

Visar en lista med information från databasen. Du behöver en databas med en tabel som kan ta emot data. Du måste också vara ansluten mot databasen. Titta också skärskilt igenom guiden om "mustasch.js" eftersom vi kommer utfå från att du gjort något likande.

• 🦉 Ansluta till en databas
• 🦉 Skapa en tabell i en databas
• 🦉 Använda "mustasch.js" för att få dynamisak sidor

❓ Vad är SQL?

Språket som du använder för att ställa frågor till din databas. Titta i vårt dokument om du behöver repetera.

• 🔗 Om databaser

1 Hämta en websida som kan innehålla vår lista

Vi kompierar den ifrån en mall.

cp ~/dev/mimer-template/File/web.html template/msg.html
  

2 Skapa en method som svarar på ett anrop

Vi vill ge iväg en html sida med information om vad som finns i databasen.

app.get("/msg/", async function (req: Request, res: Response) {
  

3 Hämta data från databasen

Du kan hämta data ifrån din tabell i databsen. await behövs eftersom du måste vänta på svaret.

let question = "SELECT * FROM msg;";
const result = await db.execute(question);
  

4 Hämta infromationen från data vi fick

Vi behöver ha informationen från objectet vi fick från databasen.

const msg_list = result.values().next().value;
  

Oklart varför vi måste göra ett så konstigt API anrop, men det fungerar. Testa gärna med console.log för att se vad som händer.

5 Skapa ett object med data

Lägg till informationen till ett object som repsenterar viktigt data.

const data = {
msgLista: msg_list
};
  

6 Läs in mallen vi ska använda

Vi behöver ha mallen som text.

const template = await fs.readFile("template/msg.html", "utf-8");
  

Detta kan du göra en gång i början av programmet istället.

7 Använd informationen

Rendera texten med dataobjektet vi har gjort.

let text = Mustache.render(template, data);
  

Eftersom mallen ännu inte innehåller någon regel för att hantera datat som kommer in så kommer inget intressant att visas.

8 Skicka iväg data till användaren

Vi avslutar nu vårt anrop genom att skicka resultat till klienten som efterfrågat det.

res.send(text);
}
  

9 Lägg till en html lista i mallen

Vi behöver nu en lista i vår mall. Lägg till den kod i msg.html för att få en lista.

<ul>
// Code
</ul>
  

10 Fyll listan med data från mall

Använd mallen för att få data. Läs på om hur Mustach mallar fungerar om du undrar om syntaxen.

{{#msgLista}}
// Code
{{/msgLista}}
  

11 Skriv ut ett element

I koden ovan lägger till kod som hanterar varje rad i listan.

<li> <span> {{date}} </span> - {{msg}} </li>
  

12 ✔️ Starta om servern och testa anropet

Starta om server och gå in på sidan: http://localhost:3000