Read

Nå ønsker vi å kunne hente ut data som vises under, istedenfor fake example item #1, #2 og #3. Men før vi gjør det ønsker vi å ha noen eksempeldata i databasen som vi kan vise frem. Gå til input-feltet og skriv inn et eksempel, og trykk knappen. Trykk back, og legg til en til. 

Du kan gå til MongoDB Compass for å sjekke at dataene faktisk ble opprettet.

Tilbake i server.js skal vi nå legge til kode som faktisk viser frem dataene vi har i databasen. For å gjøre det må vi gå til kodelinja som begynner med app.get(‘/’, …), som skal ligge under app.use()-linja. Istedenfor å sende tilbake hele responsen i samme sekund som noen etterspør den, så ønsker vi å hente data fra databasen først, og først når vi har den, så kan vi sende sida tilbake til brukeren. Legg inn en ny linje før res.send-metoden. 

// db er vår tilkobling til databasen
// collection() spesifiserer hvilken collection i mongodb vi skal bruke
// find() er en metode som leser / henter / laster data fra databasen som vi kan bruke.
// toArray() gjør om dataene vi får fra mongodb til et array
// Den forventer en funksjon som argument, som får en error-melding, og dataen vi har etterspurt som parameter.
db.collection('items').find().toArray(function(err, items) {
  // for å lettere se hva slags data vi skal jobbe med kan vi logge dem ut:
  console.log(items);
})

Hvis vi nå går tilbake til nettleseren og refresher localhost, så vil terminalen vise oss dataene som den får fra databasen. Vi ser at hver linje har en id-egenskap, og en text-egenskap. ID verdien blir automatisk laget, mens text-feltet la vi selv inn når vi fylte inn skjemaet. 

Nå som vi vet hvilke data vi får tilbake kan vi slette console.log()-linja. Nå kan vi flytte hele res.send() metoden vår inn der console.log()-linja var. Dette er fordi vi ikke ønsker å sende tilbake en respons, før vi har dataene som vi skal vise frem. Nå som res.send ligger der, kan vi finne fake example item-linjene, og bytte ut dem med faktisk data fra items-parameteret vårt:

Gå til HTML-koden, og finn ul-tag’en. Den er etterfulgt av tre li-tag’er. Kopier den første li-tag’en, fra <li> til </li> med alt innhold i mellom. Denne skal vi bruke som mal for hvordan ting skal se ut. Slett deretter alle li-tag’ene.

Nå står vi igjen med: 

<ul class="list-group pb-5">
</ul>

Vi skal nå fylle ut innholdet mellom dette, men først, la oss prøve å hente ut items-parameteret vårt. Siden vi er i en template-literal, så kan vi bruke ${variabelnavn}-syntaksen for å vise frem en javascript-variabel. La oss teste med items:

<ul class="list-group pb-5">
  ${items}
</ul>

Siden items er et array bestående av objekter, gir det ikke mening å bare skrive det ut på denne måten. Vi må gå igjennom arrayet, og hente ut det vi trenger. Vi kan bruke map-metoden for å gjøre en funksjon for hvert objekt i arrayet:

${items.map(function() {
  return "Hello" // blir returnert en gang for hvert objekt
})}

Lagre fila, og refresh nettleseren (ctrl+r eller F5). Hvis du har tre documents i din items-collection, så vil du se Hello tre ganger. Legg merke til at javascript legger til komma mellom hvert “Hello”. Det er fordi javascript ser et array, og legger til et komma mellom hvert element. Vi ønsker ikke å ha dem, så vi kan fjerne dem, ved å legge til en join-metode, før teksten blir sendt til skjermen:

${items.map(function() {
  return "Hello"
}).join('')}

Join slår sammen et array, og argumentet den tar inn er hva som skal skille et array-element fra neste. Som standard er det et kommategn, men vi setter det til en tom string.

Men å vise Hello er ikke det vi egentlig ønsker å vise frem – vi vil heller vise frem data fra databasen. Fjern stringen hello, og lag en template literal med to backticks. I mellom backtickene, lim inn det vi kopierte tidligere (li-tag’en). Nå har vi en mal for hvordan lista skal se ut. Finn teksten Fake example item #1 – dette er teksten vi ønsker å bytte ut og gjøre dynamisk. For å få tak i den riktige verdien må vi lage en parameter til den anonyme funksjonen som blir sendt inn i map-metoden:

${items.map(function(item) { // ...

I items har vi flere item, og det er hver av disse vi har lyst til å få tak i.

Bytt nå ut “Fake example item #1” med ${item.text}. Husk at hvert item (hvert mongodb dokument) inneholder et felt for id, og et felt for text. Lagre fila (ctrl+s) og last inn nettsiden på nytt (ctrl+r eller F5). 

Hvis du ramlet av et sted på veien ligger koden vi har holdt på med her:

<ul class="list-group pb-5">  ${items.map(function(item) {
  return `
  <li class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">
  <span class="item-text">${item.text}</span>
    <div>
      <button class="edit-me btn btn-secondary btn-sm mr-1">Edit</button>
      <button class="delete-me btn btn-danger btn-sm">Delete</button>
    </div>
  </li>`
  }).join('')}</ul>

Prøv å legge til en ny to-do i lista. Som du ser, blir vi sendt til “Thanks for submitting the form” sida, og så må vi trykke back for å komme tilbake for å legge til flere to-do’s. Det er litt kjipt, så la oss prøve å finne en løsning på det.

Scroll helt til bunn av server.js, til du finner app.post()-metoden. Istedenfor res.send()-linja, skriv

res.redirect('/')

Lagre fila (ctrl+s), og last inn nettsida på nytt (ctrl+r eller F5). Hvis vi nå forsøker å legge til et nytt element, så vil du se at vi forblir på sida, men vi kan se det nye elementet i lista.