Array objects implementing to html structure

Question

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

<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 )

<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>

Please read https://stackoverflow.com/help/how-to-ask and consider improving your question. — Gibin Ealias, Feb 06 '18 at 10:01

David · Answer 1 · 2018-02-06T17:14:07.850

0

You should use a javascript foreach loop

Once you have your array completed, create your html structure in a variable but replacing your texts with the vars in your array in a foreach loop:

yourArray.forEach(function(element) {
    //var element is the current iteration of your array
    var html += 
        '<div class="col-4">
            <a href="profile.html" class="">
            <div class="px-3 py-2 text-center user-name bgd-clr-red clr-white">
                {element.name} {element.lastname}</div>

            [...]

        </div>'
});

just replace the {...} content (brackets included) with your array like an object (person['firstName'] in your case). You can use dots like an object aswell (I think) an then just add your var to your html with

document.getElementById('idTarget').innerHtml += html;

edited Feb 06 '18 at 17:14

answered Feb 06 '18 at 10:08

David

614
5
20

This should make each html structure for each element of my array? – Stefan Sipic Feb 06 '18 at 11:37
@StefanSipic yeah it is a loop, every index of your array would be an interaction inside the foreach, check this doc https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/forEach – David Feb 06 '18 at 17:07

DanilGholtsman · Answer 2 · 2018-02-06T14:55:08.417

First, when you get your request data, you have your list of objects. You can generate desire html by iterating through the list and for each list item generate desired html.

Basic example just ot give you an idea here: https://jsfiddle.net/u6dy818f/1/

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

            for(person of jsonData)
            {
                generatetRawHtmlList.push(`<div class="col-4"> Name ${person.surname} Surname: ${person.firstName}</div>`)

            }

            $('#container').append(generatetRawHtmlList.toString())

         })}

Second to get a single profile information on separate page - you need to fetch data (or in case if no such API call filter data from previous request) by exact id which is related to profile you want to get.

You can generate hrefs with links which would look something like this <a href="\details\${person.id}"></a> and when you got by this route - call function, to get details or handle click on the link in the way it would get data you want and output it.

This approach (but it's as simple as the first one and its not best practice)

https://jsfiddle.net/u6dy818f/5/

As one possible solution you can open you other page with parameters like this yourpage?personId=2; And then, on your page, you can do something like this in javascript:

1) get your parameter from url (one of possible implementations of how to do it How can I get query string values in JavaScript?)

2) getting data from JSON and finding person by personId and 3) outputing the data

Like we did before:

 $.getJSON('https://raw.githubusercontent.com/Steffzz/damnz/master/data.json', 
 function(data) {
  var jsonData = jQuery.parseJSON(JSON.stringify(data)),
      personById = jsonData.find(function(el){ 
                return +el.id === +personIdFromUrl;
            });

       if(personById){
            var detailsString = `<div>Details here - ${el.surname} ${el.age}</div>`;
            $('#detailsContainerOnYourPage').append(detailsString);
        }

 }

But what I described here is not really good soultion - such DOM operations with jQuery costs a lot.

P.S.

I'd advise you to look at some tutorials on React with React-Router, as example, or maybe Vue.js, in the way how you can build pages and page transitions there

okay i did first part can you show me how to add informations to the other page? — Stefan Sipic, Feb 06 '18 at 14:22
@StefanSipic well, I updated the answer but, well, do you got other html page for details or you just want to do it without reloading? — DanilGholtsman, Feb 06 '18 at 14:28
i have as you can see in the code above there is a second page for their informations — Stefan Sipic, Feb 06 '18 at 14:30

Array objects implementing to html structure

2 Answers2