Get id of tag using querySelector in Pug

Question

I'm new to stackoverflow. My question consists of kml, and pug. My kml file looks like this:

<Document>
<Placemark id="LIB02">
  <name>Agincourt</name>
  <description>Address: 155 Bonis Ave., Toronto, ON, M1T 3W6&lt;br/&gt;Link: https://www.torontopubliclibrary.ca/detail.jsp?R=LIB02</description>
  <address>155 Bonis Ave., Toronto, ON, M1T 3W6</address>
  <phoneNumber>416-396-8943</phoneNumber>
  <Point>
    <coordinates>-79.29342962962961,43.78516666666665</coordinates>
  </Point>
</Placemark>
</Document>

I need to access the id of the placemark using pug and pass it to my libraries javascript function. My pug file is as follows:

li
- var id = library.querySelector("Document.Placemark/{id}").; //THE ERROR LIES HERE
- var p = library.querySelector("name").textContent;
a(href=`/libraries/${p}`) #{p} 

How do I get the id of my Placemark?

Answer 1

If you've already assigned the placemarker to library, you can get its id with:

     library.id

Answer 2

How is used the pug?

1. render pug into static HTML via HtmlWebpackPlugin
2. load pug in JavaScript, like const tmpl = require('template.pug')
3. webpack.config.js
4. which pug loader is used
5. serverside render?

You should pass concrete data into pug. For example, if you load pug in JavaScript:

const tmpl = require('template.pug');

const name = library.querySelector("name").textContent;
const renderedHtml = tmpl({
  name,
  // ... pass other data
});

pug

li
  a(href=`/libraries/${name}`) #{name}

The renderedHtml contains the HTML string what can de inserted in DOM.