Использование для l oop и forEach для извлечения html с веб-сайта для JSON массива объектов - PullRequest
Новая
       37

Использование для l oop и forEach для извлечения html с веб-сайта для JSON массива объектов

0 голосов
/ 21 марта 2020

Я пытаюсь сгенерировать массив Javascript объектов (который впоследствии будет сохранен как файл JSON) из html этой веб-страницы: https://remoteok.io/remote-dev+javascript-jobs

Я хочу извлечь описания вакансий для первого раздела (перечислены в разделе «Сегодня») - скрытые под раскрывающимся списком, пока вы не нажмете на список вакансий. См. Снимок экрана:

Job description / job listing explainer

Макет был построен с использованием таблиц: список заданий и описание задания html Контейнеры представляют собой строки таблицы одного уровня <tr> .

На сайте первое «объявление» с текстом «первая медицинская страховка для удаленных стартапов» - это рекламный контент, поэтому при нажатии на него ниже не будет скрытого текста описания работы.

Итак, в моем коде я начинаю с позиции индекса 2, а затем повторяюсь по кратным двум в for для l oop. Эта часть работает. Но затем мне нужно добавить это описание задания к каждому объекту в массиве (называемом 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;
        });
      }

Ведение журнала консоли job_description без forEach получает каждое отдельное описание задания как предполагалось, но когда я включаю forEach, он просто повторяет тот же html для того же списка заданий Scalable Path, см. здесь (вывод 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.."

Что я делаю неправильно? Есть ли лучший способ сделать это?

1 Ответ

1 голос
/ 21 марта 2020

Когда вы * oop forEach внутри вашего for l oop, все job_description в вашем массиве будут присвоены одной переменной, поэтому она будет иметь то же значение (из последнего for) л oop). Я изменил для l oop с 1 вместо 2, потому что вам нужно company_lo go, верно? Проверьте приведенный ниже код, я проверил, и он работает! 

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

Надеюсь, это поможет!

...