Javascirpt: Как передать JSON ответ в качестве параметра от onreadystatechange? - PullRequest
Новая
       12

Javascirpt: Как передать JSON ответ в качестве параметра от onreadystatechange?

0 голосов
/ 23 апреля 2020

Итак, я пытаюсь получить список JSON объектов, а затем l oop через его элементы через fori l oop, создавая элементы <li> и <a>. Все работает гладко, за исключением случаев, когда я пытаюсь добавить функцию onclick в каждую итерацию. Я пытаюсь передать объект json в функцию onclick, но все теги показывают последний json объект.

Что мне нужно для каждого <a> чтобы показать соответствующий объект json при нажатии.

Пожалуйста, посмотрите код: 

var url = "https://restcountries.eu/rest/v2/all"

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var countries = JSON.parse(xhttp.responseText)

    var ul = document.getElementById('countries')

    for (var i = 0; i < countries.length; i++) { //start iteration

      var li = document.createElement("LI")
      var img = document.createElement("IMG")
      var a = document.createElement("A")
      var textNode = document.createTextNode(countries[i].name)

      img.setAttribute("src", countries[i].flag)
      ul.appendChild(li)
      li.appendChild(a)
      a.appendChild(img)
      a.appendChild(textNode);
      a.setAttribute("title", countries[i].name)

      var country = countries[i]
      a.onclick = function(){ CountryClicked(country)} //pass the current JSON to the onclick function of the current <a> Node, this isn't working correctly.
    }

  }
}

xhttp.open('GET', url, true);
xhttp.send();


function CountryClicked(country){
  var div = document.getElementById("parent-country-container")
  var h1 = document.createElement("h1")
  // div.appendChild(h1)
  h1.appendChild(document.createTextNode(country.name + " Clicked"))
  div.innerHTML = ""
  div.appendChild(h1)
}

Спасибо за ваше время.

1 Ответ

0 голосов
/ 24 апреля 2020

Необходимо использовать функцию замыкания, чтобы иметь возможность отправлять нужную страну. 

function CountryClicked(el) {
  alert(el.name);
}

var countries = [{'flag':'xx',name:'name'}, {'flag':'xx',name:'text 2'}];
    var ul = document.getElementById('countries')
    for (var i = 0; i < countries.length; i++) { //start iteration
      var li = document.createElement("LI")
      var img = document.createElement("IMG")
      var a = document.createElement("A")
      var textNode = document.createTextNode(countries[i].name)

      img.setAttribute("src", countries[i].flag)
      ul.appendChild(li)
      li.appendChild(a)
      a.appendChild(img)
      a.appendChild(textNode);
      a.setAttribute("title", countries[i].name)

      var country = countries[i];
      a.onclick = (function(country){ 
        return function(){ CountryClicked(country); }
     })(country); 
    }
<ul id="countries"></ul>
...