如何从链接中获取 JSON 数据并将其解析为 HTML

Question

Here is my pen and there I have to make a request to this link , retrieve the data, put it into JavaScript and show on a page, but my request yields an empty response. What might be wrong and how can I do it better?

    // Get the modal element

var modal = document.getElementById('simpleModal');

var modalBtn = document.getElementById('modalBtn');

var closeBtn = document.getElementById('closeBtn');

modalBtn.addEventListener('click', openModal);

var requestResultData;

// Listen for a close click
closeBtn.addEventListener('click', closeModal);

//Outside click
window.addEventListener('click', clickOutside);

// Function 

function openModal() {
  modal.style.display = 'block';
  dataRequest();
}

function dataRequest () {
  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4){
         console.log(xhr);
      }
  };
  xhr.open('GET','http://www.omdbapi.com/?i=tt5687270&apikey=480344f1');
  xhr.send();
}

// function to close modal

function closeModal() {
  modal.style.display = 'none';
}

// Function for an outside click


function clickOutside(e) {

  if(e.target == modal) {
      modal.style.display = 'none';
  }

}

Answer 1

You can use the fetch api

fetch("https://yourwebsite.com/data.json")
.then(res=>res.json())
.then(res=>{
    //do something with the data here
    console.log(res);
});

More about the fetch api here