javascript - 当未从 HTML 中获取 JSON 数据时显示适当的错误消息

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

我有一个 JavaScript 代码，可以遍历上面的 JSON 并获取数据
函数prepareTopComponentList(数据){

    try {

        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[count].displayImageUrl;
            preparedHtml += "\" alt=\"N/A\">\n" +
                "                    <div class=\"card-body\">\n" +
                "                        <h4 class=\"card-title\">";
            preparedHtml += data[count].title;
            preparedHtml += "</h4>\n" +
                "                        <p class=\"card-text\">";
            preparedHtml += data[count].shortdesc;
            preparedHtml += "</p>\n" +
                "                        <a  onclick='Redirect(this)' href='#' class=\"btn btn-info\" id=\"";
            preparedHtml += "component_desc_=" + data[count].componentid;
            preparedHtml += "\">Learn more</a>\n" +
                "                    </div>\n" +
                "\n" +
                "                </div>\n" +
                "            </div>";

        }

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


    } catch (err) {



    }

}
function Redirect(element) {
    try {
        window.location = "http://localhost:9090/Reusable%20Components/pages/homepage.php?" + element.id;
    } catch (err) {



    }

}

我还有一个用于显示错误的 HTML 代码:

<!--Error/Warning Modal-->
<div class="modal fade" id="modal_show_error" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" id="modal_error_title"></h4>
            </div>
            <div class="modal-body">
                <p id="modal_error_description"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Okay</button>
            </div>
        </div>

    </div>
</div>  

我正在从 JSON 获取 componentid。但如果它是NULL，那么我希望弹出一个引导错误，指出componentid是NULL。上面的 JavaScript 代码的 Catch block 是空的，我没有得到应该放在那里的代码来弹出引导错误。

Answer 1

如果您希望在其中一项无效时根本不附加任何字符串，您可以使用以下内容(我在 es6 中做到了，但您获得了 id)

如果您只想附加有效的项目，只需将 throw 语句替换为 return memo;

try {
    const preparedHtml = data.reduce((memo, item) => {
        if(typeof(item.componentid) === typeof(null))
            throw new Error(`All items must have a componentid`);
        const htmlChunk = `<div class="col-lg-4" style="margin-top: 20px">\n
            <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="${item.displayImageUrl} alt="N/A">\n
                    <div class="card-body">\n
                        <h4 class="card-title">${item.title}</h4>\n
                        <p class="card-text">${item.shortdesc}</p>\n
                        <a  onclick='Redirect(this)' 
                            href='#' class=\"btn btn-info\" id=\""
                            component_desc_="${item.componentid}">Learn more</a>\n
                    </div>\n\n
                </div>\n
            </div>`;
        return memo.concat(htmlChunk);
        }, '');
        $('#div_top_component').append(preparedHtml);
    } catch (err) {
        //bootstrap modal code
    }