Как получить данные из локального файла JSON в Javascript

Question

Я пытаюсь получить указанный c идентификатор из файла JSON в зависимости от ввода пользователя, а затем отобразить изображение на основе идентификатора, полученного из JSON файла

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();
}

Answer 1

Я попытался ответить на вашу проблему после выявления вашей проблемы.

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";
}

Answer 2

Я думаю, что вам нужно, ниже, но я не уверен, что понял вашу json структуру:

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();