当无法从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"
    }
]  

我有一个经过JSON上方的JavaScript代码并获取数据
函数prepareTopComponentList（data）{

    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块为空，我没有得到应该放入的代码以使引导错误弹出。

Answer 1

如果如果其中一项无效，则根本不希望添加任何字符串，则可以使用以下命令（我在es6中做到了，但是获得了ID）

如果只想添加有效项目，则可以用return memo;代替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
    }

Answer 2

===用于检查值的质量和变量的类型。

你可以做这样的事情...

 if(data[count].componentid === undefined || data[count].componentid === null){

   //Use your modal code

    }
    else{

    //preparedHTML code

    }