Displaying appropriate error message when data from JSON doesn't get fetched in HTML

Question

I've a sample 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"
    }
]  

I've a JavaScript code that goes through above JSON and fetches the data
function 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) {



    }

}

I also have a HTML code for displaying error:

<!--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>  

I'm fetching componentid from JSON. But if it is NULL , then I want a bootstrap error pop up saying that componentid is NULL . Catch block of above JavaScript code is empty, I'm not getting what code I should put there to get bootstrap error pop up.

Answer 1

If you want no string to be appened at all if one of the items is invalid, you can use the following (I did it in es6, but you get the id)

If you want only the valid items to be appened, you can just replace the throw statement by 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

The === is used to check the quality of the value and the type of variable....

You can do something like this...

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

   //Use your modal code

    }
    else{

    //preparedHTML code

    }