javascript - 将 id 从 json 传递到 URL 时，传递了未定义的值

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 中，组件 id 为 未定义。如何确保组件 ID 的值传递到 URL？

Answer 1

在 HTML 中

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

然后是你的函数

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