Importing data from a json file using pure javascript or es6

Question

I'm working on a html project that I have to import some data from a json file (cannot be edited), and I need to do this using pure javascript or ES6, but I have no idea how to do this, because all that I knew I apllyed on the code, but it didn't work. Right now, I only want to get a link of a background image who is inside the json file, so if I can get acess to the data, my work after this is simple. A little example of how it works using the tools that I wrote above will help me a lot.

Link to the json file: https://sample-api-78c77.firebaseio.com/tv-shows/SHOW123.json

Can you share us the code you have tried so far? Also, please avoid linking, if you can, it's better to include example data in the question itself. — Sami Hult, Jan 09 '19 at 18:06
Howdy, welcome to SO! I might suggest adding an [MCVE](https://stackoverflow.com/help/mcve) of your effort thus far so folks can help troubleshoot. As the question stands it's a bit generic and generally answered with a quick trip to the google and for that reason you can likely expect vote closes / down votes accordingly but don't let it dissuade you from using SO as the great Q&A resource that it is! — Chris W., Jan 09 '19 at 18:07
thank you all guys for the answers, and Chris W. for the tip, I'm new here and I realized that someone already posted a similar question here, so I'll mark this post as duplicated and I'll take a look on that post to try to solve my question. — Matheus Martins, Jan 09 '19 at 21:34

score 0 · Answer 1 · answered Jan 09 '19 at 18:23

0

You import data using a technique called ajax

const url = 'https://sample-api-78c77.firebaseio.com/tv-shows/SHOW123.json'

fetch(url)
  .then(res => res.json())
  .then(json => console.log(json.Images.Background))

answered Jan 09 '19 at 18:23

Endless

34,080
13
108
131

score 0 · Answer 2 · answered Jan 09 '19 at 19:19

In plain js via XMLHttpRequest

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

function reqListener () {
  console.log(JSON.parse(this.responseText).Images.Background);
}

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "https://sample-api-78c77.firebaseio.com/tv-shows/SHOW123.json");
oReq.send();

Importing data from a json file using pure javascript or es6

2 Answers2