https://github.com/thedvlprs/json_for_each
:tada: Looping over JSON array in JavaScript
https://github.com/thedvlprs/json_for_each
javascript json-array json-server-lib looping
Last synced: about 1 year ago
JSON representation
:tada: Looping over JSON array in JavaScript
- Host: GitHub
- URL: https://github.com/thedvlprs/json_for_each
- Owner: thedvlprs
- Created: 2020-06-18T14:18:51.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-06-18T14:19:34.000Z (almost 6 years ago)
- Last Synced: 2025-01-31T15:17:22.319Z (over 1 year ago)
- Topics: javascript, json-array, json-server-lib, looping
- Language: JavaScript
- Homepage:
- Size: 595 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Looping over JSON array in JavaScript
**JSON** `forEach` tutorial shows how to loop over a **JSON array** in **JavaScript**. In this tutorial we use **JSON server** to handle test data.
The `json-server` is a JavaScript library to create testing **REST API**.
First, we create a project directory an install the `json-server` module.
`$ mkdir jsonforeach`
`$ cd jsonforeach`
`$ npm init -y`
`$ npm i -g json-server`
The JSON server module is installed globally with npm.
## JSON test data
We have some JSON test data:
`users.json`
```json
{
"users": [
{
"id": 1,
"first_name": "Robert",
"last_name": "Schwartz",
"email": "rob23@gmail.com"
},
{
"id": 2,
"first_name": "Lucy",
"last_name": "Ballmer",
"email": "lucyb56@gmail.com"
},
{
"id": 3,
"first_name": "Anna",
"last_name": "Smith",
"email": "annasmith23@gmail.com"
},
{
"id": 4,
"first_name": "Robert",
"last_name": "Brown",
"email": "bobbrown432@yahoo.com"
},
{
"id": 5,
"first_name": "Roger",
"last_name": "Bacon",
"email": "rogerbacon12@yahoo.com"
}
]
}
```
`$ json-server --watch users.json`
The `--watch` command is used to specify the data for the server.
`$ curl localhost:3000/users/3/`
```json
{
"id": 3,
"first_name": "Anna",
"last_name": "Smith",
"email": "annasmith23@gmail.com"
}
```
With the `curl` command, we get the user with Id 3.
## JSON forEach example
In the next example we retrieve data with a **GET** request using **fetch API**. We loop over the returned data with `forEach`.
`index.html`
```html
Home page
Log
```
This 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**.
`main.js`
```js
const logBtn = document.getElementById('log');
logBtn.addEventListener('click', fetchData);
async function fetchData() {
const response = await fetch('http://localhost:3000/users/');
const data = await response.json();
data.forEach(obj => {
Object.entries(obj).forEach(([key, value]) => {
console.log(`${key} ${value}`);
});
console.log('-------------------');
});
}
```
The `fetch()` function retrieves data as JSON array from the provided URL. With `forEach()`, we go through the array.
```js
Object.entries(obj).forEach(([key, value]) => {
console.log(`${key} ${value}`);
});
```
We go over the entries of each object and print the key and the value to the **console**.
```markdown
id 1 main.js:12:13
first_name Robert main.js:12:13
last_name Schwartz main.js:12:13
email rob23@gmail.com main.js:12:13
------------------- main.js:14:9
id 2 main.js:12:13
first_name Lucy main.js:12:13
last_name Ballmer main.js:12:13
email lucyb56@gmail.com main.js:12:13
------------------- main.js:14:9
...
```
This is the output in the **browser console**.
In this tutorial, we have shown how to *iterate over a JSON array with* `forEach`.