{"id":22358395,"url":"https://github.com/thedvlprs/js-fetch-api","last_synced_at":"2025-03-26T13:43:44.338Z","repository":{"id":114654130,"uuid":"314837516","full_name":"thedvlprs/js-fetch-api","owner":"thedvlprs","description":"✨ JavaScript Fetch API example","archived":false,"fork":false,"pushed_at":"2020-11-21T15:08:02.000Z","size":120,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-31T15:17:22.311Z","etag":null,"topics":["demo","fetch-api","json"],"latest_commit_sha":null,"homepage":"https://tasteless-rule.surge.sh/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thedvlprs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-11-21T15:05:29.000Z","updated_at":"2020-12-05T21:02:02.000Z","dependencies_parsed_at":"2024-02-08T05:22:47.037Z","dependency_job_id":"26d84737-2a57-4bf6-9857-065e80f5b336","html_url":"https://github.com/thedvlprs/js-fetch-api","commit_stats":null,"previous_names":["thedvlprs/js-fetch-api"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedvlprs%2Fjs-fetch-api","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedvlprs%2Fjs-fetch-api/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedvlprs%2Fjs-fetch-api/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedvlprs%2Fjs-fetch-api/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thedvlprs","download_url":"https://codeload.github.com/thedvlprs/js-fetch-api/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245667554,"owners_count":20652982,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["demo","fetch-api","json"],"created_at":"2024-12-04T15:14:42.308Z","updated_at":"2025-03-26T13:43:44.313Z","avatar_url":"https://github.com/thedvlprs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![forthebadge](https://forthebadge.com/images/badges/built-with-grammas-recipe.svg)](https://forthebadge.com)\n\n#JavaScript Fetch API example\n\nSuppose that you have a `json file` that locates on the webserver with the following contents:\n\n```json\n[{\n        \"username\": \"john\",\n        \"firstName\": \"John\",\n        \"lastName\": \"Doe\",\n        \"gender\": \"Male\",\n        \"profileURL\": \"img/male.png\",\n        \"email\": \"john.doe@example.com\"\n    },\n    {\n        \"username\": \"jane\",\n        \"firstName\": \"Jane\",\n        \"lastName\": \"Doe\",\n        \"gender\": \"Female\",\n        \"profileURL\": \"img/female.png\",\n        \"email\": \"jane.doe@example.com\"\n    }\n]\n```\n\nThe following shows the `HTML page`:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003ctitle\u003eFetch API Demo\u003c/title\u003e\n    \u003clink rel=\"stylesheet\" href=\"css/style.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cdiv class=\"container\"\u003e\u003c/div\u003e\n    \u003cscript src=\"js/app.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nIn the `app.js`, we’ll use the `fetch() method` to get the user data and **render the data** inside the `\u003cdiv\u003e element` with the `class container`.\n\nFirst, declare the `getUsers() function` that fetches `users.json` from the **server**.\n\n```js\nasync function getUsers() {\n    let url = 'users.json';\n    try {\n        let res = await fetch(url);\n        return await res.json();\n    } catch (error) {\n        console.log(error);\n    }\n}\n```\n\nThen, develop the `renderUsers() function` that **renders user data**:\n\n```js\nasync function renderUsers() {\n    let users = await getUsers();\n    let html = '';\n    users.forEach(user =\u003e {\n        let htmlSegment = `\u003cdiv class=\"user\"\u003e\n                            \u003cimg src=\"${user.profileURL}\" \u003e\n                            \u003ch2\u003e${user.firstName} ${user.lastName}\u003c/h2\u003e\n                            \u003cdiv class=\"email\"\u003e\u003ca href=\"email:${user.email}\"\u003e${user.email}\u003c/a\u003e\u003c/div\u003e\n                        \u003c/div\u003e`;\n\n        html += htmlSegment;\n    });\n\n    let container = document.querySelector('.container');\n    container.innerHTML = html;\n}\n\nrenderUsers();\n```\n\n###Output\n\n![](demo.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthedvlprs%2Fjs-fetch-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthedvlprs%2Fjs-fetch-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthedvlprs%2Fjs-fetch-api/lists"}