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

我有一个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"
    }
]  

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);

}  

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;
}  

我根据这些数据准备了一个HTML内容。代码如下：

[
    {
        "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"
    }
]  

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);

}  

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

用于

窗口的变量
query
。位置
在
for
循环块中定义，因此在循环块外部未定义。
用于
窗口的变量
query
在
for
循环块中定义，因此在循环块外部未定义。
HTML

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

在HTML中

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

在for循环外部声明
查询
变量

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;
}  

函数重定向（元素、数据）{
//数据=prepareTopComponentList（数据）；
var查询；
对于（var count=0；count
在for循环外部声明您的
查询
变量

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;
}  

函数重定向（元素、数据）{
//数据=prepareTopComponentList（数据）；
var查询；
对于（var count=0；count