How to read json data in javascript

<script>
  function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}

//usage:
var data;
readTextFile("tarot_card_detail.json", function(text){
     data = JSON.parse(text);
    for (const key in data) {
      $("#tarot_card_holder").append('<div class="card" >\
  <img  class="img-fluid card-img-top" style="height:300px" src="https://cdn.pixabay.com/photo/2021/02/15/07/46/empress-6016923_1280.jpg" alt="Card image cap">\
    </div>');
     // console.log(data[key]['name']+" "+data[key]['value']);
    }
   // console.log(data);
});
</script>