How to get data from a local JSON file in Javascript

Question

I'm trying to retrieve a specific ID from the JSON file depending on user input and then display a picture based on the ID retrieved from the JSON file

function showCard() {
    var cardNaqme = document.getElementById('un').value;
    var cardNameProper = cardName.replace(/\s/g, '');
    var obj = JSON.parse("https://db.ygoprodeck.com/api/v7/cardinfo.php"+cardNameProper)
    var imgId = obj["data"][0]["id"]
    document.getElementById("chosenCard").src = "https://storage.googleapis.com/ygoprodeck.com/pics_small/"+imgId+".jgp";
    event.preventDefault();
}

Look at the example at [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch). — D. Pardal, Aug 03 '20 at 17:39
already answered here: https://stackoverflow.com/a/34579496/3183592 — MajiD, Aug 03 '20 at 17:41
Does this answer your question? [How to read an external local JSON file in JavaScript?](https://stackoverflow.com/questions/19706046/how-to-read-an-external-local-json-file-in-javascript) — AlexZeDim, Aug 03 '20 at 18:16

score 0 · Answer 1 · answered Aug 03 '20 at 17:44

I think what you need is below but I am not sure I understood your json structure:

var cardNaqme = document.getElementById('un').value;
var cardNameProper = cardName.replace(/\s/g, '');
var oReq = new XMLHttpRequest();
oReq.open("GET", "https://db.ygoprodeck.com/api/v7/cardinfo.php"+cardNameProper", true);
oReq.responseType  = "json";
oReq.onload = function(e) {
      JSONObject json = new JSONObject(res);
      JSONArray ja = json.getJSONArray("data");
      JSONObject obj = ja.getJSONObject(0);
      var imgId = obj.id;
      document.getElementById("chosenCard").src = "https://storage.googleapis.com/ygoprodeck.com/pics_small/"+imgId+".jgp";
}
oReq.send();

score 0 · Answer 2 · answered Aug 03 '20 at 20:51

I tried to answer your problem after identifying your problem.

function showCard()
{
event.preventDefault();
var cardNaqme = document.getElementById('un').value;
var cardNameProper = cardName.replace(/\s/g, '');
var obj = JSON.parse("https://db.ygoprodeck.com/api/v7/cardinfo.php"+cardNameProper)
var imgId = obj[0].id
document.getElementById("chosenCard").src = 
"https://storage.googleapis.com/ygoprodeck.com/pics_small/"+imgId+".jpg";
}

How to get data from a local JSON file in Javascript

2 Answers2