如何将数据从一个功能传递到另一个功能？

Question

I get the data. I bring a minimum of information about the user. When you click on a block, modal window appears. Modal window, more information should be. I cannot transfer data in a modal window. Maybe I'm doing wrong. Point out the mistakes, tell me how to correctly, please. codepen.io/zaytsevav/pen/oBQrOm

Answer 1

You can store results in a global variable and access it in myModal using index.

var results = [];
getData('https://api.randomuser.me/1.0/?results=50&nat=gb,us&inc=gender,name,location,email,phone,picture',
  function(data) {

    var html = '';
    for (var i = 0; i < data["results"].length; i++) {
      var name = data["results"][i]["name"]["title"] + ' ' + data["results"][i]["name"]["first"] + ' ' + data["results"][i]["name"]["last"],
        img = data["results"][i]["picture"]["large"];
      html += '<div class="col-md-2 block__user_on" onclick="myModal(this.id)" id="' + [i] + '"> ';
      html += '<img src="' + img + '" title="' + name + '"/>';
      html += '<p class="block__user_on-capitalize">' + name + '</p>';
      html += '</div>';
    }
    document.getElementById("user").innerHTML = html;
    results = data["results"];
  }
);


function myModal(index) {
  var data = results[index];
  console.log(data);
  document.getElementById("Modal").style.display = "block";
  document.getElementById("userModal").innerHTML = '<div>' + data.name.first + " " + data.name.last + ',' + data.location.city + '</div>';

}

demo : https://jsbin.com/juxuhixubu/1/edit?js,output

This is will make it work and will help you to understand things. But if the project has more such use cases, you can think about using a modern framework in Javascript, in which this can be done in a much better way.

Answer 2

You can solve this by replacing the myModal function with the code below:

function myModal(data) {

    document.getElementById("userModal").innerHTML = "";
    document.getElementById("userModal").appendChild(data);
    document.getElementById("Modal").style.display = "block";

    console.log(data);

} 

It first erases everything that the modal may have had (by setting its innerHTML to nothing) and then it uses the appendChild method in order to add the div (that is in the data string) in the modal window.

You can test that it works here .

EDIT

As written on the documentation for appendChild function :

If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position.

That's why the block was removed when you clicked on it.

So, in the code below I used the cloneNode function and the problem was solved.

function myModal(data) {

    console.log(data);

    document.getElementById("userModal").innerHTML = "";
    dataNode = data.cloneNode(true);
    document.getElementById("userModal").appendChild(dataNode);
    document.getElementById("Modal").style.display = "block";

} 

Pleasae let me know if that was helpful !

Answer 3

Put it inside your cycle:

document.getElementById("user").insertAdjacentHTML('beforeend', html);
document.getElementById(i).setAttribute('data-person', JSON.stringify(data["results"][i]));

Instead of:

document.getElementById("user").innerHTML = html;

Then add inside your myModal function:

console.log(JSON.parse(data.getAttribute('data-person')));