如何从firebase实时数据库中检索数据并将其显示在html div中[已关闭]

问：

我创建了JS代码来从实时数据库中检索数据，但是我没有工作的功能或在<div class="viewnes11"></div>

我试过了什么 控制台.log（产品）;我没有得到任何输出。 alert（“hellow world”） 检查函数是否正常工作但注意到弹出窗口 输出 IM 得到什么都不是

    <div class="viewnes11">

</div>
<script>
        const BadgeMagnetsFolder = document.querySelector(".viewnes11");
    // getting the products
    class Products {
      async getProducts() {
        if (document.URL.includes("tech-index.html")) {
          try {
            let result = firebase.database().ref().child("News");
            let data = await result.once("value");
            let products = data.val();
            products = products.map((New) => {
              const { id } = New.sys;
              const image = New.fields.image.fields.file.url;
              return { title, price, id, image };
            });
            return products;
          } catch {
            console.log(error);
          }}}}
    
    
    class UI {
      displayProducts(products) {
        let result = ``;
        products.forEach((product) => {
          result += `
          <div class="blog-box row">
          <div class="col-md-4">
              <div class="post-media">
                  <a data-id="${product.id}" href="tech-single.html" title="">
                      <img src="${product.image}">
                      <div class="hovereffect"></div>
                  </a>
              </div><!-- end media -->
          </div><!-- end col -->
                `;
        });
        BadgeMagnetsFolder.innerHTML = result;
      }
    }
</script>