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

Question

I am trying to generate a Javascript array of objects (to later be saved as JSON file) from the html of this web page: https://remoteok.io/remote-dev+javascript-jobs

I want to extract the job descriptions for the first section (listed under "Today") - hidden beneath a dropdown until you click on each job listing. See screenshot:

The layout has been built with tables: The Job listing and Job description html containers are both sibling table rows <tr> .

On the site, the first "listing" with the text "the first health insurance for remote startups" is promotional content so doesn't have hidden job description text when you click on it below.

So in my code I start at index position 2 and then iterate by multiples of two in the for loop. This part works. But then I need to add this job description to each object in the array (called scrapedArray ) already created from other data:

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

Console logging job_description without the forEach gets each distinct job description as intended, but when I include the forEach it simply repeats the same html for the same Scalable Path job listing, see here (output of job_description truncated as html is quite long):

(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.."

What am I doing wrong? Is there a better way to do this?

Answer 1

When you loop forEach inside your for loop, all job_description in your array will be assigned to one variable, so it will have the same value (of the last for loop). I've changed the for loop from 1 instead of 2, because you need company_logo, right? Check the bellow code, I've checked and it works!

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

Hope this helps!