使用 for 循环和 forEach 从网站中提取 html 以获取 JSON 对象数组答案

【问题标题】：Using for loop and forEach to extract html from website for JSON array of objects使用 for 循环和 forEach 从网站中提取 html 以获取 JSON 对象数组
【发布时间】：2020-03-21 21:19:54
【问题描述】：

我正在尝试从此网页的 html 生成一个 Javascript 对象数组（稍后将保存为 JSON 文件）：https://remoteok.io/remote-dev+javascript-jobs

我想提取第一部分的职位描述（在“今天”下列出） - 隐藏在下拉列表下方，直到您点击每个职位列表。见截图：

已经用表格构建了布局：职位列表和职位描述 html 容器都是同级表格行<tr>。

在网站上，第一个带有“远程创业公司的第一个健康保险”文字的“列表”是促销内容，因此当您在下面点击它时没有隐藏的职位描述文字。

所以在我的代码中，我从索引位置 2 开始，然后在 for 循环中以 2 的倍数进行迭代。这部分有效。但是我需要将这个职位描述添加到已经从其他数据创建的数组中的每个对象（称为scrapedArray）：

const first_table_row = $(first_section).find('tr');
      for(var i = 2; i < first_table_row.length; i+= 2) {
        let job_description = $(first_table_row[i]).find('.markdown').html().trim();
        // console.log(job_description);

        scrapedArray.forEach((obj) => {
          obj["job_description"] = job_description;
        });
      }

没有forEach 的控制台日志job_description 会按预期获取每个不同的作业描述，但是当我包含forEach 时，它只是为相同的可扩展路径作业列表重复相同的html，请参见此处（job_description 的输出被截断为html很长）：

(2) [{…}, {…}]
0:
company_logo: "https://remoteok.io/assets/jobs/07a835281c655f47e04cd5799f27d219.png?1584688805"
job_description: "\nScalable Path is looking for a Senior Full Stack.."
__proto__: Object
1:
company_logo: "https://remoteok.io/assets/jobs/9e96332ed226d8ffd20da84b6951b66e.png?1584649206"
job_description: "\nScalable Path is looking for a Senior Full Stack.."

我做错了什么？有没有更好的方法来做到这一点？

【问题讨论】：

标签： javascript jquery node.js cheerio

【解决方案1】：

当您在for 循环中循环forEach 时，数组中的所有job_description 都将分配给一个变量，因此它具有相同的值（最后一个for 循环）。我已将 for 循环从 1 更改为 2，因为您需要 company_logo，对吗？检查下面的代码，我已经检查过了，它可以工作！

let scrapedArray = [];
// Get the first tbody
let first_section = $('#jobsboard tbody')[0];

const first_table_row = $(first_section).find('tr');
for (var i = 1; i < first_table_row.length; i += 2) {
  let company_logo = $(first_table_row[i]).find('.logo').attr('src');
  let job_description = $(first_table_row[i + 1]).find('.markdown').html().trim();
  scrapedArray.push({
    company_logo, job_description
  });
}
console.log(scrapedArray);

希望这会有所帮助！

【讨论】：