append JSON array to div in HTML using JavaScript Javascript
• Assuming that we have a JSON array returned from a REST API, we can use forEach and appendChild to render an HTML template.
<!-- HTML 2 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Job list</title>
<link rel="stylesheet" href="./styles/style.css" />
<script>
<!-- HTML 1 -->
const jobs = [
{
pos: "Java Developer",
loc: "New York City",
typeCon: "Fulltime",
link: "https://flagtick.com/career/java-developer/",
},
{
pos: "React Developer",
loc: "Los Angeles City",
typeCon: "Fulltime",
link: "https://flagtick.com/career/react-developer/",
},
];
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- HTML 4 -->
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
font-family: poppins;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.display-none {
display: none !important;
}
.job {
display: flex;
flex-wrap: wrap;
}
.job-heading {
margin-left: 56px;
margin-top: 48px;
}
.job-heading > p.job-heading-title {
font-weight: 600;
font-size: 18px;
}
.job-heading > span {
font-weight: 600;
font-size: 32px;
}
.job-heading-desc {
font-weight: 400;
font-size: 16px;
}
.job-search {
border: 1px solid #91979E;
border-radius: 4px;
background: white;
height: 40px;
width: calc(100% - 56px);
margin-top: 4px;
margin-right: 56px;
padding: 2px 0px 2px 8px;
}
.job-location {
margin-top: 24px;
font-weight: 400;
font-size: 16px;
}
.job-select {
border: 1px solid #91979E;
padding: 2px 0px 2px 8px;
margin-top: 4px;
width: calc(100% - 56px);
border-radius: 4px;
height: 40px;
}
.job-filter {
float: left;
width: 30%;
margin-bottom: 35px;
}
.job-filter .job-filter-row {
display: -webkit-box;
display: -ms-flexbox;
display: block;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: auto;
}
.job-filter .job-filter-row .job-filter-col {
-ms-flex-preferred-size: 40%;
flex-basis: 40%;
}
.job-filter .job-filter-row .job-filter-col .btns {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.job-filter .job-filter-row .job-filter-col .btns #filter-btn {
width: 45%;
margin-right: 10px;
background-color: white;
text-decoration: none;
text-align: center;
font-weight: 600;
font-size: 16px;
line-height: 130%;
color: #005FA9;
border: 1px solid #005FA9;
padding: 10px;
-webkit-transition: all ease 0.2s;
transition: all ease 0.2s;
}
.job-filter .job-filter-row .job-filter-col .btns #filter-btn:hover {
/*background-color: rgba(248, 204, 20, 0.1);*/
}
.job-filter .job-filter-row .select-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.job-filter .job-filter-row .select-item h1 {
margin-right: 8px;
margin-bottom: 0 !important;
font-style: normal;
font-weight: 600;
font-size: 18px;
line-height: 27px;
color: #5e5c57;
}
.job-filter .job-filter-row .select-item .form-select {
width: 184px;
height: 30px;
font-weight: 400;
font-size: 14px;
line-height: 21px;
color: #5e5c57;
border: 1.2px solid #dddddd;
background: white;
}
.job-list {
float: right;
width: 70%;
height: 850px;
overflow-y: scroll;
}
.job-list .job-card {
width: 100%;
height: 100px;
margin: auto;
margin-bottom: 16px;
padding: 35px 50px;
background: #ffffff;
border: 0px solid #dddddd;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-decoration: none;
-webkit-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.job-list .job-card:hover {
-webkit-box-shadow: 0px 4px 8px rgba(87, 87, 87, 0.16);
box-shadow: 0px 4px 8px rgba(87, 87, 87, 0.16);
}
.job-list .job-card .job-pos {
-ms-flex-preferred-size: 40%;
flex-basis: 40%;
color: #5e5c57;
font-weight: 600;
font-size: 20px;
line-height: 30px;
}
.job-list .job-card .job-loc {
-ms-flex-preferred-size: 30%;
flex-basis: 30%;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #5e5c57;
}
.job-list .job-card .job-contract {
-ms-flex-preferred-size: 15%;
flex-basis: 15%;
font-weight: 400;
font-size: 16px;
line-height: 24px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
color: #5e5c57;
}
.job-list .job-card .apply-btn {
-ms-flex-preferred-size: 15%;
flex-basis: 15%;
}
.job-list .job-card .apply-btn {
text-decoration: none;
text-align: center;
font-weight: 600;
font-size: 16px;
line-height: 130%;
color: #005FA9;
border: 1px solid #005FA9;
padding: 10px;
-webkit-transition: all ease 0.2s;
transition: all ease 0.2s;
}
.job-list .job-card .apply-btn:hover {
background-color: rgba(0, 95, 169, 0.2);
}
@media only screen and (max-width: 767px) {
.job-filter {
padding: 20px 0;
position: sticky;
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
top: 0;
}
.job-filter .job-filter-row {
flex-direction: column;
gap: 20px 0;
width: auto;
}
.job-filter .job-filter-row .select-item h1 {
font-size: 12px;
line-height: 20px;
}
.job-filter .job-filter-row .select-item .form-select {
font-size: 12px;
line-height: 20px;
}
.job-list .job-card {
height: auto;
flex-direction: column;
padding: 20px;
}
.job-list .job-card .job-pos,
.job-list .job-card .job-loc,
.job-list .job-card .job-contract,
.job-list .job-card .apply-btn {
font-size: 12px;
line-height: 20px;
}
}
.job-list > .job-container:nth-of-type(1) {
margin-top: 52px;
}
.job-container {
padding: 40px 24px;
border: 1px solid #DEE1E5;
margin-top: 24px;
margin-right: 56px;
background: #e8e8e8;
border-radius: 8px;
}
.job-card-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.job-card-text {
font-weight: 400;
font-size: 28px;
color: #1B1C1E;
}
.job-card-icon {
font-size: 24px;
color: #005FA9;
font-size: 16px;
font-weight: 500;
}
.job-card-location {
margin-left: 2px;
color: #6D7176;
font-size: 16px;
font-weight: 400;
}
</style>
</head>
<body>
<div class="job">
<div class="job-filter">
<div class="job-filter-row">
<div class="job-heading">
<p class="job-heading-title">WE'RE HIRING!</p>
<span>Current job openings</span>
<p class="job-heading-desc">Search jobs by keyword:</p>
<input class="job-search" type="text" placeholder="e.g. engineer, danang"/>
<p class="job-location">Locations</p>
<select
class="form-select job-select form-select-pos"
aria-label="Default select example">
<option value="" selected>Select</option>
</select>
<p class="job-location">Departments</p>
<select
class="form-select job-select form-select-loc"
aria-label="Default select example">
<option value="" selected>Select</option>
</select>
<p class="job-location">Employment type</p>
<select
class="form-select job-select form-select-type"
aria-label="Default select example">
<option value="" selected>Select</option>
</select>
</div>
</div>
</div>
<div class="job-list">
<div class="job-container">
<div class="job-card-container">
<div class="job-card-text">Java Developer</div>
<div class="job-card-icon">Apply ></div>
</div>
<div style="height: 24px;"></div>
<div>
<span><svg width="12" height="12" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 1.25C6.54961 1.25 3.75 3.76992 3.75 6.875C3.75 11.875 10 18.75 10 18.75C10 18.75 16.25 11.875 16.25 6.875C16.25 3.76992 13.4504 1.25 10 1.25ZM10 10C9.50555 10 9.0222 9.85338 8.61107 9.57867C8.19995 9.30397 7.87952 8.91352 7.6903 8.45671C7.50108 7.99989 7.45157 7.49723 7.54804 7.01227C7.6445 6.52732 7.8826 6.08186 8.23223 5.73223C8.58186 5.3826 9.02732 5.1445 9.51227 5.04804C9.99723 4.95157 10.4999 5.00108 10.9567 5.1903C11.4135 5.37952 11.804 5.69995 12.0787 6.11107C12.3534 6.5222 12.5 7.00555 12.5 7.5C12.4993 8.16282 12.2357 8.79828 11.767 9.26697C11.2983 9.73565 10.6628 9.99928 10 10Z" fill="#6D7176"/>
</svg><span class="job-card-location">New York City</span></span>
<span><svg width="12" height="12" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 1.25C6.54961 1.25 3.75 3.76992 3.75 6.875C3.75 11.875 10 18.75 10 18.75C10 18.75 16.25 11.875 16.25 6.875C16.25 3.76992 13.4504 1.25 10 1.25ZM10 10C9.50555 10 9.0222 9.85338 8.61107 9.57867C8.19995 9.30397 7.87952 8.91352 7.6903 8.45671C7.50108 7.99989 7.45157 7.49723 7.54804 7.01227C7.6445 6.52732 7.8826 6.08186 8.23223 5.73223C8.58186 5.3826 9.02732 5.1445 9.51227 5.04804C9.99723 4.95157 10.4999 5.00108 10.9567 5.1903C11.4135 5.37952 11.804 5.69995 12.0787 6.11107C12.3534 6.5222 12.5 7.00555 12.5 7.5C12.4993 8.16282 12.2357 8.79828 11.767 9.26697C11.2983 9.73565 10.6628 9.99928 10 10Z" fill="#6D7176"/>
</svg><span class="job-card-location">Posted 7 Day Ago</span></span>
</div>
</div>
<div class="job-container">
<div class="job-card-container">
<div class="job-card-text">React Developer</div>
<div class="job-card-icon">Apply ></div>
</div>
<div style="height: 24px;"></div>
<div>
<span><svg width="12" height="12" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 1.25C6.54961 1.25 3.75 3.76992 3.75 6.875C3.75 11.875 10 18.75 10 18.75C10 18.75 16.25 11.875 16.25 6.875C16.25 3.76992 13.4504 1.25 10 1.25ZM10 10C9.50555 10 9.0222 9.85338 8.61107 9.57867C8.19995 9.30397 7.87952 8.91352 7.6903 8.45671C7.50108 7.99989 7.45157 7.49723 7.54804 7.01227C7.6445 6.52732 7.8826 6.08186 8.23223 5.73223C8.58186 5.3826 9.02732 5.1445 9.51227 5.04804C9.99723 4.95157 10.4999 5.00108 10.9567 5.1903C11.4135 5.37952 11.804 5.69995 12.0787 6.11107C12.3534 6.5222 12.5 7.00555 12.5 7.5C12.4993 8.16282 12.2357 8.79828 11.767 9.26697C11.2983 9.73565 10.6628 9.99928 10 10Z" fill="#6D7176"/>
</svg><span class="job-card-location">Los Angeles City</span></span>
<span><svg width="12" height="12" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 1.25C6.54961 1.25 3.75 3.76992 3.75 6.875C3.75 11.875 10 18.75 10 18.75C10 18.75 16.25 11.875 16.25 6.875C16.25 3.76992 13.4504 1.25 10 1.25ZM10 10C9.50555 10 9.0222 9.85338 8.61107 9.57867C8.19995 9.30397 7.87952 8.91352 7.6903 8.45671C7.50108 7.99989 7.45157 7.49723 7.54804 7.01227C7.6445 6.52732 7.8826 6.08186 8.23223 5.73223C8.58186 5.3826 9.02732 5.1445 9.51227 5.04804C9.99723 4.95157 10.4999 5.00108 10.9567 5.1903C11.4135 5.37952 11.804 5.69995 12.0787 6.11107C12.3534 6.5222 12.5 7.00555 12.5 7.5C12.4993 8.16282 12.2357 8.79828 11.767 9.26697C11.2983 9.73565 10.6628 9.99928 10 10Z" fill="#6D7176"/>
</svg><span class="job-card-location">Posted 7 Day Ago</span></span>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
<!-- HTML 3 -->
<script>
$(document).ready(function () {
// Create location options
$(".form-select-loc").append(
$("<option>", {
value: "New York City",
text: "New York City",
})
);
$(".form-select-loc").append(
$("<option>", {
value: "Los Angeles City",
text: "Los Angeles City",
})
);
// Create type of contract options
$(".form-select-type").append(
$("<option>", {
value: "Fulltime",
text: "Fulltime",
})
);
$(".form-select-type").append(
$("<option>", {
value: "Intern",
text: "Intern",
})
);
$(".form-select-type").append(
$("<option>", {
value: "Freelancer",
text: "Freelancer",
})
);
// Remove duplicate job name
let jobArr = [];
$.each(jobs, (i, job) => {
jobArr.push(job.pos);
});
let uniqueJobArr = [...new Set(jobArr)];
// Create position options
$.each(uniqueJobArr, (i, job) => {
$(".form-select-pos").append(
$("<option>", {
value: job,
text: job,
})
);
});
// PRACTICE TO DO
});
// filter function
$(document).ready(function () {
const posSelect = document.querySelector(".form-select-pos");
const locSelect = document.querySelector(".form-select-loc");
const conSelect = document.querySelector(".form-select-type");
const jobCard = document.querySelectorAll(".job-card");
const filterBtn = document.querySelector("#filter-btn");
function removeAllDisplayNone() {
jobCard.forEach((card) => {
card.classList.remove("display-none");
});
}
function updateFilter() {
removeAllDisplayNone();
if (posSelect.value !== "") {
jobCard.forEach((card) => {
if (
card.children[0].textContent !== posSelect.value &&
!card.classList.contains("display-none")
) {
card.classList.add("display-none");
}
});
}
if (locSelect.value !== "") {
jobCard.forEach((card) => {
if (
card.children[1].textContent !== locSelect.value &&
!card.classList.contains("display-none")
) {
card.classList.add("display-none");
}
});
}
if (conSelect.value !== "") {
jobCard.forEach((card) => {
if (
card.children[2].textContent !== conSelect.value &&
!card.classList.contains("display-none")
) {
card.classList.add("display-none");
}
});
}
}
posSelect.addEventListener("change", () => {
updateFilter();
});
locSelect.addEventListener("change", () => {
updateFilter();
});
conSelect.addEventListener("change", () => {
updateFilter();
});
});
</script>
</body>
</html>
Note: PRACTICE TO DO
• Uncomment `// PRACTICE TO DO` to write code implementation for generate HTML template. Hence, you can proceed to apply two ways:
(*) Using Javascript:
const jobList = document.getElementById("job-list");
jobs.forEach((item) => {
const jobContainer = document.createElement("div");
jobContainer.classList.add("job-container");
const jobCardContainer = document.createElement("div");
jobCardContainer.classList.add("job-card-container");
jobContainer.appendChild(jobCardContainer);
const jobCardText = document.createElement("div");
jobCardText.classList.add("job-card-text");
jobCardText.textContent = item.pos;
jobCardContainer.appendChild(jobCardText);
const jobCardIcon = document.createElement("div");
jobCardIcon.classList.add("job-card-icon");
jobCardIcon.textContent = "Apply >";
jobCardContainer.appendChild(jobCardIcon);
const emptyDiv = document.createElement("div");
emptyDiv.setAttribute("style", "height: 24px;");
jobContainer.appendChild(emptyDiv);
const locationSpan1 = document.createElement("span");
const locationSvg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
locationSvg1.setAttribute("width", "12");
locationSvg1.setAttribute("height", "12");
locationSvg1.setAttribute("viewBox", "0 0 20 20");
const locationPath1 = document.createElementNS("http://www.w3.org/2000/svg", "path");
locationPath1.setAttribute("d", "M10 1.25C6.54961 1.25 3.75 3.76992 3.75 6.875C3.75 11.875 10 18.75 10 18.75C10 18.75 16.25 11.875 16.25 6.875C16.25 3.76992 13.4504 1.25 10 1.25ZM10 10C9.50555 10 9.0222 9.85338 8.61107 9.57867C8.19995 9.30397 7.87952 8.91352 7.6903 8.45671C7.50108 7.99989 7.45157 7.49723 7.54804 7.01227C7.6445 6.52732 7.8826 6.08186 8.23223 5.73223C8.58186 5.3826 9.02732 5.1445 9.51227 5.04804C9.99723 4.95157 10.4999 5.00108 10.9567 5.1903C11.4135 5.37952 11.804 5.69995 12.0787 6.11107C12.3534 6.5222 12.5 7.00555 12.5 7.5C12.4993 8.16282 12.2357 8.79828 11.767 9.26697C11.2983 9.73565 10.6628 9.99928 10 10Z");
locationPath1.setAttribute("fill", "#6D7176");
locationSvg1.appendChild(locationPath1);
locationSpan1.appendChild(locationSvg1);
const locationSpanText1 = document.createElement("span");
locationSpanText1.classList.add("job-card-location");
locationSpanText1.textContent = item.loc + ' ';
locationSpan1.appendChild(locationSpanText1);
jobContainer.appendChild(locationSpan1);
const locationSpan2 = document.createElement("span");
const locationSvg2 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
locationSvg2.setAttribute("width", "12");
locationSvg2.setAttribute("height", "12");
locationSvg2.setAttribute("viewBox", "0 0 20 20");
const locationPath2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
locationPath2.setAttribute("d", "M10 1.25C6.54961 1.25 3.75 3.76992 3.75 6.875C3.75 11.875 10 18.75 10 18.75C10 18.75 16.25 11.875 16.25 6.875C16.25 3.76992 13.4504 1.25 10 1.25ZM10 10C9.50555 10 9.0222 9.85338 8.61107 9.57867C8.19995 9.30397 7.87952 8.91352 7.6903 8.45671C7.50108 7.99989 7.45157 7.49723 7.54804 7.01227C7.6445 6.52732 7.8826 6.08186 8.23223 5.73223C8.58186 5.3826 9.02732 5.1445 9.51227 5.04804C9.99723 4.95157 10.4999 5.00108 10.9567 5.1903C11.4135 5.37952 11.804 5.69995 12.0787 6.11107C12.3534 6.5222 12.5 7.00555 12.5 7.5C12.4993 8.16282 12.2357 8.79828 11.767 9.26697C11.2983 9.73565 10.6628 9.99928 10 10Z");
locationPath2.setAttribute("fill", "#6D7176");
locationSvg2.appendChild(locationPath2);
locationSpan2.appendChild(locationSvg2);
const locationSpanText2 = document.createElement("span");
locationSpanText2.classList.add("job-card-location");
locationSpanText2.textContent = "Posted 7 Day Ago";
locationSpan2.appendChild(locationSpanText2);
jobContainer.appendChild(locationSpan2);
jobList.appendChild(jobContainer);
});
(*) Using Jquery:
$(document).ready(function() {
const jobContainer = $('<div>').addClass('job-container');
const jobCardContainer = $('<div>').addClass('job-card-container');
const jobCardText = $('<div>').addClass('job-card-text').text(item.pos);
const jobCardIcon = $('<div>').addClass('job-card-icon').text('Apply >');
jobCardContainer.append(jobCardText, jobCardIcon);
const div = $('<div>').css('height', '24px');
const location1 = $('<span>').addClass('job-card-location').text(item.loc);
const location2 = $('<span>').addClass('job-card-location').text('Posted 7 Day Ago');
const svg = $('<svg>').attr({
width: '12',
height: '12',
viewBox: '0 0 20 20',
fill: 'none',
xmlns: 'http://www.w3.org/2000/svg',
});
const path = $('<path>').attr('d', 'M10').attr('fill', '#6D7176');
svg.append(path);
const span1 = $('<span>').append(svg, location1);
const span2 = $('<span>').append(svg.clone(), location2);
const locationDiv = $('<div>').append(span1, span2);
jobContainer.append(jobCardContainer, div, locationDiv);
$('.job-list').append(jobContainer);
});
Notice: You can change .job-card into .job-container to work with filter event.
24