JavaScript数组对象转换为html结构

Question

我有点新手，我有一个任务是从json获取数据并可视化每个人及其值，现在当我创建一个空数组并用所有人及其值填充它时，现在我被困在这个point：我有一个HTML结构[HTML STRUCTURE] [1]但我不知道如何将每个人对象从我的osoba数组添加到每个html结构（当我点击每个html结构时，它应该显示它们的值[INSIDE STRUCTURE] [2]），有人可以帮助我，谢谢理解。

class Osoba {
  constructor(id, firstName, surname, age, gender, friends) {
    this._id = id;
    this._firstName = firstName;
    this._surname = surname;
    this._age = age;
    this._gender = gender;
    this._friends = friends;
  }

  get id() {
    return this._id;
  }
  set id(id) {
    this._id = id;
  }
  get firstName() {
    return this._firstName;
  }
  set firstName(firstName) {
    this._firstName = firstName;
  }
  get surname() {
    return this._surname;
  }
  set surname(surname) {
    this._surname = surname;
  }
  get age() {
    return this._age;
  }
  set age(age) {
    this._age = age;
  }

  get gender() {
    return this._gender;
  }
  set gender(gender) {
    this._gender = gender;
  }

  get friends() {
    return this._friends;
  }
  set friends(friends) {
    this._friends = friends;
  }

}

var osobe = [];


$(function() {
  $.getJSON('https://raw.githubusercontent.com/Steffzz/damnz/master/data.json', function(data) {
    var json = jQuery.parseJSON(JSON.stringify(data));

    for (person of json) {

      var id = person['id'];
      var firstName = person['firstName'];
      var surname = person['surname'];
      var age = person['age'];
      var gender = person['gender'];
      console.log("json is:", JSON.stringify(json, undefined, 3));
      var friends = person['friends'].map(
        function(friendId) {
          console.log("friendID is:", friendId);
          var friend = json.find(function(person) {
            return person.id === friendId;
          });
          console.log("friend is:", JSON.stringify(friend, undefined, 2));
          return {
            firstName: friend.firstName,
            surname: friend.surname
          }
        }
      );

      var x = new Osoba(id, firstName, surname, age, gender, friends);
      osobe.push(x);


    }
    console.log(osobe);

  })
});

body {
  background-color: #cecece;
  height: 100%;
  color: #202020;
}

a {
  color: inherit;
}

a:hover,
a:focus {
  text-decoration: none;
  color: #c62828;
}

.bgd-clr-red {
  background-color: #c62828;
}

.clr-red {
  color: #c62828;
}

.font-bold {
  font-weight: bold;
}

.clr-white {
  color: #fff;
}

.bgd-clr-white {
  background-color: #fff;
}

.user-name {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.col-footer {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.hr {
  width: 100%;
  height: 1px;
  background-color: #666;
}

.bdr-right-gray {
  border-right: 1px solid #666;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

<header>
  <nav class="p-3 bgd-clr-red">

  </nav>
</header>
<div class="container">
  <div class="row py-4">
    <div class="col-4">
      <a href="profile.html" class="">
        <div class="px-3 py-2 text-center user-name bgd-clr-red clr-white">
          Firstname Lastname
        </div>
        <div class="px-3 py-4 text-center bgd-clr-white">
          <i class="fas fa-user fa-4x"></i>
        </div>
        <div class="px-3 py-2 text-center bgd-clr-red clr-white col-footer">
          Neki tekst
        </div>
      </a>
    </div>
    <div class="col-4">
      <a href="profile.html" class="">
        <div class="px-3 py-2 text-center user-name bgd-clr-red clr-white">
          Firstname Lastname
        </div>
        <div class="px-3 py-4 text-center bgd-clr-white">
          <i class="fas fa-user fa-4x"></i>
        </div>
        <div class="px-3 py-2 text-center bgd-clr-red clr-white col-footer">
          Neki tekst
        </div>
      </a>
    </div>
    <div class="col-4">
      <a href="profile.html" class="">
        <div class="px-3 py-2 text-center user-name bgd-clr-red clr-white">
          Firstname Lastname
        </div>
        <div class="px-3 py-4 text-center bgd-clr-white">
          <i class="fas fa-user fa-4x"></i>
        </div>
        <div class="px-3 py-2 text-center bgd-clr-red clr-white col-footer">
          Neki tekst
        </div>
      </a>
    </div>
  </div>
  <div class="row py-4">
    <div class="col-4">
      <a href="profile.html" class="">
        <div class="px-3 py-2 text-center user-name bgd-clr-red clr-white">
          Firstname Lastname
        </div>
        <div class="px-3 py-4 text-center bgd-clr-white">
          <i class="fas fa-user fa-4x"></i>
        </div>
        <div class="px-3 py-2 text-center bgd-clr-red clr-white col-footer">
          Neki tekst
        </div>
      </a>
    </div>
    <div class="col-4">
      <a href="profile.html" class="">
        <div class="px-3 py-2 text-center user-name bgd-clr-red clr-white">
          Firstname Lastname
        </div>
        <div class="px-3 py-4 text-center bgd-clr-white">
          <i class="fas fa-user fa-4x"></i>
        </div>
        <div class="px-3 py-2 text-center bgd-clr-red clr-white col-footer">
          Neki tekst
        </div>
      </a>
    </div>
    <div class="col-4">
      <a href="profile.html" class="">
        <div class="px-3 py-2 text-center user-name bgd-clr-red clr-white">
          Firstname Lastname
        </div>
        <div class="px-3 py-4 text-center bgd-clr-white">
          <i class="fas fa-user fa-4x"></i>
        </div>
        <div class="px-3 py-2 text-center bgd-clr-red clr-white col-footer">
          Neki tekst
        </div>
      </a>
    </div>
  </div>
  <div class="row py-4">
    <div class="col-4">
      <a href="profile.html" class="">
        <div class="px-3 py-2 text-center user-name bgd-clr-red clr-white">
          Firstname Lastname
        </div>
        <div class="px-3 py-4 text-center bgd-clr-white">
          <i class="fas fa-user fa-4x"></i>
        </div>
        <div class="px-3 py-2 text-center bgd-clr-red clr-white col-footer">
          Neki tekst
        </div>
      </a>
    </div>
    <div class="col-4">
      <a href="profile.html" class="">
        <div class="px-3 py-2 text-center user-name bgd-clr-red clr-white">
          Firstname Lastname
        </div>
        <div class="px-3 py-4 text-center bgd-clr-white">
          <i class="fas fa-user fa-4x"></i>
        </div>
        <div class="px-3 py-2 text-center bgd-clr-red clr-white col-footer">
          Neki tekst
        </div>
      </a>
    </div>
    <div class="col-4">
      <a href="profile.html" class="">
        <div class="px-3 py-2 text-center user-name bgd-clr-red clr-white">
          Firstname Lastname
        </div>
        <div class="px-3 py-4 text-center bgd-clr-white">
          <i class="fas fa-user fa-4x"></i>
        </div>
        <div class="px-3 py-2 text-center bgd-clr-red clr-white col-footer">
          Neki tekst
        </div>
      </a>
    </div>
  </div>
  <div class="row py-4">
    <div class="col-4">
      <a href="profile.html" class="">
        <div class="px-3 py-2 text-center user-name bgd-clr-red clr-white">
          Firstname Lastname
        </div>
        <div class="px-3 py-4 text-center bgd-clr-white">
          <i class="fas fa-user fa-4x"></i>
        </div>
        <div class="px-3 py-2 text-center bgd-clr-red clr-white col-footer">
          Neki tekst
        </div>
      </a>
    </div>
    <div class="col-4">
      <a href="profile.html" class="">
        <div class="px-3 py-2 text-center user-name bgd-clr-red clr-white">
          Firstname Lastname
        </div>
        <div class="px-3 py-4 text-center bgd-clr-white">
          <i class="fas fa-user fa-4x"></i>
        </div>
        <div class="px-3 py-2 text-center bgd-clr-red clr-white col-footer">
          Neki tekst
        </div>
      </a>
    </div>
    <div class="col-4">
      <a href="profile.html" class="">
        <div class="px-3 py-2 text-center user-name bgd-clr-red clr-white">
          Firstname Lastname
        </div>
        <div class="px-3 py-4 text-center bgd-clr-white">
          <i class="fas fa-user fa-4x"></i>
        </div>
        <div class="px-3 py-2 text-center bgd-clr-red clr-white col-footer">
          Neki tekst
        </div>
      </a>
    </div>
  </div>
  <div class="row py-4">
    <div class="col-4">
      <a href="profile.html" class="">
        <div class="px-3 py-2 text-center user-name bgd-clr-red clr-white">
          Firstname Lastname
        </div>
        <div class="px-3 py-4 text-center bgd-clr-white">
          <i class="fas fa-user fa-4x"></i>
        </div>
        <div class="px-3 py-2 text-center bgd-clr-red clr-white col-footer">
          Neki tekst
        </div>
      </a>
    </div>
    <div class="col-4">
      <a href="profile.html" class="">
        <div class="px-3 py-2 text-center user-name bgd-clr-red clr-white">
          Firstname Lastname
        </div>
        <div class="px-3 py-4 text-center bgd-clr-white">
          <i class="fas fa-user fa-4x"></i>
        </div>
        <div class="px-3 py-2 text-center bgd-clr-red clr-white col-footer">
          Neki tekst
        </div>
      </a>
    </div>
    <div class="col-4">
      <a href="profile.html" class="">
        <div class="px-3 py-2 text-center user-name bgd-clr-red clr-white">
          Firstname Lastname
        </div>
        <div class="px-3 py-4 text-center bgd-clr-white">
          <i class="fas fa-user fa-4x"></i>
        </div>
        <div class="px-3 py-2 text-center bgd-clr-red clr-white col-footer">
          Neki tekst
        </div>
      </a>
    </div>
  </div>
  <div class="row py-4">
    <div class="col-4">
      <a href="profile.html" class="">
        <div class="px-3 py-2 text-center user-name bgd-clr-red clr-white">
          Firstname Lastname
        </div>
        <div class="px-3 py-4 text-center bgd-clr-white">
          <i class="fas fa-user fa-4x"></i>
        </div>
        <div class="px-3 py-2 text-center bgd-clr-red clr-white col-footer">
          Neki tekst
        </div>
      </a>
    </div>
    <div class="col-4">
      <a href="profile.html" class="">
        <div class="px-3 py-2 text-center user-name bgd-clr-red clr-white">
          Firstname Lastname
        </div>
        <div class="px-3 py-4 text-center bgd-clr-white">
          <i class="fas fa-user fa-4x"></i>
        </div>
        <div class="px-3 py-2 text-center bgd-clr-red clr-white col-footer">
          Neki tekst
        </div>
      </a>
    </div>
    <div class="col-4">
      <a href="profile.html" class="">
        <div class="px-3 py-2 text-center user-name bgd-clr-red clr-white">
          Firstname Lastname
        </div>
        <div class="px-3 py-4 text-center bgd-clr-white">
          <i class="fas fa-user fa-4x"></i>
        </div>
        <div class="px-3 py-2 text-center bgd-clr-red clr-white col-footer">
          Neki tekst
        </div>
      </a>
    </div>
  </div>
  <div class="row py-4">
    <div class="col-4">
      <a href="profile.html" class="">
        <div class="px-3 py-2 text-center user-name bgd-clr-red clr-white">
          Firstname Lastname
        </div>
        <div class="px-3 py-4 text-center bgd-clr-white">
          <i class="fas fa-user fa-4x"></i>
        </div>
        <div class="px-3 py-2 text-center bgd-clr-red clr-white col-footer">
          Neki tekst
        </div>
      </a>
    </div>
    <div class="col-4">
      <a href="profile.html" class="">
        <div class="px-3 py-2 text-center user-name bgd-clr-red clr-white">
          Firstname Lastname
        </div>
        <div class="px-3 py-4 text-center bgd-clr-white">
          <i class="fas fa-user fa-4x"></i>
        </div>
        <div class="px-3 py-2 text-center bgd-clr-red clr-white col-footer">
          Neki tekst
        </div>
      </a>
    </div>
  </div>
</div>