How to fetch json and add it to an array using fetch command in javascript

Question

I am new to javascript and I'm not too sure how to add json to an array. I fetching the json using the fetch command. This is my code to fetch the json file

fetch("event.json")
  .then(response => response.json())
  .then(json => console.log(json));

I'm not sure how to add this to an array now, any help would be greatly appreciated!

This is the json i am fetching

{
   "id": "1",
   "name": "Tim",
   "email": "Tim@gmail.com",
   "event":[{"id":1,"name":"HomeShow"}]
}

It is a large json file with multiple people. I need to fetch this file and then add it to an array so i can iterate through it and take out certain values

please show your JSON here. and What is the expected output you want to be generated from that JSON? — Zainul Abideen, Apr 17 '19 at 08:37
Why would you want to use an array instead of an object. You could just [assign the json parsed content to an object and access it as an array/object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse). Is there a specific motivation? — LukeSavefrogs, Apr 17 '19 at 08:39
fwiw, at that point you're not adding JSON you're adding the parsed data that the `.json()` returns. — Andy, Apr 17 '19 at 08:39
If that data is already an array you can simply do `.then(events => console.log(events)). You will also need to read up on [how to return the response from an async call](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) because you will likely fall into a trap of how to access that data later. — Andy, Apr 17 '19 at 08:59
Just use `push()` : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push — NVRM, Apr 17 '19 at 09:34

Eyal · Answer 1 · 2019-04-17T09:18:25.280

0

If I understand correctly, your JSON file, event.json (which should be events.json?), contains an array of objects like so:

[
  {
    "id": "1",
    "name": "Tim",
    "email": "Tim@gmail.com",
    "event": [{ "id": 1, "name": "HomeShow" }]
  },
  {
    "id": "2",
    "name": "John",
    "email": "John@gmail.com",
    "event": [{ "id": 1, "name": "HomeShow" }]
  }
]

Then, to filter the data you could do this in the callback of the promise:

fetch('event.json')
  .then(res => res.json())
  .then(events => events.filter(event => event.name !== 'John'))

Please note that this statement returns a promise which will have the (filtered) data sometime in the future (since it's asynchronous).

To be able to use that data later, you could wrap it in a function, return the promise and use .then on the return value to use the data:

function getFilteredEvents() {
  return fetch('event.json')
    .then(res => res.json())
    .then(events => events.filter(event => event.name !== 'John'))
}

getFilteredEvents().then(filteredEvents => console.log(filteredEvents))

edited Apr 17 '19 at 09:18

answered Apr 17 '19 at 08:38

Eyal

1,649
3
25
49

The danger of this is how you're going to access the data in events once the fetch is complete. – Andy Apr 17 '19 at 08:41
@Andy Could you please elaborate? – Eyal Apr 17 '19 at 08:42
`fetch`, `.json()` are both async operations. Your answer doesn't show _how_ `events` can be _accessed_ once the operations are complete. You might assume that you could simply do a `console.log` after the fetch and `events` would show a full array of data, but that wouldn't be the case. – Andy Apr 17 '19 at 08:45
@Andy Got it, although it's another problem OP would have to solve, and probably it should be part of the question. – Eyal Apr 17 '19 at 08:48
Once it is added to an array i need iterate through it and take out certain data, after this fetch would the all the data from the json file be in events? which i can then iterate through – Jane Ryan Apr 17 '19 at 09:04

How to fetch json and add it to an array using fetch command in javascript

1 Answers1