フェッチ呼び出しのネストによるネストされたデータへのアクセス方法

Question

私はこれに最善のアプローチを理解するのに困っています。

私の目標は、ネストされたデータを表示することです。 JSONを含むページに私を取るhttps://horizons-json-cors.s3.amazonaws.com/products.json

を -

私はこのURLにフェッチを使用します。 jsonの内部には3つのURLがあります。各URLには私がアクセスする必要のあるデータが含まれています。

これまでは、最初のレイヤーにアクセスしましたが、アイテムURLの配列があります。私はoutter fetch呼び出しの中にある間にデータをフェッチする方法を理解していないと思います。ここで

は（。結果は各URLは私が必要とするデータが含まれているURLの配列、である）これまでの私のコードです：

componentDidMount() { 
    console.log('Fetch'); 
    fetch("https://horizons-json-cors.s3.amazonaws.com/products.json") 
    .then((resp) => (resp.json())) 
    .then((json) => { 
     var productUrlArr = []; 
     for (var i = 0; i < json.length; i++) { 
     productUrlArr.push(json[i].url); 
     } 
    .catch((err) => { 
     console.log('error', err); 
    }); 
    }   

あなたたちは私を助け、本当にアクセスする方法を歩くことができれば次のレベルのデータは、本当に感謝しています。

Answer 1

コードに少し間違いがあります。

あなたが、アレイ内のデータを使用することができ、それにより.catch

前})が欠落しています。

componentDidMount(){ 
    console.log('Fetch'); 
    fetch("https://horizons-json-cors.s3.amazonaws.com/products.json") 
    .then((resp) => (resp.json())) 
    .then((json) => { 
     var productUrlArr = []; 
     for (var i = 0; i < json.length; i++) { 
     productUrlArr.push(json[i].url); 
     } 
     console.log(productUrlArr); 
    }).catch((err) => { 
     console.log('error', err); 
    }); 
} 

希望します。

Answer 2

簡単です。最初にあなたのようにすべてのURLを取得します。次にマップしてPromise.allに渡します。

fetch("https://horizons-json-cors.s3.amazonaws.com/products.json") 
    .then((resp) => (resp.json())) 
    .then((json) => { 
    Promise.all(json.map(product => 
     fetch(product.url).then(resp => resp.text()) 
    )).then(texts => { 
     // catch all the data 
    }) 
    }).catch((err) => { 
    console.log('error', err); 
    }); 

Answer 3

あなたは、あまりにも内部URLの

// 1. Outer Fetch call initiated here 
fetch("https://horizons-json-cors.s3.amazonaws.com/products.json") 
.then(res => { 
    return res.json() 
}) 
.then(res => { 

    // 2. array for storing url's retrieved from response 
    var urlArray = [] 

    if (res.length > 0) { 

     // 3. Push url inside urlArray 
     res.map(data => urlArray.push(data.url)) 
    } 

    // 4. an array of urls 
    return urlArray 
}) 
.then(urls => { 

    // Return an promise which will return "JSON response" array for all URLs. 
    // Promise.all means “Wait for these things” not “Do these things”. 

    return Promise.all(urls.map(url => { 
     // Take url fetch response, return JSON response 
     return fetch(url).then(res => res.json()) 
    } 
    )) 
}) 
.then(res => { 
    // Store all objects into array for later use 
    var objArr = res; return objArr 
    }) 
//.then(...)