Як подолати виклики кодування співбесід

Як багато хто з вас знає, я кілька тижнів претендував на роботу в галузі веб-розробки, і вважав, що було б непогано поділитися деякими проблемами кодування, з якими я стикався.

Не тільки це, але я поділюсь шляхами, якими я пішов, вирішуючи ці виклики. Звичайно, існує багато способів вирішити ці виклики, але саме такими шляхами я пішов. Якщо у вас є різні способи, що це чудово, і я хотів би, щоб ви поділилися ними зі мною!

Я не буду ділитися жодною ідентифікаційною інформацією про компанії або особливостями процесу співбесіди з цією компанією для збереження цілісності процесу.

Добре, давайте тоді дійдемо до цього.

Змагання

Це виклик, який мені нещодавно дали, і я добре почувався при вирішенні:

Завдання: Повернути основний стилізований список публікацій від кінцевої точки в зворотному хронологічному порядку

Щоб захистити компанію та її інформацію, я не буду повідомляти URL-адресу, з якої я повернув інформацію, а натомість матиму загальне посилання від JSONPlaceholder (чудовий, безкоштовний API з відкритим кодом для розробників, коли вам потрібно отримати деякі загальні зовнішні дані) у коді нижче.

Ось HTML, з якого я почав, тому нам є в чому відображати наші результати:

Original text


    тег має ідентифікатор, тому ми можемо його стилізувати пізніше в процесі.

    Отримання даних із кінцевої точки

    Гаразд, давайте розглянемо частину цього виклику на JavaScript . По-перше, я люблю встановлювати свої вихідні та відображати змінні:

    Я використовую let для вихідної змінної і встановлюю для неї значення null, оскільки ми змінимо її значення пізніше в коді. Список змінна оголошена з сопзЬ , тому що це значення не змінюватиметься.

    У наведеному вище прикладі ми оголошуємо функцію стрілки з іменем getData, загорнуту в блок спроби… catch (Це чистіший / простіший у використанні / читання синтаксис, який використовує спроби деякого коду та виявляє помилки, якщо вони трапляються - улову ділянку нижче). Оскільки ми отримуємо дані асинхронно, нам також потрібно використовувати async / await для отримання даних. Це метод, який мені найбільше сподобався, але я знаю, що є багато інших способів отримати дані від кінцевої точки, тому сміливо діліться своїми: D

    Після того, як ми оголосили свою змінну даних , наступне - встановити змінну, щоб повернути повернені дані в об'єкт JSON, щоб ми могли отримати їх у придатній для використання формі. Ми робимо це за допомогою методу .json () . Ми також очікуємо на дані, тому що якщо б ми опустили ключове слово await , JavaScript спробував би перетворити змінну даних у JSON, але даних ще не було б, оскільки вони надходять з асинхронного API.

    Як останній рядок у розділі, ми console.log наші дані, які ми отримуємо назад з кінцевої точки API, просто щоб переконатися, що ми отримуємо все, що хотіли. У нас є масив, повний об’єктів. Ви також помітите, що ключ published_at містить наші дати, і вони не в будь-якому типі порядку. Їх формат також не є простим чотиризначним числом, що представляє рік, що полегшить їх фільтрування у зворотному хронологічному порядку . Нам потрібно буде подбати про це.

    Маніпулювання нашими даними

    Тут ми оголошуємо змінну dataCopy, яка вказує на змінну dataJSON, мутовану в масив за допомогою оператора поширення (...) . По суті, ми копіюємо наші повернені дані JSON, тому ми не маніпулюємо оригіналом (погана практика), роблячи його в масив, щоб ми могли переглядати його.

    Після цього ми сортуємо масив. Сортування є надзвичайно корисним методом масиву, який розміщує наші індекси масивів у вибраному нами порядку на основі функції, яку ми передаємо в сортування.

    Як правило, ми можемо захотіти сортувати дані на основі значення (від найбільшого до найменшого), тому ми віднімаємо параметр a з параметра b . Але оскільки нам потрібно відображати наші результати в зворотному хронологічному порядку, я вирішив створити нову дату (виконану за допомогою нового оператора та вбудованого методу JavaScript Date, який створює нову незалежну від платформи відформатовану копію дати. Тепер, оскільки a та b представляємо наші об'єкти, що знаходяться всередині наших індексів масиву, ми можемо отримати доступ до пар ключ / значення, що містяться в зазначених об'єктах. Отже, ми віднімаємо b.published_at з a.published_at, і це повинно дати нам наші дати взворотний хронологічний порядок .

    Показ плодів нашої праці

    Пам'ятаєте, яку вихідну змінну ми встановили як нуль у самому верху нашої програми? Ну ось зараз час блищати!

    Отже, тут відбувається кілька речей. По-перше, ми встановлюємо для вихідної змінної нове значення, зіставляючи нашу змінну dataCopy за допомогою методу map . Цей метод повертає новий масив з результатами виклику наданої функції один раз для кожного індексу. Параметр item представляє наші об'єкти всередині нашого масиву, який було повернуто з кінцевої точки, і таким чином має доступ до всіх їх властивостей, таких як title і published_at .

    Ми повертаємо два елементи списку за допомогою a всередині кожного (для стилізації), а також рядок для заголовків заголовка та дати публікації . Усередині них є наші змінні, які використовують літерали шаблонів для встановлення заголовка та дати для кожного повідомлення.

    Потім ми встановлюємо внутрішній HTML нашої змінної списку , рівний такому нашої вихідної змінної.

    Нарешті, у нас є закриваюча дужка та обробка помилок нашого блоку try ... catch , а також наш виклик функції:

    Підсумковий кодекс

    Ось як виглядає наш повний текст коду зараз:

    І ось наш базовий стиль CSS:

    І ось результат нашої роботи з дуже базовим стилем:

    Як бачите, ми виконали те, що задумали, і насправді перелік ведеться в зворотному хронологічному порядку . Ага!

    Сподіваюся, вам сподобалась ця прогулянка мого процесу мислення та того, як я вирішив цю проблему. Звичайно, існує безліч способів виконати це, тож сміливо діліться своїм зі мною! Я радий продовжувати цю серію, і після того, як я пройшов ще один виклик, я опублікую ще одну!

    Крім того, я розміщую більшість своїх статей на чудових платформах, таких як Dev.to та Medium, щоб ви також могли знайти там мою роботу. Ця стаття була спочатку розміщена в моєму блозі 27 травня 2019 року.

    Поки ви тут, чому б не підписатись на мій бюлетень . Я обіцяю, що ніколи не буду спамувати вашу поштову скриньку, і ваша інформація нікому / на веб-сайті не буде передана. Я люблю час від часу надсилати цікаві знайдені ресурси, статті про веб-розробку та список своїх найновіших дописів.

    Гарного дня, наповненого любов’ю, радістю та кодуванням!