{"id":22358396,"url":"https://github.com/thedvlprs/json_for_each","last_synced_at":"2025-03-26T13:43:44.726Z","repository":{"id":114654157,"uuid":"273257730","full_name":"thedvlprs/json_for_each","owner":"thedvlprs","description":":tada: Looping over JSON array in JavaScript","archived":false,"fork":false,"pushed_at":"2020-06-18T14:19:34.000Z","size":609,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-31T15:17:22.319Z","etag":null,"topics":["javascript","json-array","json-server-lib","looping"],"latest_commit_sha":null,"homepage":"","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-06-18T14:18:51.000Z","updated_at":"2021-04-18T05:09:55.000Z","dependencies_parsed_at":"2024-02-08T05:35:09.391Z","dependency_job_id":null,"html_url":"https://github.com/thedvlprs/json_for_each","commit_stats":null,"previous_names":["thedvlprs/json_for_each"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedvlprs%2Fjson_for_each","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedvlprs%2Fjson_for_each/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedvlprs%2Fjson_for_each/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedvlprs%2Fjson_for_each/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thedvlprs","download_url":"https://codeload.github.com/thedvlprs/json_for_each/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":["javascript","json-array","json-server-lib","looping"],"created_at":"2024-12-04T15:14:42.490Z","updated_at":"2025-03-26T13:43:44.698Z","avatar_url":"https://github.com/thedvlprs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Looping over JSON array in JavaScript\n\n**JSON** `forEach` tutorial shows how to loop over a **JSON array** in **JavaScript**. In this tutorial we use **JSON server** to handle test data.\n\n \nThe `json-server` is a JavaScript library to create testing **REST API**.\n\nFirst, we create a project directory an install the `json-server` module.\n\n`$ mkdir jsonforeach`\n\n`$ cd jsonforeach`\n\n`$ npm init -y`\n\n`$ npm i -g json-server`\n\nThe JSON server module is installed globally with npm.\n\n## JSON test data\n\nWe have some JSON test data:\n\n`users.json`\n\n```json\n{\n  \"users\": [\n    {\n      \"id\": 1,\n      \"first_name\": \"Robert\",\n      \"last_name\": \"Schwartz\",\n      \"email\": \"rob23@gmail.com\"\n    },\n    {\n      \"id\": 2,\n      \"first_name\": \"Lucy\",\n      \"last_name\": \"Ballmer\",\n      \"email\": \"lucyb56@gmail.com\"\n    },\n    {\n      \"id\": 3,\n      \"first_name\": \"Anna\",\n      \"last_name\": \"Smith\",\n      \"email\": \"annasmith23@gmail.com\"\n    },\n    {\n      \"id\": 4,\n      \"first_name\": \"Robert\",\n      \"last_name\": \"Brown\",\n      \"email\": \"bobbrown432@yahoo.com\"\n    },\n    {\n      \"id\": 5,\n      \"first_name\": \"Roger\",\n      \"last_name\": \"Bacon\",\n      \"email\": \"rogerbacon12@yahoo.com\"\n    }\n  ]\n}\n```\n\n`$ json-server --watch users.json`\n\nThe `--watch` command is used to specify the data for the server.\n\n\n`$ curl localhost:3000/users/3/`\n\n```json\n{\n  \"id\": 3,\n  \"first_name\": \"Anna\",\n  \"last_name\": \"Smith\",\n  \"email\": \"annasmith23@gmail.com\"\n}\n```\n\nWith the `curl` command, we get the user with Id 3.\n\n## JSON forEach example\n\nIn the next example we retrieve data with a **GET** request using **fetch API**. We loop over the returned data with `forEach`.\n\n`index.html`\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003ctitle\u003eHome page\u003c/title\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n\n    \u003cbutton id=\"log\"\u003eLog\u003c/button\u003e\n\n    \u003cscript src=\"main.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\n\nThis is the `index.html` page. By clicking on the `Log button`, we `fetch` the data from the **JSON** server test data and log it into the **browser console**.\n\n`main.js`\n\n```js\nconst logBtn = document.getElementById('log');\nlogBtn.addEventListener('click', fetchData);\n\nasync function fetchData() {\n\n    const response = await fetch('http://localhost:3000/users/');\n    const data = await response.json();\n\n    data.forEach(obj =\u003e {\n        Object.entries(obj).forEach(([key, value]) =\u003e {\n            console.log(`${key} ${value}`);\n        });\n        console.log('-------------------');\n    });\n}\n```\n\nThe `fetch()` function retrieves data as JSON array from the provided URL. With `forEach()`, we go through the array.\n\n```js\nObject.entries(obj).forEach(([key, value]) =\u003e {\n    console.log(`${key} ${value}`);\n});\n```\n\nWe go over the entries of each object and print the key and the value to the **console**.\n\n\n```markdown\nid 1 main.js:12:13\nfirst_name Robert main.js:12:13\nlast_name Schwartz main.js:12:13\nemail rob23@gmail.com main.js:12:13\n------------------- main.js:14:9\nid 2 main.js:12:13\nfirst_name Lucy main.js:12:13\nlast_name Ballmer main.js:12:13\nemail lucyb56@gmail.com main.js:12:13\n------------------- main.js:14:9\n...\n```\n\n![](demo.png)\n\nThis is the output in the **browser console**.\n\nIn this tutorial, we have shown how to *iterate over a JSON array with* `forEach`.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthedvlprs%2Fjson_for_each","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthedvlprs%2Fjson_for_each","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthedvlprs%2Fjson_for_each/lists"}