0

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>
Barmar
  • 741,623
  • 53
  • 500
  • 612
Christian Perez
  • 91
  • 1
  • 6
  • You don't need a template literal around `jobs.map(...).join("")` since `join()` returns a string. – Barmar Dec 01 '20 at 00:48
  • 1
    `querySelectorAll()` returns a list of nodes, you need to loop over them to get all the children. – Barmar Dec 01 '20 at 00:49
  • The template literal has nothing to do with the problem. – Barmar Dec 01 '20 at 00:50
  • 1
    `Array.from(document.querySelectorAll('.tags')).flatMap(tag => tag.children)` – Barmar Dec 01 '20 at 00:51
  • Wouldn't querySelectorAll give me the children of every node? I tried the .length property to see if it was even returning anything but gave me a good ol' 0 – Christian Perez Dec 01 '20 at 00:56
  • 1
    No, `QuerySelectorAll()` returns a list of nodes. Each node has a `children` property, but the list itself doesn't. JavaScript doesn't automatically map properties to all the list elements. – Barmar Dec 01 '20 at 00:58
  • @Barmar Why is the __length__ property returning 0? – Christian Perez Dec 01 '20 at 01:09
  • Are you calling `selector()` after `await renderJobs()`? – Barmar Dec 01 '20 at 01:15
  • Please post a [mcve]. You can use a [Stack Snippet](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) to make it executable. – Barmar Dec 01 '20 at 01:15
  • https://jsfiddle.net/vrnkeLsy/ Thanks for your help. Here's the snippet – Christian Perez Dec 01 '20 at 17:46
  • 1
    `main` is an asynchronous function, but you don't `await` it. So it returns before the function has completed, and then you call `selector()` before the DOM has been updated. – Barmar Dec 01 '20 at 19:02

0 Answers0