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

Question

我很难理解最好的方法。

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

我在这个网址上使用提取 - https://horizons-json-cors.s3.amazonaws.com/products.json

这将我带到一个包含 JSON 的页面。 JSON 内部有 3 个 URL。 每个 URL 都包含我需要访问的数据。

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

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

您也可以通过这种方式获取内部 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(...)

Answer 2

你的代码中有一点错误。

在.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 3

很简单。首先像你一样先获取所有网址。然后映射并将其传递到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);
  });