Question

我无法理解最佳方法。

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

我在此网址上使用了抓取功能 - https://horizons-json-cors.s3.amazonaws.com/products.json

将我带到包含json的页面。里面的json是3个网址。每个网址都包含我需要访问的数据。

到目前为止，我已经访问了第一层，现在有了一个项目网址数组。我想我不知道如何在外部提取调用中获取数据。

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

您也可以通过这种方式获取内部网址数据，

// 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);
  });

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

3 个答案: