2
\$\begingroup\$

In my app development, I need to fetch data from backed, and it needs to implement it into an HTML page.

I've written the below code for this, but I think it's very lengthy. Can anyone give me suggestions on making this better?

Function:

var JsonHandler = function(url) {
        return $.getJSON(url)
};



(function ($) {

    var manupulate = function(data){

        var header = {}, locales = {}, userLocales = {};

        $.each(data, function(key,val){
            if(key === "name"){
                header[key] = val;
            }else if (key === "username"){
                header[key] = val;
            }else if (key === "allLocales"){
                locales = val;
            }else if (key === "userLocales"){
                userLocales[key] = val;
            }
        })  

        var headerHtml = Handlebars.compile($("#header-template").html());
        $("header").html(headerHtml(header));

        var formHtml = Handlebars.compile($("#locale-template").html());
        $("form").append(formHtml(locales));    

        $.each(userLocales["userLocales"], function(key,val){
            $(":checkbox", "form").each(function(i,e){
                if($(e).val() === val.name){
                    $(this).prop("checked", true);
                }
            })
        })

        var status = [];

        var checkBox = $("form").find(":checkbox");

        $(checkBox).each(function(i,el){
            status.push($(el).prop("checked"));

            $(el).click(function(){
                var clickedIndex = checkBox.index($(this));
                var prevStatus = status[clickedIndex];

                if(prevStatus !== $(this).prop("checked")){
                    console.log("You made the change on " + $(this).val());
                }


            })

        })

    }

    Handlebars.registerHelper("showHr", function(index_count,block) {
        if(parseInt(index_count) % 20 === 0){
        return block.fn(this)}
    });


    var path = "js/data.json";
    new JsonHandler(path).done(function(data){
        manupulate(data);
    })

})(jQuery);

JSON data:

{
    "username": "lgangula",
    "name": "Lavanya Gangula",
    "allLocales": [{
        "name": "Afrikaans"
    }, {
        "name": "Albanian"
    }, {
        "name": "Arabic"
    }, {
        "name": "Arabic (Argentina)"
    }, {
        "name": "Arabic (Bahrain)"
    }, {
        "name": "Arabic (Egypt)"
    }, {
        "name": "Arabic (Jordan)"
    }, {
        "name": "Arabic (Oman)"
    }, {
        "name": "Arabic (Qatar)"
    }, {
        "name": "Arabic (Saudi Arabia)"
    }, {
        "name": "Arabic (U.A.E.)"
    }, {
        "name": "Bengali"
    }, {
        "name": "Bulgarian"
    }, {
        "name": "Catalan"
    }, {
        "name": "Chinese"
    }, {
        "name": "Chinese (Hong Kong)"
    }, {
        "name": "Chinese (Macau)"
    }, {
        "name": "Chinese (Simplified)"
    }, {
        "name": "Chinese (Traditional)"
    }, {
        "name": "Croatian"
    }, {
        "name": "Czech"
    }, {
        "name": "Danish"
    }, {
        "name": "Dutch"
    }, {
        "name": "Dutch (Belgium)"
    }, {
        "name": "Dutch (Netherlands)"
    }, {
        "name": "English (Armenia)"
    }, {
        "name": "English (Australia)"
    }, {
        "name": "English (Bahrain)"
    }, {
        "name": "English (Botswana)"
    }, {
        "name": "English (Canada)"
    }, {
        "name": "English (Egypt)"
    }, {
        "name": "English (Guinea-Bissau)"
    }, {
        "name": "English (Hong Kong)"
    }, {
        "name": "English (India)"
    }, {
        "name": "English (Indonesia)"
    }, {
        "name": "English (Ireland)"
    }, {
        "name": "English (Israel)"
    }, {
        "name": "English (Jordan)"
    }, {
        "name": "English (Kenya)"
    }, {
        "name": "English (Kuwait)"
    }, {
        "name": "English (Latin America)"
    }, {
        "name": "English (Macau)"
    }, {
        "name": "English (Macedonia)"
    }, {
        "name": "English (Malaysia)"
    }, {
        "name": "English (Malta)"
    }, {
        "name": "English (Moldova)"
    }, {
        "name": "English (Montenegro)"
    }, {
        "name": "English (Mozambique)"
    }, {
        "name": "English (New Zealand)"
    }, {
        "name": "English (Nigeria)"
    }, {
        "name": "English (Oman)"
    }, {
        "name": "English (Other Asia)"
    }, {
        "name": "English (Philippines)"
    }, {
        "name": "English (Qatar)"
    }, {
        "name": "English (Saudi Arabia)"
    }, {
        "name": "English (Singapore)"
    }, {
        "name": "English (South Africa)"
    }, {
        "name": "English (Thailand)"
    }, {
        "name": "English (US)"
    }, {
        "name": "English (Uganda)"
    }, {
        "name": "English (United Arab Emirates)"
    }, {
        "name": "English (United Kingdom)"
    }, {
        "name": "English (Vietnam)"
    }, {
        "name": "Estonian"
    }, {
        "name": "Finnish"
    }, {
        "name": "French"
    }, {
        "name": "French (Africa)"
    }, {
        "name": "French (Belgium)"
    }, {
        "name": "French (Cameroon)"
    }, {
        "name": "French (Canada)"
    }, {
        "name": "French (Central African Republic)"
    }, {
        "name": "French (Cote d'Ivoire)"
    }, {
        "name": "French (Equatorial Guinea)"
    }, {
        "name": "French (France)"
    }, {
        "name": "French (Guinea)"
    }, {
        "name": "French (Luxembourg)"
    }, {
        "name": "French (Madagascar)"
    }, {
        "name": "French (Mali)"
    }, {
        "name": "French (Mauritius)"
    }, {
        "name": "French (Morocco)"
    }, {
        "name": "French (Niger)"
    }, {
        "name": "French (Senegal)"
    }, {
        "name": "French (Switzerland)"
    }, {
        "name": "French (Tunisia)"
    }, {
        "name": "German"
    }, {
        "name": "German (Austria)"
    }, {
        "name": "German (Germany)"
    }, {
        "name": "German (Liechtenstein)"
    }, {
        "name": "German (Luxembourg)"
    }, {
        "name": "German (Switzerland)"
    }, {
        "name": "Greek"
    }, {
        "name": "Greek (Cyprus)"
    }, {
        "name": "Hebrew"
    }, {
        "name": "Hindi"
    }, {
        "name": "Hungarian"
    }, {
        "name": "Icelandic"
    }, {
        "name": "Indonesian"
    }, {
        "name": "Italian"
    }, {
        "name": "Italian (Italy)"
    }, {
        "name": "Italian (Switzerland)"
    }, {
        "name": "Japanese"
    }, {
        "name": "Korean"
    }, {
        "name": "Latvian"
    }, {
        "name": "Lithuanian"
    }, {
        "name": "Macedonian"
    }, {
        "name": "Malay (Malaysia)"
    }, {
        "name": "Maltese"
    }, {
        "name": "Montenegrin"
    }, {
        "name": "Norwegian"
    }, {
        "name": "Pashto"
    }, {
        "name": "Polish"
    }, {
        "name": "Portuguese (Brazil)"
    }, {
        "name": "Portuguese (Portugal)"
    }, {
        "name": "Romanian"
    }, {
        "name": "Russian"
    }, {
        "name": "Serbian (Cyrillic)"
    }, {
        "name": "Serbian (Latin)"
    }, {
        "name": "Slovak"
    }, {
        "name": "Slovenian"
    }, {
        "name": "Spanish (Latin America)"
    }, {
        "name": "Spanish (Mexico)"
    }, {
        "name": "Spanish (Spain)"
    }, {
        "name": "Spanish (US)"
    }, {
        "name": "Swedish"
    }, {
        "name": "Tajik"
    }, {
        "name": "Thai"
    }, {
        "name": "Turkish"
    }, {
        "name": "Ukrainian"
    }, {
        "name": "Vietnamese"
    }],
    "userLocales": [{
            "name": "English (US)"
        }, {
            "name": "Swedish"
        }

    ],
    "message": ""
}

HTML:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IT White Admin</title>
    <link rel="stylesheet" href="styles/reset.min.css">
    <link rel="stylesheet" href="styles/admin.css">
</head>
<body>
    <!-- wrapper starts -->
    <section id="wrapper">
        <header>

        </header>
        <!-- main contents goes here -->
        <section>
            <div class="locales">
                <form>
                    <legend>Select Locales</legend>
                </form>
            </div>
        </section>
        <!-- end of main contents -->
    </section>
    <!-- wrapper ends -->
    <script id="header-template" type="text/x-handlebars-template">
        <span>Welcome {{name}}</span>
        <div class="loginInfo"> <a href="#">{{username}}</a> | <a href="#">Logout</a> </div>
    </script>
    <script id="locale-template" type="text/x-handlebars-template">
        {{#each this}}
                {{#showHr @index}}
                        <hr/>
                {{/showHr}}
                <label><input value="{{name}}" type="checkbox" /> {{name}} </label>

        {{/each}}
    </script>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/handlebars.js"></script>
    <script type="text/javascript" src="js/admin.js"></script>
</body>
</html>
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.