我怎样才能将数组对象从javascript添加到html div,我很抱歉问这个,但这对我和我的任务非常重要,我还在学习,我不知道怎么做,有人可以帮助我解决这个问题,我将从代码中学习。我需要从我的数组实现信息到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>
&#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;
答案 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,以及如何构建页面和页面转换的方式