Парсинг сайта вакансии на Python. Часть 2. Отображение вакансий

Парсинг сайта вакансии на Python. Часть 2. Отображение вакансий

Парсинг сайта вакансии на Python. Часть 2. Отображение вакансий

Доброго времени суток! В прошлой статье мы рассмотрели вариант парсинга вакансий с сайта в JSON,
а в данной статье рассмотрим как этот **JSON-файл** с вакансиями можно отобразить на странице.

Файл с вакансиями в формате JSON:



[

    {

        "url": "https://{САЙТ}/vacancies/0001",

        "company": "Компания 1",

        "companyAbout": "Разработка CRM и EPR-систем",

        "title": "Web-разработчик",

        "description": "Описание вакансии с html-тегами",

        "salary": "От 150 000 до 300 000 ₽",

        "requiredSkills": "Бэкенд, Средний (Middle) • Git • PHP • ООП • Linux • SQL",

        "locationAndTypeOfEmployment": "Москва • Полный рабочий день • Можно удаленно"

    },

    {

        "url": "https://{САЙТ}/vacancies/0002",

        "company": "Компания 2",

        "companyAbout": "Международная металлургическая и горнодобывающая компания",

        "title": "Middle fullstack-разработчик",

        "description": "Описание вакансии",

        "salary": "не указана",

        "requiredSkills": "Разработка ПО, Средний (Middle) • PHP • Apache • MySQL",

        "locationAndTypeOfEmployment": "Новокузнецк, Новосибирск, Томск • Полный рабочий день"

    }

]



HTML-код и JavaScript-код, который отображает вакансии:



<!doctype html>

<html lang="en">

<head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">



    <!-- Bootstrap CSS -->

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"

          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">



    <title>Вакансии</title>



    <style>

        img {

            width: 100%;

        }

    </style>

</head>

<body>



    <div id="root"></div>



    <script>

        // карточка вакансии

        function VacancyCard(

            { url, company, companyAbout, title, 

              description, salary, requiredSkills, 

              locationAndTypeOfEmployment }

        )

        {

            // шаблонные строки с интерполяцией

            return `

                <div class="card mb-2">

                    <div class="card-body">

                        <h4 class="card-title mb-2">${title}</h4>

                        <h6 class="card-subtitle mb-3 text-muted">${company} • ${companyAbout}</h6>



                        <div class="mb-2">

                            <div class="text-muted">Зарплата</div>

                            <span class="card-title">${salary}</span>

                        </div>



                        <div class="mb-2">

                            <div class="text-muted">Требуемые навыки</div>

                            <span class="card-title">${requiredSkills}</span>

                        </div>



                        <p class="card-text">${description}</p>

                    </div>

                </div>

            `;

        }



        function App(vacancies) {



            return `

                <div class="container my-4">

                    <h3 class="mb-3">Вакансии</h3>

                    ${vacancies}

                </div>

            `

        }





        const rootElement = document.getElementById('root');



        // читаем вакансии из файла и отображаем в элементе root

        fetch('parsed_vacancies.json')

            .then(res => res.json())

            .then(data => {

                const vacanciesHtml = data.map(VacancyCard).join('');

                rootElement.innerHTML = App(vacanciesHtml);

            });





    </script>





    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"

            integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"

            crossorigin="anonymous"></script>



</body>

</html>



Вот таким образом мы отобразили извлеченные ранее вакансии в интерфейсе пользователя.

Источник

НЕТ КОММЕНТАРИЕВ

Оставить комментарий