承诺并将数组中的元素添加到另一个数组中的对象中答案

【问题标题】：Promises and adding elements from an array into objects within another array承诺并将数组中的元素添加到另一个数组中的对象中
【发布时间】：2019-03-12 10:19:03
【问题描述】：

分配是一个命令行节点应用程序，它从特定站点刮取一些数据并将该数据保存到 CSV 文件中。

我正在使用scrape-it 来抓取数据并成功获取我需要的所有数据，但我正在努力弄清楚如何将每个 URL（存储在 urls 中）添加到它们相应的衬衫对象中，即一个对象数组。

这是我目前所拥有的。

const scrapeIt = require("scrape-it");

const mainURL = "http://shirts4mike.com/";

scrapeIt(`${mainURL}shirts.php`, {
  pages: {
    listItem: ".products li",
    name: "pages",
    data: {
      url: {
        selector: "a",
        attr: "href"
      }
    }
  }
})
  .then(({ data }) => {
    const urls = data.pages.map(page => `${mainURL}${page.url}`);
    console.log(urls);
    const shirtCalls = urls.map(url =>
      scrapeIt(url, {
        name: {
          selector: ".shirt-picture img",
          attr: "alt"
        },
        image: {
          selector: ".shirt-picture img",
          attr: "src"
        },
        price: {
          selector: "span.price"
        }
      })
    );
    return Promise.all(shirtCalls);
  })
  .then(shirtResults => {
    const shirts = shirtResults.map(shirtResult => shirtResult.data);
    console.log(shirts);
  });

所以“衬衫”给我的输出是，

[ { name: 'Logo Shirt, Red',
    image: 'img/shirts/shirt-101.jpg',
    price: '$18' },
  { name: 'Mike the Frog Shirt, Black',
    image: 'img/shirts/shirt-102.jpg',
    price: '$20' },
  { name: 'Mike the Frog Shirt, Blue',
    image: 'img/shirts/shirt-103.jpg',
    price: '$20' },
  { name: 'Logo Shirt, Green',
    image: 'img/shirts/shirt-104.jpg',
    price: '$18' },
  { name: 'Mike the Frog Shirt, Yellow',
    image: 'img/shirts/shirt-105.jpg',
    price: '$25' },
  { name: 'Logo Shirt, Gray',
    image: 'img/shirts/shirt-106.jpg',
    price: '$20' },
  { name: 'Logo Shirt, Teal',
    image: 'img/shirts/shirt-107.jpg',
    price: '$20' },
  { name: 'Mike the Frog Shirt, Orange',
    image: 'img/shirts/shirt-108.jpg',
    price: '$25' } ]

但我想让最终结果看起来像......

[ { name: 'Logo Shirt, Red',
    image: 'img/shirts/shirt-101.jpg',
    price: '$18',
    url: 'http://shirts4mike.com/shirt.php?id=101' //which is at urls[0]
  },
  { name: 'Mike the Frog Shirt, Black',
    image: 'img/shirts/shirt-102.jpg',
    price: '$20',
    url: 'http://shirts4mike.com/shirt.php?id=102' //urls[1]
  }, //...etc etc

希望这一切都说得通，对于 Promise（和节点）来说仍然很新，所以我感觉有点超出我的深度。提前谢谢！

【问题讨论】：

感谢您的建议。我想尝试在最后的 .then() 块中执行此操作吗？

标签： javascript node.js npm web-scraping es6-promise

【解决方案1】：

试试这样的：

const scrapeIt = require("scrape-it");

const mainURL = "http://shirts4mike.com/";

scrapeIt(`${mainURL}shirts.php`, {
  pages: {
    listItem: ".products li",
    name: "pages",
    data: {
      url: {
        selector: "a",
        attr: "href"
      }
    }
  }
})
  .then(({ data }) => {
    const urls = data.pages.map(page => `${mainURL}${page.url}`);
    console.log(urls);
    return urls.map(async (url) => {
      let urlObj = await scrapeIt(url, {
        name: {
          selector: ".shirt-picture img",
          attr: "alt"
        },
        image: {
          selector: ".shirt-picture img",
          attr: "src"
        },
        price: {
          selector: "span.price"
        }
      });

     return {...urlObj.data, url};
   });
  })
  .then(shirtResults => {
    console.log(shirtResults);
  });

【讨论】：

感谢您的帮助！我试了一下，但现在我在“console.log(shirts)”上的输出正在输出一个由 8 个“未定义”组成的数组。我是否必须更改我的 Promise.all 或后续的 .then() 块？
哦，是的，我错过了一些东西，抱歉。我对代码做了一些更改，请再试一次:)
不幸的是，我仍然遇到了一个问题 :( 它说承诺正在等待记录的 shirtResults，但我将无法修复它归咎于我自己的无能。我确实设法达到了预期的结果如果你想知道怎么做，我把它贴在下面。再次感谢你在这里的帮助，我真的很感激。

【解决方案2】：

所以我实际上设法让它工作，这要感谢另一个用户提出的建议（尽管我认为他们删除了他们的评论？）。在最后的 .then() 中，我映射了衬衫，从图像属性中获取 pageID，并在模板文字中插入 mainURL、路径和最后的 pageID，并将该键/值添加到每个对象中。还以此为契机将完整的图像 url 存储在图像属性中。

  .then(shirtResults => {
    const shirts = shirtResults.map(shirtResult => shirtResult.data);
    shirts.map(shirt => {
      let pageID = shirt.image.replace(/\D/g, "");
      shirt.url = `${mainURL}shirt.php?id=${pageID}`;
      shirt.image = shirt.image.replace(/^/, `${mainURL}`);
    });
    console.log(shirts);
  });

感谢您的帮助！

【讨论】：