looping through pages to to get url and change the url using fetch

Question

i want it to be able to go the url in the page and get the next url and so on till the drawing is complete

function linkedDrawing(canvas,url){
    fetch(url)
   .then((response)=> response.json())
   .then((data)=>{
       url = data.url;
       alert(data.url);
       const c = canvas.getContext('2d');
       c.beginPath();
       c.moveTo(data.x1, data.y1);
       c.lineTo(data.x2, data.y2);
       c.strokeStyle = data.col;
       c.stroke();
     })
   }
 }
 linkedDrawing(linkedDrawingCanvas, "http://jacek.soc.port.ac.uk/tmp/ws/alpha.json")

my fiddle: http://jsfiddle.net/g1nqkn7h/3/

You're not providing enough context. What's in the response data? I assume there can be a URL somewhere? also, asking precisely about the part of your code that doesn't work as intended would encourage us to help you with what is obviously some kind of school assignment. — Touffy, Nov 02 '17 at 21:16

score 0 · Accepted Answer · answered Nov 02 '17 at 20:43

I have edited your code this way:

function linkedDrawing(canvas,url){


fetch(url)
  .then((response)=> response.json())
  .then((data)=>{
    const c = canvas.getContext('2d');
    console.log(data.url);
    c.beginPath();
    c.moveTo(data.x1, data.y1);
    c.lineTo(data.x2, data.y2);
    c.strokeStyle = data.col;
    c.stroke();
    //added this if to continue as long as we have value for URL. And recursively call the drawing function
    if(data.url) {
        linkedDrawing(canvas, data.url);
     }
  })
}

linkedDrawing(linkedDrawingCanvas, "http://jacek.soc.port.ac.uk/tmp/ws/alpha.json")

Note, no value is `return`ed from `linkedDrawing()` call – guest271314 Nov 02 '17 at 20:49 — guest271314, Nov 02 '17 at 20:49

score 0 · Answer 2 · answered Nov 02 '17 at 20:46

return the fetch() call from the function and schedule next call to the same function, see also multiple, sequential fetch() Promise

const canvas = document.getElementById("linkedDrawingCanvas");
const c = canvas.getContext('2d');

function draw(response) { 
  return response.json()
  .then(data => {       
    console.log(data.url);
    c.beginPath();
    c.moveTo(data.x1, data.y1);
    c.lineTo(data.x2, data.y2);
    c.strokeStyle = data.col;
    c.stroke();
    if (data.url) {
      return linkedDrawing(linkedDrawingCanvas, data.url).then(draw)
    } else {
      return "complete"
    }
  })
}

function linkedDrawing(canvas,url){
  return fetch(url)
  .then(draw)
}

linkedDrawing(linkedDrawingCanvas, "http://jacek.soc.port.ac.uk/tmp/ws/alpha.json")

Note, http://jacek.soc.port.ac.uk/tmp/ws/boss_level.json logs a `404` error — guest271314, Nov 02 '17 at 20:51

looping through pages to to get url and change the url using fetch

2 Answers2