Question

我有一个示例JSON，如下所示：

[
    {
        "componentid": 4,
        "displayImageUrl": "https://via.placeholder.com/350x200",
        "title": "theme",
        "shortdesc": "to set theme for different applications"
    },
    {
        "componentid": 7,
        "displayImageUrl": "https://via.placeholder.com/350x200",
        "title": "preferences",
        "shortdesc": "preferences screen for apps"
    }
]

我准备了基于该数据的HTML内容。代码如下：

function prepareTopComponentList(data) {

    var preparedHtml = "";

    for (var count = 0; count < data.length; count++) {
        preparedHtml += "<div class=\"col-lg-4\" style=\"margin-top: 20px\">\n" +
            "                <div class=\"card wow fadeIn\" data-wow-delay=\"0.2s\">\n" +
            "                    <img class=\"img-fluid\" src=\"";
        preparedHtml += data[0].displayImageUrl;
        preparedHtml += "\" alt=\"N/A\">\n" +
            "                    <div class=\"card-body\">\n" +
            "                        <h4 class=\"card-title\">";
        preparedHtml += data[0].title;
        preparedHtml += "</h4>\n" +
            "                        <p class=\"card-text\">";
        preparedHtml += data[0].shortdesc;
        preparedHtml += "</p>\n" +
            "                        <a onclick = \"redirect(this, this);\" href='#' class=\"btn btn-info\" id=\"";
        preparedHtml += "component_desc_" + data[count].componentid;

        /*I replaced 0 with count so that we can get proper ids*/
        //console.log(data[0].componentid);

        preparedHtml += "\">Learn more</a>\n" +
            "                    </div>\n" +
            "\n" +
            "                </div>\n" +
            "            </div>";
    }

    $("#div_top_component").append(preparedHtml);

}

现在，我正在重定向到基于componentid值的页面。重定向功能代码如下：

function redirect(element, data) {  
    // data = prepareTopComponentList(data);
    for (var count = 0; count < data.length; count++) {
        var url = "inside.dell.com";
        var query = data[count].componentid;
        var finalUrl = "inside.dell.com/componentid=" + query;
        console.log(finalUrl);
    }
    window.location = "inside.dell.com/componentid=" + query;
}

当我运行此代码时，我收到此错误：

The requested URL /Reusable Components/pages/inside.dell.com/componentid=undefined was not found on this server.

那个错误很好，我没有任何问题。但是，在重定向URL中，组件标识为undefined。如何确保将组件ID的值传递给URL？

Answer 1

用于query的变量windows.location在for循环块中定义，因此在其外部未定义。

Answer 2

在您的HTML中

"<a onclick = \"redirect(" + data[count].componentid + ");\" href='#' class=\"btn btn-info\" id=\"";

然后你的功能

function redirect(id) {  
    window.location = "inside.dell.com/componentid=" + id;
}

Answer 3

在for循环之外声明您的query变量。

function redirect(element, data) {  
// data = prepareTopComponentList(data);
var query;
for (var count = 0; count < data.length; count++) {
    var url = "inside.dell.com";
    query = data[count].componentid;
    var finalUrl = "inside.dell.com/componentid=" + query;
    console.log(finalUrl);
}
window.location = "inside.dell.com/componentid=" + query;
}

将id从json传递到URL时，未定义的值将被传递

3 个答案: