I have a script that renders some HTML content and looks like this.
renderJobs = async () => {
const jobs = await getJobs();
const view = `
${jobs.map(companyName => `
<div class="show">
<div class="company-details">
<p>${companyName.company}</p>
<object type="image/svg+xml" data="${companyName.logo}"></object>
<h3>${companyName.position}</h3>
<p class="details">${companyName.postedAt} - ${companyName.contract} - ${companyName.location}</p>
</div>
<div class="tags">
<p>${companyName.role}</p>
${companyName.languages.map(lang => `
<p>${lang}</p>
`).join('')}
<p>${companyName.tools}</p>
<p>${companyName.level}</p>
</div>
</div>
`).join('')}
`
return view }
Now, I'm trying to select all of the children on every div with the class tags. So I can later loop through them and render only the cards that have certain content.
Here is the snippet for that:
selector = () => {
const tagName = document.querySelectorAll('.tags').children;
console.log(tagName)}
But it returns undefined, I am not aware if using template literals the rules change for the DOM. I tried the event listener DOMContentLoaded but did not seem to work. Thank you
Full code:
getJobs = async() => {
try {
response = await fetch("https://raw.githubusercontent.com/ChrisPrzR/jobs-filtering-app/main/data.json");
const data = await response.json();
return data;
} catch (error) {
console.log('Error getting data', error)
}
}
renderJobs = async() => {
const jobs = await getJobs();
const view = `
${jobs.map(companyName => `
<div class="show">
<div class="company-details">
<p>${companyName.company}</p>
<object type="image/svg+xml" data="${companyName.logo}"></object>
<h3>${companyName.position}</h3>
<p class="details">${companyName.postedAt} - ${companyName.contract} - ${companyName.location}</p>
</div>
<div class="tags">
<p>${companyName.role}</p>
${companyName.languages.map(lang => `
<p>${lang}</p>
`).join('')}
<p>${companyName.tools}</p>
<p>${companyName.level}</p>
</div>
</div>
`).join('')}
`
return view
}
const main = async() => {
const companies = document.querySelector('.cards')
companies.innerHTML = await renderJobs()
}
main()
selector = () => {
const tagName = Array.from(document.querySelectorAll('.tags')).flatMap(el => el.children)
console.log(tagName)
}
selector()<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="cards"></div>
<script src="./app.js"></script>
</body>
</html>