实现html结构的数组对象

时间：2018-02-06 09:53:03

标签： javascript html

我怎样才能将数组对象从javascript添加到html div，我很抱歉问这个，但这对我和我的任务非常重要，我还在学习，我不知道怎么做，有人可以帮助我解决这个问题，我将从代码中学习。我需要从我的数组实现信息到html结构并在那里显示它们。请和感谢理解

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

和第二页，当我点击一个对象时，它应该显示他们的信息（我如何向这个页面添加信息）

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

你应该使用javascript foreach循环

完成数组后，在变量中创建html结构，但在foreach循环中用数组中的变量替换文本：

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

只需将您的数组中的{...}内容（包括括号）替换为对象（在您的情况下为[＆＃39; firstName＆＃39;]）。您可以像对象一样使用点（我认为）然后只需使用

将您的var添加到您的html中 
document.getElementById('idTarget').innerHtml += html;

答案 1 :(得分：0)

首先，当您获得请求数据时，您将拥有对象列表。您可以通过迭代列表生成所需的html，并为每个列表项生成所需的html。

基本示例只是在这里给你一个想法：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())

         })}

第二次以在单独的页面上获取单个配置文件信息 - 您需要获取精确id的数据（如果没有此类API调用过滤数据，则需要提取）{与您想要获得的个人资料相关。

您可以使用看起来像这样的链接生成href <a href="\details\${person.id}"></a>当你通过这条路线 - 呼叫功能时，获取详细信息 或者按照获取所需数据的方式点击链接并输出它。

这种方法（但它与第一​​种方法一样简单，而不是最佳实践）

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

作为一种可能的解决方案，您可以使用这样的参数打开其他页面 yourpage?personId=2; 然后，在您的页面上，您可以在javascript中执行以下操作：

1）从url获取你的参数（如何实现它的可能实现之一How can I get query string values in JavaScript?）

2）从JSON获取数据并通过personId查找人员3）输出数据

像以前一样：

 $.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);
        }

 }

但是我在这里所描述的并不是真正好的灵魂 - 使用jQuery进行的DOM操作会花费很多。

P.S。

我建议你查看一些关于React和React-Router的教程，例如或者Vue.js，以及如何构建页面和页面转换的方式

相关问题
最新问题