如何通过嵌套获取调用来访问嵌套数据？

Question

我无法理解解决此问题的最佳方法。

我的目标是显示嵌套数据。

我在上面使用了 fetch url - https://horizons-json-cors.s3.amazonaws.com/products.json

这会将我带到包含 json 的页面。在 json 里面是 3 urls。每个 url 包含我需要获取的数据。

到目前为止，我已经访问了第一层，现在有了 url 项的数组。我想我不明白如何在外部获取调用中获取数据。

这是我到目前为止的代码（结果是一个 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(...)

如何通过嵌套获取调用来访问嵌套数据？

how to access nested data by nesting fetch calls?

json

nested

fetch

react-native