マスター API 統合: DummyJSON および JSONPlaceholder を使用したユーザーの取得と表示-jsチュートリアル-php.cn

マスター API 統合: DummyJSON および JSONPlaceholder を使用したユーザーの取得と表示

Linda Hamilton

リリース： 2025-01-02 17:08:37

オリジナル

634 人が閲覧しました

Master API Integration: Fetch and Display Users with DummyJSON & JSONPlaceholder

はじめに
この投稿では、DummyJSON や JSONPlaceholder などの API を使用してデータを動的に取得する、プロフェッショナルでインタラクティブなユーザーデータビューアを構築します。このステップバイステップのガイドは、HTML、CSS、JavaScript、アニメーション、キーフレームを使用して素晴らしい UI を作成するのに役立ちます。。この実践的な例を使用して、面接官に好印象を与えたり、プロジェクトのポートフォリオを強化したりしてください。

1. API の概要:
ユーザーデータを取得するために 2 つの API を使用します:

DummyJSON: 名前、性別、会社、住所などの詳細を含む模擬ユーザーデータを提供する多用途 API。ここで DummyJSON API を調べてください。
JSONPlaceholder: 模擬ユーザーデータを使用してテストするためのもう 1 つの優れた API。ここで JSONPlaceholder API を確認してください。

2.プロジェクトのセットアップ:
前提条件:
HTML、CSS、JavaScript の基本的な理解
コードエディタ (VS Code など)。
最新の Web ブラウザ。
手順:
プロジェクトフォルダーを作成し、次のファイルを含めます:
インデックス.html
style.css
script.js
CSS ファイルと JavaScript ファイルをindex.html にリンクします。

3.ユーザーインターフェイスの構築:
次のセクションでレスポンシブ UI を作成します:

ヘッダー: プロジェクトのタイトルを表示します。
フィルター: ユーザーを性別または部門でフィルターするためのボタン。
ユーザーリスト: API から動的にロードされたユーザー名を表示します。
ポップアップ: 名前をクリックすると、ユーザーの詳細が表示されます。

4. API からのデータの取得:
JavaScript で Fetch API を使用してデータを取得します:

fetch('https://dummyjson.com/users')
  .then((response) => response.json())
  .then((data) => {
    const users = data.users;
    console.log(users); // Display the user data in the console
  });

ログイン後にコピー

5.フィルタリングとポップアップ機能の実装:
フィルタリング:
ユーザーを性別または部門でフィルタリングするためのボタンを追加します。 JavaScript を使用して、フィルタリングされたデータを動的に表示します。

ポップアップ:
HTML および CSS アニメーションを使用してポップアップウィンドウを作成し、個人情報、会社名、経験年数などの詳細なユーザー情報を表示します。

6.結論と次のステップ:
おめでとう！フィルタリングとポップアップ機能を備えたプロフェッショナルなユーザーデータビューアが構築されました。

次のステップ:
ユーザーの並べ替えオプションを追加します (アルファベット順、部門別など)。
さらにアニメーションやテーマを追加して強化します。
プロジェクトをオンラインでデプロイします (Netlify または GitHub Pages)。

リソース:
DummyJSON ドキュメント
JSONプレースホルダー API
CSS キーフレームガイド

プロジェクトリソース
GitHub リポジトリ : 動的ユーザーデータビューアープロジェクト
ライブデモ: ここでライブプロジェクトをご覧ください

以上がマスター API 統合: DummyJSON および JSONPlaceholder を使用したユーザーの取得と表示の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。