window.location 结果为空答案

【问题标题】：window.location result is nullwindow.location 结果为空
【发布时间】：2019-02-09 17:44:34
【问题描述】：

我想建立一个从数据库返回产品的网站，当点击查看更多时，应该在另一个 html 页面中从服务器返回产品详细信息。问题是当我点击查看更多时，productID%20=%20null :(.
productDetails = 第二个 html 页面。 productDetails = div - 从服务器返回产品的 index.html 中

<script>
var productsUrlList = 'https://finalonlineshop.firebaseio.com/.json';
async function getProductsFromServer() {
    var productsResponse = await fetch(productsUrlList)
    var products = await productsResponse.json();
    return products;
}

async function showProducts(productsPromise) {
    var products = await productsPromise;
    var generatedHTML = '';
    var productsIDs = Object.keys(products);
    productsIDs.forEach(productID => {
        var product = products[productID];
        generatedHTML += getGeneratedHTMLForProduct(productID, product);
    });
    document.getElementById('categories').innerHTML = generatedHTML;
}

function getGeneratedHTMLForProduct(productID, product) {
    var generatedHTML = `
        <div id = categoriesDiv>
            <img class = "categoryImage" src = ${product.Image} />
            <div class = "categoryName">${product.Name}</div>
            <div class = "categoryPrice">$ ${product.Price}</div>
            <br>
            <button id = "seeMore" onclick = "seeMore('${productID}')">See 
    more</button>
        </div>
    `;
    return generatedHTML;
}

function seeMore (productID) {
    window.location = `./productDetails.html?productID = ${productID}`;//issue
}
function getProductIDFromUrl () {
var params = new URLSearchParams(window.location.search);
var productID = params.get('productID');
return productID;
}

async function getDetailsFromServer(productID) {
var detailsResponse = await fetch(`https://finalonlineshop.firebaseio.com/Products/details/${productID}.json`);
var details = await detailsResponse.json();
return details;
}

async function seeDetails(detailsPromise) {
var details = await detailsPromise;
var generatedHTML = `
    <div id = "detailsAboutProduct">
        <img src = "${details.Image}" /> //Cannot read property "Image" of null
        <div>${details.Name}</div>
        <div>${details.Details}</div>
        <div>$ ${details.Price}</div>
        <div>${details.Qty}</div>
        <button id = "addToCart" onclick = "addToCart();">Add to 
    cart</button>
    </div>
`;
document.getElementById('details').innerHTML = generatedHTML;
}

</script>

【问题讨论】：

console.log(productIDs) 在showProducts 中显示什么？
不是对象，因为我现在正在调试。抱歉回答太低了
Object.keys() 应该总是返回一个数组。数组中有空值吗？
productsIDs:(9) ["Apple", "Beats", "Dell", "HP", "Huawei", "Iphone", "PlayStation IV", "Samsung", "Smart TV "]
问题出在异步函数 getDetailsFromServer() .....我在调试时得到“details = null”

标签： javascript firebase dom firebase-realtime-database

【解决方案1】：

去掉 URL 中 = 周围的空格，将其编码为 %20。您还应该使用 encodeURIComponent() 转义产品 ID 中的任何特殊字符。

function seeMore (productID) {
    window.location = `./productDetails.html?productID=${encodeURIComponent(productID)}`;
}

【讨论】：

好的，不再是 null（感谢提示），但我认为仍然存在错误。请看vimeo.com/user28681679/review/288206213/40a212f9cf
我通过了。现在我得到 productID=Apple，但它不返回生成的 HTML，并且在调试时，我得到“无法读取 null 的属性“图像”” - 请参阅上面添加的代码行。

【解决方案2】：

您对 Firebase 应用的查询似乎有误。

您正在获取：https://finalonlineshop.firebaseio.com/Products/details/${productID}.json 返回null

但您必须获取：https://finalonlineshop.firebaseio.com/${productID}.json 相反，它将返回正确的对象

【讨论】：