html - 填充网格&带有 JSON 数据文件
带有 JSON 数据文件
问题描述
之前在将 JSON 数据导入表格时收到了帮助,但这次我们需要响应式和灵活的布局,并且使用网格、div、p 和 CSS 样式方法。
我们正在显示最新成员的缩略图“卡片”以加入/更新我们组的会员资格 - 卡片的数量可以在 2-6 之间变化,一次显示并且可以经常更改
当用户访问网页时,我们希望 JSON 数据使用缩略图卡填充灵活的响应式网格。
卡片数据来自格式正确的 JSON 文件,该文件由 3rd 方应用程序创建并上传到网站。
需要使用的数据是:
- 类型
- 年
- 会员页面网址
- 会员图片网址
- 成员名字
- 会员组
- 会员公司
- 会员分类
- 理想情况下,我们希望在脚本中生成,或者可以为每个成员图像导入 alt 文本和标题文本(不是必需的,但会是一个奖励)
<style type="text/css" media="all">
.newmembers {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(155px,175px));
grid-auto-rows: 370px;
grid-auto-flow: dense;
justify-content: center;
padding: 10px 10px 10px;
background-color: #c7c7c7;
}
.member {
background: rgba(255, 213, 70, 0.3);
border: 1px solid grey;
text-align: center;
border-radius: 4px;
box-shadow: 3px 3px 3px grey;
}
.type {
color: #1f7665;
font-weight: 900;
text-transform: uppercase;
margin: 5px 5px 0px;
text-align: center;
}
.year {
color: #1f7665;
font-weight: bold;
font-size: x-small;
margin: 0px 0px 0px;
text-align: center;
}
.thumb {
width: 85%;
min-height: 160px;
max-height: 160px;
min-width: 160x;
max-width: 160px;
object-position: center top;
-o-object-fit: cover;
object-fit: cover;
overflow: hidden;
border: 5px solid #fff;
border-radius: 4px;
box-shadow: 5px 5px 5px grey;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.thumb:hover {
position:relative;
top:5px;
left:5px;
background:#00CCCC;
-webkit-filter: grayscale(10%);
filter: grayscale(10%);
}
.membername {
color: #1f7665;
font-weight: 900;
text-transform: uppercase;
margin: 10px 0px 0px;
}
.group {
color: #333333;
font-weight: bold;
margin: 0px 0px 5px;
}
.company {
color: #333333;
font-weight: normal;
margin: 0px 0px 5px;
}
.classification {
color: #333333;
font-weight: bold;
margin: 0px 0px 10px;
font-size: x-small;
}
.info {
margin: 10px;
}
</style>
<div class="newmembers">
<!-- We want to populate a div like this 3,4,5 or 6 times with data from the correctly formated JSON file -->
<div class="member">
<p class="type">* RENEWING *</p>
<p class="year">Year: THREE</p>
<a class="memurl" href="https://example.com/brownsville.html#59e5c8">
<img class="thumb"
alt="MEMBER PROFILE: Andy Smith - Smithville, Andys Lawns, Gardening"
title="MEMBER PROFILE:
Andy Smith
Smithvile
Andys Laws
Gardening"
src="https://example.com/brownsville.html/u/#59e5c8.jpg"
>
</a>
<p class="info">
<p class="membername">Andy Smith</p>
<p class="group">Smithville</p>
<p class="company">Andys Lawns</p>
<p class="classification">Gardening</p>
</p>
</div>
<!-- We want to populate a div like this 3,4,5 or 6 times with data from the correctly formated JSON file -->
<div class="member">
<p class="type">* RENEWING *</p>
<p class="year">Year: FOUR</p>
<a class="memurl" href="https://example.com/brownsville.html#5a2f86">
<img class="thumb"
alt="MEMBER PROFILE: Dave Brown - Brownville, Daves Paint, Paint"
title="MEMBER PROFILE:
Dave Brown
Brownville
Daves Paint
Paint"
src="https://example.com/u/5a2f86.jpg"
>
</a>
<p class="info">
<p class="membername">Dave Brown</p>
<p class="group">Brownsville</p>
<p class="company">Daves Paint</p>
<p class="classification">Paint</p>
</p>
</div>
<!-- more "member" divs here -->
</div>
我们的 JSON 文件将如下所示,但可以更改为所需的任何内容:
[
{ "type":"* RENEWING *", "year":"THREE", "memurl":"https://example.com/smithville.html#5a2f81", "memimgsrc":"https://example.com/smithville.html/u/#59e5c8.jpg", "membername":"Andy Smith","group":"Smithville","company":"Andys Lawn","classification":"Gardening" },
{ "type":"* RENEWING *", "year":"FOUR", "memurl":"https://example.com/brownsville.html#5a2f86", "memimgsrc":"https://example.com/brownsville.html/u/#5a2f86.jpg", "membername":"Dave Brown","group":"Brownsville","company":"Daves Paint","classification":"Paint" },
{ "type":"* NEW *", "year":"ONE", "memurl":"https://example.com/applegate.html#5b3a51", "memimgsrc":"https://example.com/applegate.html/u/#5b3a51.jpg", "membername":"May Apple","group":"Applegate","company":"Marys Conserves","classification":"Canning" }
];
我们已经使用以下脚本将数据导入到表中,但我们如何才能使其与上述示例一起使用?
<!-- We have used this load to populate a table from JSON and it works perfect -->
<script>
//first add an event listener for page load
document.addEventListener( "DOMContentLoaded", get_json_data, false ); // get_json_data is the function name that will fire on page load
//this function is in the event listener and will execute on page load
function get_json_data(){
// Relative URL of external json file
var json_url = 'example.json';
//Build the XMLHttpRequest (aka AJAX Request)
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {//when a good response is given do this
var data = JSON.parse(this.responseText); // convert the response to a json object
append_json(data);// pass the json object to the append_json function
}
}
//set the request destination and type
xmlhttp.open("POST", json_url, true);
//set required headers for the request
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// send the request
xmlhttp.send(); // when the request completes it will execute the code in onreadystatechange section
}
// FUNCTION TO ADD OR CREATE "member" DIVS NEEDS TO HERE
//need function to add json data to the div 'newmembers' and make new div?
// No idea
function append_json(data){
var member = document.getElementById('newmembers');
data.forEach(function(object) {
NOT SURE WHAT TO PUT HERE
});
}
</script>
帮助会很棒,如果需要额外信息或澄清,请告诉我。
解决方案
你很接近了,你可以使用你的硬编码作为模板。
我们将模板保留为 HTML,您真的要更改 javascript 以更改布局吗?
我已经删除了 ajax 逻辑,因为你应该没问题。
我还为你留下了一些关于alt
andtitle
属性的工作,但你应该有足够的工作来处理。
var postData = [{
"type": "* RENEWING *",
"year": "THREE",
"memurl": "https://example.com/smithville.html#5a2f81",
"memimgsrc": "https://example.com/smithville.html/u/#59e5c8.jpg",
"membername": "Andy Smith",
"group": "Smithville",
"company": "Andys Lawn",
"classification": "Gardening"
},
{
"type": "* RENEWING *",
"year": "FOUR",
"memurl": "https://example.com/brownsville.html#5a2f86",
"memimgsrc": "https://example.com/brownsville.html/u/#5a2f86.jpg",
"membername": "Dave Brown",
"group": "Brownsville",
"company": "Daves Paint",
"classification": "Paint"
},
{
"type": "* NEW *",
"year": "ONE",
"memurl": "https://example.com/applegate.html#5b3a51",
"memimgsrc": "https://example.com/applegate.html/u/#5b3a51.jpg",
"membername": "May Apple",
"group": "Applegate",
"company": "Marys Conserves",
"classification": "Canning"
}
];
function append_json(data) {
//Set Up the template
var s = $("#postTemplate")[0].innerHTML.trim();
var holder = document.createElement('div');
holder.innerHTML = s;
var template = holder.childNodes;
var member = document.getElementById('newmembers');
data.forEach(function(object) {
//Clone Template
var newItem = $(template).clone();
//Populate it
$(newItem).find(".type").html(object.type);
$(newItem).find(".year").html($(newItem).find(".year").html() + " " + object.year);
$(newItem).find(".memurl").attr("href", object.memurl);
var img = $(newItem).find(".thumb")
$(img).attr("src", object.memimgsrc).attr("alt", $(img).attr("alt") + object.membername + " " + "etc")
.attr("title", $(img).attr("title") + object.membername + " finish this off");
$(newItem).find(".membername").html(object.membername);
$(newItem).find(".group").html(object.group);
$(newItem).find(".company").html(object.company);
$(newItem).find(".classification").html(object.classification);
//Append it
$(".newmembers").append(newItem);
});
}
$("document").ready(function() {
append_json(postData);
});
.newmembers {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(155px, 175px));
grid-auto-rows: 370px;
grid-auto-flow: dense;
justify-content: center;
padding: 10px 10px 10px;
background-color: #c7c7c7;
}
.member {
background: rgba(255, 213, 70, 0.3);
border: 1px solid grey;
text-align: center;
border-radius: 4px;
box-shadow: 3px 3px 3px grey;
}
.type {
color: #1f7665;
font-weight: 900;
text-transform: uppercase;
margin: 5px 5px 0px;
text-align: center;
}
.year {
color: #1f7665;
font-weight: bold;
font-size: x-small;
margin: 0px 0px 0px;
text-align: center;
}
.thumb {
width: 85%;
min-height: 160px;
max-height: 160px;
min-width: 160x;
max-width: 160px;
object-position: center top;
-o-object-fit: cover;
object-fit: cover;
overflow: hidden;
border: 5px solid #fff;
border-radius: 4px;
box-shadow: 5px 5px 5px grey;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.thumb:hover {
position: relative;
top: 5px;
left: 5px;
background: #00CCCC;
-webkit-filter: grayscale(10%);
filter: grayscale(10%);
}
.membername {
color: #1f7665;
font-weight: 900;
text-transform: uppercase;
margin: 10px 0px 0px;
}
.group {
color: #333333;
font-weight: bold;
margin: 0px 0px 5px;
}
.company {
color: #333333;
font-weight: normal;
margin: 0px 0px 5px;
}
.classification {
color: #333333;
font-weight: bold;
margin: 0px 0px 10px;
font-size: x-small;
}
.info {
margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="newmembers">
<!-- Template for our posts -->
<script type="text/template" id="postTemplate">
<div class="member">
<p class="type"></p>
<p class="year">Year:</p>
<a class="memurl" href="">
<img class="thumb" alt="MEMBER PROFILE: " title="MEMBER PROFILE: " src="">
</a>
<!-- Replaced p with div, can't nest p tags -->
<div class="info">
<p class="membername"></p>
<p class="group"></p>
<p class="company"></p>
<p class="classification"></p>
</div>
</div>
</script>
</div>
推荐阅读
- laravel-5 - 如何实现这条路线?
- python - 启动 mu-editor 时有关 PyQt5/QtCore.so 的 ImportError
- c# - 如何从 html 发送请求查询字符串?
- python - pip 升级:“python -m pip install --upgrade”说已经是最新的(18.0),“pip --version”说(10.0.1)
- macos - Maven:无法解析以下工件。在我的 Mac 上将朋友的 .m2 文件夹放在哪里?
- html - 无法将“小”标签与“标签”标签内联
- php - PHP 和正则表达式:如何使用 unicode 单词(包括带有 ' 的缩写)拆分字符串?
- c++ - 物理向量构造函数,幅度和单位向量函数不起作用c ++
- python - Python shell 下的 Wiringpi
- php - 如何在子functions.php中覆盖父functions.php