Cannot read property 'urlslist' of null

Here "user" is a collection of usernames, email, password, and an array of id. These ids belong to a collection "urllist".when I am doing console.log(resp.urlslist) it is giving an array of objects. but when passing the same result using res.render("finalsite",{linklist:resp.urlslist}) then urlslist is null error is occurring:

app.get("/finalsite/:use", function (req, res) {    
  user.findOne({username:req.params.use})    
    .populate("urlslist")      
    .exec()    
    .then((resp) => {     
      console.log(resp.urlslist);
      res.render("finalsite",{ linklist:resp.urlslist });

  })    
  .catch((err) => {
    console.log(err);});
  });

show product base on browser url

I want to show product dynamic base on browser link.
For example if
http://www.example.com?product=[data.productList.id] then show data.productList.text

expected results:
if http://www.example.com?product=62276197-6059-4c21-9b40-c5b1d277e85d then show Product 001
i have tried many method, i hope someone would help me thank you very much

my js is below :

const browserId = data.productList.id

if (window.location.href.contains('?product=' + browserId) > -1) {
    $('.test').append(productItemName(data.productList.id))
}
function productItemName(productName) {
    return data.productList.filter(product => product.id === productName)?.[0]?.id;
}

my data js is below:

var data = {
    productList: [
    {
        id: "62276197-6059-4c21-9b40-c5b1d277e85d",
        link: "javascript:void(0)",
        imgurl: "/img/upload/png/joyacart_000001_12032019.png",
        text: 'Product 001',
        price: '368.00',
        hitRate: '45472',
        goldMedal: false,
        newItem: true,
        newShop: true,
        freeDelivery: true,
        ShopId: '5cfb048c-86e8-4d2d-85bf-e4e9e1effdcb'
        },
        {
        id: "4a074028-d72a-4954-a159-f41adeb5cc5b",
        link: "javascript:void(0)",
        imgurl: "/img/upload/png/joyacart_000002_12032019.png",
        text: 'Product 002',
        price: '99.00',
        hitRate: '25241',
        goldMedal: true,
        newItem: false,
        newShop: true,
        freeDelivery: true,
        ShopId: '10eb4250-47d6-41ad-a429-f65e05836f26'
        }]
}

html is below:

<div class="test"></div>

Preloader. HTML, CSS, jQuery

I put a preloader on the main page of my site. It worked. but if I go to another page of the site and go back to the main page again, the preloader is working.

Is it possible to avoid it? The preloader should only work when accessing the site.

jQuery Code

        function counter() {
            var count = setInterval(function() {
                var c = parseInt($('.counter').text());
                $('.counter').text((++c).toString());
                if (c == 100) {
                    clearInterval(count);
                    $('.counter').addClass('hide')
                    $('.preloader').addClass('active')
                }
            },40)
        }
        counter()

CSS code

.preloader {
    position: fixed;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background: #e7e8ff;
    z-index: 100000000;
}
.preloader:before {
    content: 'Loading';
    position: absolute;
    font-size: 70px;
    font-weight: 900;
    text-transform: uppercase;
    color: rgba(184, 185, 211, 0.3);
}
.preloader:after {
    top: 90%;
    text-align: center;
    content: 'by CodeSphere';
    position: absolute;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 4px;
    color: #333;
}
.preloader.active {
    transform: translateY(-100vh);
    transition: ease-in-out 2s;
    transition-delay: 1s;
}
.counter {
    position: relative;
    color: #232530;
    font-size: 120px;
    font-weight: 700;
    z-index: 1;
}
.counter:after {
    content: '%';
    font-size: 0.5em;
}
.hide {
    opacity: 0;
    transition: 1s;
    pointer-events: none;
}

HTML code

<div class="preloader">
        <div class="counter">0</div>
</div>

NETBEANS (CORDOVA) C:\Users\fgnye\Goop\nbproject\build.xml:275: exec returned: 1 BUILD FAILED (total time: 1 minute 23 seconds)

enter image description here

So...I have installed all the necessary tools I need. But for some reason, I came across this error. Can anyone help, please? Thanks in advance.

This is what shows up... C:\Users\fgnye\Goop\nbproject\build.xml:275: exec returned: 1 BUILD FAILED (total time: 1 minute 30 seconds)

How can I use C# to save a webpage as a text file

i want this page http://www.tsetmc.com/Loader.aspx?ParTree=151311&i=40611478183231802 save to string in c# i try webbrowser but webbrowser cant show page

how to read another javascript JSON categories

I have no idea how to make this,

I have a loop for product List Item, but i really don't know how to link the shop item to shop name. I have tried many method but i really don't know how to link the item to the shop.
if productList.ShopId = shopList.id then use this shopList.title
SHOP NAME = shopList.title

const getProductList = function (productItem) {
    const productListRender = 
    $('<div>').append($('<span>', {
        html: shopName() <<<< SHOP NAME
    }));

    $.each(data.shopList), function shopName() {
        this.text(shopList.title);
    };
        
    return productListRender;
}
const $product = $('#List')
$.each(data.productList, function (index, data) {
    $product.append(getProductList(data));
});

Data JS is Below:

var data = {
    productList: [
        {
            id: "62276197-6059-4c21-9b40-c5b1d277e85d",
            link: "javascript:void(0)",
            imgurl: "/img/upload/png/joyacart_000001_12032019.png",
            text: 'Product 001',
            goldMedal: false,
            newItem: true,
            newShop: true,
            freeDelivery: true,
            ShopId: '5cfb048c-86e8-4d2d-85bf-e4e9e1effdcb'
        },
        {
            id: "59de8216-052d-4e51-9f7d-7e96642ded62",
            link: "javascript:void(0)",
            imgurl: "/img/upload/png/joyacart_000002_12032019.png",
            text: 'Product 002',
            goldMedal: true,
            newItem: false,
            newShop: true,
            freeDelivery: true,
            ShopId: '10eb4250-47d6-41ad-a429-f65e05836f26'
        },
        {
            id: "59de8216-052d-4e51-9f7d-7e96642ded62",
            link: "javascript:void(0)",
            imgurl: "/img/upload/png/joyacart_000003_12032019.png",
            text: 'Product 003',
            goldMedal: true,
            newItem: false,
            newShop: true,
            freeDelivery: true,
            ShopId: '10eb4250-47d6-41ad-a429-f65e05836f26'
        }],

    shopList: [{
        id: '5cfb048c-86e8-4d2d-85bf-e4e9e1effdcb',
        title: 'Shop 001'
    },
    {
        id: '10eb4250-47d6-41ad-a429-f65e05836f26',
        title: 'Test Shop'
    }]
}

How can I select elements in shadow dom through the parent element based on the click event on addEventListener?

I have a web component, like this:

File: download-bar.js (web component)

class DownloadBar extends HTMLElement {

    constructor() {
        super();
        this.shadowDOM = this.attachShadow({mode: 'open'});        
    }

    connectedCallback() {
        this.render();
    }

    render() {
        this.shadowDOM.innerHTML = `
            <div class="favicon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="18px" height="18px"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>
                <span>Download File</span>
            </div>
            <div class="dropdown">
                <a href="" id="xlsx">XLSX</a>
                <a href="" id="pdf">PDF</a>
                <a href="" id="jpeg">JPEG</a>
            </div>
        `;
    }
}

customElements.define('download-bar', DownloadBar);

and I do a selection of elements on the parent shadow element DOM and listen to the click event, like this:

File: download-bar.js

import '../component/download-bar.js';

const downloadElement = document.querySelector('download-bar');

downloadElement.addEventListener('click', (e) => {

    // I would like this:
    if (e.target.classList.contains('favicon')) {
        console.log('True')
    }
})

how can I get child elements from custom elements using shadow dom, if an event from "(e)" that is obtained has a certain class or id, for example class = "favicon"?