JSONを再帰的に取得し、オブジェクトを描画するまで404

Question

現在、URLからJSONオブジェクトを再帰的に呼び出そうとしています（完了したら正方形を作成する必要があります）。 JSONオブジェクトを取得して線を描画したら、フェッチされたオブジェクト内のURLを使用して、次の詳細で新しいJSONオブジェクトを呼び出します。

最終的なURLが404を返すと停止し、イメージを構築するために使用されたすべてのURLの配列を構築する必要があります。

オブジェクトがそうのように構成されています

{ 
    x1: 0, 
    y1: 0, 
    x2: 100, 
    y2: 100, 
    col: 'red', 
    url: 'http://nexturl.com/nextLine.json' 
} 

私は現在、この機能を持っている：

async function linkedDrawing(canvas, url) { 
    let urlArr = [url]; 
    const c = document.getElementById(canvas).getContext('2d'); 

    const response = await fetch(url); 
    let json; 

    while(response.ok) { 
     json = await response.json(); 

     c.lineWidth = 3; 
     c.strokeStyle = json.col; 
     c.beginPath(); 
     c.moveTo(json.x1, json.y1); 
     c.lineTo(json.x2, json.y2); 
     c.stroke(); 

    } 

    urlArr.push(url); 
    return urlArr; 
} 

は、どのように私はそれを動作させるために、これを修正することができますか？

Answer 1

あなたはほとんどそこにいたと思います。これを試してもらえますか？これがうまくいけば教えてください。

const c = document.getElementById(canvas).getContext('2d'); 
let url = 'http://someurl'; 

linkedDrawing(c, url, []) 
    .then(console.log) 
    .catch(console.log); 

async function linkedDrawing(canvas, url, urlsArray) { 
    urlsArray.push(url); 
     const response = await fetch(url); 
     if (response.ok) { 
      let json = await response.json(); 
      c.lineWidth = 3; 
      c.strokeStyle = json.col; 
      c.beginPath(); 
      c.moveTo(json.x1, json.y1); 
      c.lineTo(json.x2, json.y2); 
      c.stroke(); 
      return await linkedDrawing(canvas, json.url, urlsArray); 
     } 
     else { 
      return urlsArray 
     } 
}