Flashback bygger pepparkakshus!
  1. Dator och IT
  2. Systemutveckling

restful api hjälp

Svara
2018-01-29, 14:14
  #25
Worldnature
Medlem
Worldnatures avatar
Citat:
Ursprungligen postat av Proton
Återigen från beskrivningen som du HELT ignorerat för 100de gången:



Upprepar svaret jag gav förut:
När din quiz startar ska du från ovanstående länk hämta första frågan. I svaret du får därifrån kommer det även framgå vart ett eventuellt svar ska skickas, samt med vilken metod.

Postman är ju ett debuggerverktyg för restapier, inget annat. Den kommer inte alls vara inblandad i din lösning på denna uppgift.

Det finns en beskrivning på vad du ska göra, varför läser du den inte?

du menar ungefär så här: när man skrivit in sitt nickname och klickat på knappen starta så ska frågan från den question/1 länken jag skicka hämtas, och svaret jag ger där, kommer det framgå vart svaret ska skickas?

Då antar jag att jag får ta bort
Kod: 
let questions = [
  new Question(
    "<b>1.</b> Vilken fotbollsklubb har vunnit Premier league flest gånger?", ["Manchester United", "Liverpool", "Arsenal", "Blackburn"],
    "Manchester United"
  ),
  new Question(
    "<b>2.</b> Vilken fotbollsklubb har vunnit La Liga flest gånger?", ["FC Barcelona", "Villareal", "Real Madrid", "Sevilla"],
    "Real Madrid"
  ),
  new Question(
    "<b>3.</b> Vilken fotbollsklubb har vunnit Seria A flest gånger?", ["AC Milan", "Juventus", "Inter Milan", "Roma"],
    "Juventus"
  ),
  new Question(
    "<b>4.</b> Vilken fotbollsklubb har vunnit Bundesliga flest gånger?", ["FC Bayern", "Dortmund", "Werder Bremen", "Herta Berlin"],
    "FC Bayern"
  ),
  new Question(
    "<b>5.</b> Vilken fotbollsklubb har vunnit Allsvenskan flest gånger?", ["Malmö FF", "IFK Göteborg", "AIK", "IF Elfsborg"],
    "Malmö FF"
  )
];

let quiz = new Quiz(questions);

hela den funktionen? hur läser jag in den frågan med question/1 och sedan svaret och sen "nexturl" som dyker upp där då?
Citera
2018-01-29, 14:27
  #26
Proton
Moderator
Protons avatar
Citat:
Ursprungligen postat av Worldnature
du menar ungefär så här: när man skrivit in sitt nickname och klickat på knappen starta så ska frågan från den question/1 länken jag skicka hämtas, och svaret jag ger där, kommer det framgå vart svaret ska skickas?

Då antar jag att jag får ta bort
Kod: 
let questions = [
  new Question(
    "<b>1.</b> Vilken fotbollsklubb har vunnit Premier league flest gånger?", ["Manchester United", "Liverpool", "Arsenal", "Blackburn"],
    "Manchester United"
  ),
  new Question(
    "<b>2.</b> Vilken fotbollsklubb har vunnit La Liga flest gånger?", ["FC Barcelona", "Villareal", "Real Madrid", "Sevilla"],
    "Real Madrid"
  ),
  new Question(
    "<b>3.</b> Vilken fotbollsklubb har vunnit Seria A flest gånger?", ["AC Milan", "Juventus", "Inter Milan", "Roma"],
    "Juventus"
  ),
  new Question(
    "<b>4.</b> Vilken fotbollsklubb har vunnit Bundesliga flest gånger?", ["FC Bayern", "Dortmund", "Werder Bremen", "Herta Berlin"],
    "FC Bayern"
  ),
  new Question(
    "<b>5.</b> Vilken fotbollsklubb har vunnit Allsvenskan flest gånger?", ["Malmö FF", "IFK Göteborg", "AIK", "IF Elfsborg"],
    "Malmö FF"
  )
];

let quiz = new Quiz(questions);

hela den funktionen? hur läser jag in den frågan med question/1 och sedan svaret och sen "nexturl" som dyker upp där då?
Äntligen börjar polletten röra sig neråt.

Du har ju suttit och lekt med postman mot apiet. När du anropar första urlen kommer du få ett svar. Det svaret innehåller förutom frågan även en url dit det svar användaren ger ska skickas.

Dina egna frågor kan du sopa bort med andra ord eftersom din quiz kommer matas med frågor från api-et.

Hur du gör rest-anropet har jag redan googlat fram åt dig, börja med att skicka det anropet och kör sedan en alert på svaret och se vad du får ut då.
Citera
2018-01-29, 16:41
  #27
Worldnature
Medlem
Worldnatures avatar
Citat:
Ursprungligen postat av Proton
Äntligen börjar polletten röra sig neråt.

Du har ju suttit och lekt med postman mot apiet. När du anropar första urlen kommer du få ett svar. Det svaret innehåller förutom frågan även en url dit det svar användaren ger ska skickas.

Dina egna frågor kan du sopa bort med andra ord eftersom din quiz kommer matas med frågor från api-et.

Hur du gör rest-anropet har jag redan googlat fram åt dig, börja med att skicka det anropet och kör sedan en alert på svaret och se vad du får ut då.

okok, går det att få in frågorna och svaren i quizen med designen?

Har hämtat frågorna via postman med första länken (question1) och hämtat ut svaret och fått correct answer och nexturl, men hur bygger man in detta i sin js kod, det är det jag undrar, har kollat runt på den länken du skickade och hittade inte det exakt, har testat runt med, men inte lyckats.
__________________
Senast redigerad av Worldnature 2018-01-29 kl. 16:47.
Citera
2018-01-29, 18:25
  #28
Worldnature
Medlem
Worldnatures avatar
async function getQ () {
let q = await window.fetch(`http://v****.se:20080/question/1`)
let jsonQ = await q.json()
console.log(jsonQ)
}

module.exports = {
getQ
}

detta kan inte hjälpas typ tror du?
Citera
2018-01-29, 21:33
  #29
Proton
Moderator
Protons avatar
Citat:
Ursprungligen postat av Worldnature
async function getQ () {
let q = await window.fetch(`http://v****.se:20080/question/1`)
let jsonQ = await q.json()
console.log(jsonQ)
}

module.exports = {
getQ
}

detta kan inte hjälpas typ tror du?
fetch var ju rätt iaf.

Här är en framgooglad sida om hur du hämtar jsondata med fetch (bland annat)

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Iden med fetch är att den ger ifrån sig ett promise som du kan göra något med.

Algoritmen är ju alltså att använda fetch för att skicka ett anrop till ditt api, fetch kommer att ge dig ett promise som du sedan måste hantera.

Trassla inte in dig med moduler och sånt här, det är bra om du ska bygga js-libbar, men för en sådan här simpel sak tycker jag inte det är nödvändigt.
Citera
2018-01-31, 23:05
  #30
Worldnature
Medlem
Worldnatures avatar
Citat:
Ursprungligen postat av Proton
fetch var ju rätt iaf.

Här är en framgooglad sida om hur du hämtar jsondata med fetch (bland annat)

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Iden med fetch är att den ger ifrån sig ett promise som du kan göra något med.

Algoritmen är ju alltså att använda fetch för att skicka ett anrop till ditt api, fetch kommer att ge dig ett promise som du sedan måste hantera.

Trassla inte in dig med moduler och sånt här, det är bra om du ska bygga js-libbar, men för en sådan här simpel sak tycker jag inte det är nödvändigt.

tjenare.

behöver hjälp med en sak, sitter nu och har fått ut texten o det, men det skrivs ut i promise, vill få ut frågan och inte [object promise]

Kod: 
async function myQuiz () {
  let myQ = await window.fetch(`http://vhost3.lnu.se:20080/question/1`)
  let jsonQ = await myQ.json()
  let text = jsonQ.question
  return text
}
let question = myQuiz()

console.log(question)

let qDiv = document.querySelector('#questions')
let quest = document.createElement('p')
quest.innerHTML = question
qDiv.appendChild(quest)

där är koden, vad är det för fel jag har gjort så den inte skriver ut frågan utan skriver ut promise istället?
Citera
2018-01-31, 23:32
  #31
e7andy
Medlem
Citat:
Ursprungligen postat av Worldnature
tjenare.

behöver hjälp med en sak, sitter nu och har fått ut texten o det, men det skrivs ut i promise, vill få ut frågan och inte [object promise]

Kod: 
async function myQuiz () {
  let myQ = await window.fetch(`http://vhost3.lnu.se:20080/question/1`)
  let jsonQ = await myQ.json()
  let text = jsonQ.question
  return text
}
let question = myQuiz()

console.log(question)

let qDiv = document.querySelector('#questions')
let quest = document.createElement('p')
quest.innerHTML = question
qDiv.appendChild(quest)

där är koden, vad är det för fel jag har gjort så den inte skriver ut frågan utan skriver ut promise istället?
myQuiz är en asynkron funktion så den returnerar ett värde någon gång. Vi vet inte när. Din kod nu förväntar sig att funktionen är synkron, dvs. att den returnerar direkt och då får du ett promise tillbaka som du skriver ut. Webbanrop är i princip aldrig synkrona utan man måste vänta på svaret. Fördröjningar uppstår överallt över nätet. Därför vill man ha asynkrona anrop för såna här saker.
Flytta in koden som sätter texten i din p-tag inuti funktionen myQuiz.

Något sånt här:
Kod: 
async function myQuiz () {
  let myQ = await window.fetch(`http://vhost3.lnu.se:20080/question/1`)
  let jsonQ = await myQ.json()
  let text = jsonQ.question
  console.log(text)
  let qDiv = document.querySelector('#questions')
  let quest = document.createElement('p')
  quest.innerHTML = question
  qDiv.appendChild(quest)
}
myQuiz()
Det är helt otestat så jag vet inte om det fungerar, men jag tycker det ser korrekt ut.

Här hittade jag en beskrivning som jag tyckte var vettig:
https://hackernoon.com/6-reasons-why...l-c7ec10518dd9
Jag har aldrig använt async await utan kört allt med promises vilket ju kan bli väldigt jobbigt jämfört med async await.
Citera
2018-02-01, 10:28
  #32
Proton
Moderator
Protons avatar
Citat:
Ursprungligen postat av Worldnature
tjenare.

behöver hjälp med en sak, sitter nu och har fått ut texten o det, men det skrivs ut i promise, vill få ut frågan och inte [object promise]

Kod: 
async function myQuiz () {
  let myQ = await window.fetch(`http://vhost3.lnu.se:20080/question/1`)
  let jsonQ = await myQ.json()
  let text = jsonQ.question
  return text
}
let question = myQuiz()

console.log(question)

let qDiv = document.querySelector('#questions')
let quest = document.createElement('p')
quest.innerHTML = question
qDiv.appendChild(quest)

där är koden, vad är det för fel jag har gjort så den inte skriver ut frågan utan skriver ut promise istället?
Chansar på denna (helt otestade) kod:

Kod: 
fetch(`http://vhost3.lnu.se:20080/question/1`).then(response => {
if(response.ok){
console.log(response.json());
}else{
throw new Error("error in fetch");
}
}).catch(error => {
console.log(error.message);
});

Helt otestat, men iden är att du måste vänta på ditt promise att resolvas innan du kan göra nåt med det.
Citera
2018-02-01, 10:38
  #33
Worldnature
Medlem
Worldnatures avatar
Citat:
Ursprungligen postat av Proton
Chansar på denna (helt otestade) kod:

Kod: 
fetch(`http://vhost3.lnu.se:20080/question/1`).then(response => {
if(response.ok){
console.log(response.json());
}else{
throw new Error("error in fetch");
}
}).catch(error => {
console.log(error.message);
});

Helt otestat, men iden är att du måste vänta på ditt promise att resolvas innan du kan göra nåt med det.

Kod: 
let text
async function myQuiz () {
  let myQ = await window.fetch(`http://vhost3.lnu.se:20080/question/1`)
  let jsonQ = await myQ.json()
  text = jsonQ.question
}
myQuiz().then(() => {
  let qDiv = document.querySelector('#questions')
  let quest = document.createElement('p')
  quest.innerHTML = text
  qDiv.appendChild(quest)
})

jag kör på denna och får fram frågan nu, men nu måste jag bygga ett svars alternativ så att svaret känner av frågan om det ska vara en input så man kan skriva in svaret, eller om det finns fler en ett svar och då får man lägga in radio buttons typ.

Hur gör man detta på bästa sätt? hur kan denna kod se ut med if o else?
Citera
2018-02-01, 10:49
  #34
Proton
Moderator
Protons avatar
Citat:
Ursprungligen postat av Worldnature
Kod: 
let text
async function myQuiz () {
  let myQ = await window.fetch(`http://vhost3.lnu.se:20080/question/1`)
  let jsonQ = await myQ.json()
  text = jsonQ.question
}
myQuiz().then(() => {
  let qDiv = document.querySelector('#questions')
  let quest = document.createElement('p')
  quest.innerHTML = text
  qDiv.appendChild(quest)
})

jag kör på denna och får fram frågan nu, men nu måste jag bygga ett svars alternativ så att svaret känner av frågan om det ska vara en input så man kan skriva in svaret, eller om det finns fler en ett svar och då får man lägga in radio buttons typ.

Hur gör man detta på bästa sätt? hur kan denna kod se ut med if o else?
Radiobutton är ju direkt olämpligt om det finns fler än ett alternativ eftersom deras natur gör att endast ett svar kan väljas, antar att du menar checkboxar i sådana fall?

Det beror ju naturligtvis på hur datat ser ut om det kommer fler alternativ. Kommer det ut som en jsonarray kan man ju med fördel ta reda på om det är en Array som kommer och sedan rita ut checkboxar isf, om inte blir det ett inputfält.

Såhär tar man reda på om nåt är en Array:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray

Så:
Kod: 
//hämta data
if(Array.isArray(data.possibleAnswers)){
//rita ut checkboxar)
}else{
//rita ut inputfält
}

Där är pseudokoden.
Citera
2018-02-01, 11:07
  #35
Worldnature
Medlem
Worldnatures avatar
Citat:
Ursprungligen postat av Proton
Radiobutton är ju direkt olämpligt om det finns fler än ett alternativ eftersom deras natur gör att endast ett svar kan väljas, antar att du menar checkboxar i sådana fall?

Det beror ju naturligtvis på hur datat ser ut om det kommer fler alternativ. Kommer det ut som en jsonarray kan man ju med fördel ta reda på om det är en Array som kommer och sedan rita ut checkboxar isf, om inte blir det ett inputfält.

Såhär tar man reda på om nåt är en Array:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray

Så:
Kod: 
//hämta data
if(Array.isArray(data.possibleAnswers)){
//rita ut checkboxar)
}else{
//rita ut inputfält
}

Där är pseudokoden.

Kod: 
myQuiz() {
if(Array.isArray(data.possibleAnswers)){
  // här vill jag skapa en input där man skriver in svaret, är detta rätt?
  var Inputt = document.getElementById('answers');
  var cb = document.createElement('input');
  cb.type = 'input';
  cbh.appendChild(cb);
}else{
// göra en li lista för fler alternativ i radiobuttons/checkboxes?
}
}

hämtar jag nu datan? på rätt sett?
Kod: 
let text
async function myQuiz () {
  let myQ = await window.fetch(`http://vhost3.lnu.se:20080/question/1`)
  let jsonQ = await myQ.json()
  text = jsonQ.question
}
myQuiz().then(() => {
  let qDiv = document.querySelector('#questions')
  let quest = document.createElement('p')
  quest.innerHTML = text
  qDiv.appendChild(quest)
})

här är koden som jag hämtar frågan på.


tänkte också har jag gjort rätt med detta?
Kod: 
  var Inputt = document.getElementById('answers');
  var cb = document.createElement('input');
  cb.type = 'input';
  cbh.appendChild(cb);
}else{
om jag vill hämta hem så svarsalterativet blir en input, så man får skriva in svaret, dock måste jag skapa en button för svara?

sen i else vet jag inte riktigt, skapa en li formation?
Citera
2018-02-01, 11:13
  #36
Proton
Moderator
Protons avatar
Citat:
Ursprungligen postat av Worldnature
Kod: 
myQuiz() {
if(Array.isArray(data.possibleAnswers)){
  // här vill jag skapa en input där man skriver in svaret, är detta rätt?
  var Inputt = document.getElementById('answers');
  var cb = document.createElement('input');
  cb.type = 'input';
  cbh.appendChild(cb);
}else{
// göra en li lista för fler alternativ i radiobuttons/checkboxes?
}
}

hämtar jag nu datan? på rätt sett?
Kod: 
let text
async function myQuiz () {
  let myQ = await window.fetch(`http://vhost3.lnu.se:20080/question/1`)
  let jsonQ = await myQ.json()
  text = jsonQ.question
}
myQuiz().then(() => {
  let qDiv = document.querySelector('#questions')
  let quest = document.createElement('p')
  quest.innerHTML = text
  qDiv.appendChild(quest)
})

här är koden som jag hämtar frågan på.


tänkte också har jag gjort rätt med detta?
Kod: 
  var Inputt = document.getElementById('answers');
  var cb = document.createElement('input');
  cb.type = 'input';
  cbh.appendChild(cb);
}else{
om jag vill hämta hem så svarsalterativet blir en input, så man får skriva in svaret, dock måste jag skapa en button för svara?

sen i else vet jag inte riktigt, skapa en li formation?
Array.isArray kommer ge dig true om det är en Array, därför ska du skriva ut checkboxar och inte ett textfält i iffen.

Får du tag på frågan? I sådana fall är det väl rätt?

Resten av inlägget begriper jag inte, på nåt sätt måste ju användaren skicka sitt svar när det är färdigsvarat, då är väl en knapp för skicka ett bra alternativ, under förutsättning att du inte kommit på ett bättre sätt.
Citera
Svara

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Det är enkelt att registrera ett nytt konto

Bli medlem

Logga in

Har du redan ett konto? Logga in här

Logga in