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.

Why not just test with typeof(data[count].componentid) === typeof(null), and then manually if/else to display error or proceed? No try/catch is necessary. — twicejr
– twicejr, Commented Nov 14, 2017 at 9:33
Got it, should I use prepared HTML statements for displaying bootstrap error pop up? — Ajay Kulkarni
– Ajay Kulkarni, Commented Nov 14, 2017 at 9:35
the if/else won't stop the string to be fed with data and eventually be appened if no dirty bool variable is set to check every element is valid. I like the try catch here — Logar
– Logar, Commented Nov 14, 2017 at 10:49

Logar · Accepted Answer · 2017-11-14 11:15:25Z

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
    }

answered Nov 14, 2017 at 11:15

Logar

1,2489 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ajay Kulkarni Over a year ago

Cool, this is what I wanted. Thank you very much, I modified your code a bit so that it can suit my requirements :)

Jegadesh B S · Accepted Answer · 2017-11-14 10:06:34Z

0

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

    }

answered Nov 14, 2017 at 10:06

Jegadesh B S

7091 gold badge6 silver badges14 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related