How am i possible to add array objects from javascript to html divs,i m sorry for asking this but this is very important to me and my task,i m still learning and i dont know how to do that, can someone help me to solve this and i will learn from the code.**i need to implement informations from my array to the html structure and to show them there.** Please and thanks for understanding

```html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
<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"/>
<link rel="stylesheet" type="text/css" href="style.css"/>

</head>
<body>
    <script> 
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 = [];       //my empty array

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

            for(person of json)
            {
                //giving values to the objects atributes
                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); //making and objects and adding them to array

            }     
            console.log(osobe);

         }) 
    });
</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>

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</body>
</html>
```

and second page when i click on an object it should show me their information ( how can i add information to this page )

```html
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Single profile</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="style.css"/>

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

    </nav>
</header>
<div class="container">
    <div class="row py-4">

        <div class="col-6 m-auto">
            <div class="p-4 text-center">
                <i class="fas fa-user fa-4x"></i>
            </div>
            <div class="hr"></div>
            <div class="p-4 text-center">
                Welcome to the profile 

            </div>
            <div class="hr"></div>
            <div class="py-4">
                <div class="row">
                <div class="col-6 bdr-right-gray">
                    <div class="py-2">
                       <div class="d-flex align-items-center">
                           <span class="clr-red font-bold">First name:</span>
                       </div>
                    </div>
                    <div class="py-2">
                        <div class="d-flex align-items-center">
                            <span class="clr-red font-bold">Surname:</span>
                        </div>
                    </div>
                    <div class="py-2">
                        <div class="d-flex align-items-center">
                            <span class="clr-red font-bold">Age:</span>
                        </div>
                    </div>
                    <div class="py-2">
                        <div class="d-flex align-items-center">
                            <span class="clr-red font-bold">Gender:</span>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="py-2">
                        <span class="clr-red font-bold">Friends:</span>
                    </div>
                </div>
                </div>
            </div>
        </div>

    </div>
</div>
</div>
</div>

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</body>
</html>
```