6
\$\begingroup\$

I have this code I am doing to make my code modular js:

$(function(){
    var url, settings ={};
    var language = mainSettings.getLanguage(); /* there is an object in the page called mainSettings with current language */
    function applyLanguageSettings() {
        if (language == "en") {
         settings.web = "en";   

        }
        else {
         settings.web = "es";
        }
    }

    applyLanguageSettings();
    //Get element
    var pageName= location.pathname.split("/").pop();
    pageName = pageName.substring(0, pageName.indexOf('.aspx'));
    baseUrl = mainSettings.getUrl() + settings.web + "/db/items?$filter=PageName eq '"+ pageName + "'";
    var dfd = $.ajax({
    url: baseUrl, 
    method: "GET",
    headers : {
        "accept": "application/json;odata=verbose"
    }
})

dfd.done(function(data, status, jqXHR){
        if(data.d && data.d.results && data.d.results.length >0){
            var results = data.d.results;
            var card = data.d.results[0];
            var obj = {};
            obj.Title = value.Title;
            obj.ImageSource = value.Img;
    $("#Img").attr("src",obj.ImageSource);
    $("#Title").text(obj.Title);                       


          }
    });
}) 

I'm trying to access a REST-based Web-Service using JavaScript, then update a couple local HTML elements with the result of the download.

I have a couple questions:

  1. Do I have to define a namespace and put my code inside to make it modular? Do I have to make my code modular in the first place? I don't see how I can turn this straightforward code into modular code.

  2. For the apply language settings, I am not sure if am doing the right thing by defining a function then calling the function below it. Do I need to use IIFE?

  3. Calling the $("#Title"), do I need to get the container in HTML once, and use .find()? What's the benefit of using .find() over what I am doing here?

  4. Is my if condition to check for the data done in the right way?

\$\endgroup\$
1
\$\begingroup\$

declared but never used:

  • url
  • data (it my look like it is used but it is only assigned to results and card)
  • results
  • card

used but never declared:

  • baseUrl
  • mainSettings (though there is a comment about it)
  • value

Unnecessary:

  • applyLanguageSettings
  • settings
  • obj
  • status
  • jqXHR

I had to assume card and value were the same thing or else as mentioned above data wasn't really used. Readability can be improved by giving dfd a name that would be understood by more people. I also made use the the data setting for the ajax function.

Potential rewrite:

$(function() {
    var language = mainSettings.getLanguage(); /* there is an object in the page called mainSettings with current language */
    language = language === "en" ? "en" : "es";

    var pageName = window.location.pathname.split("/").pop();
    pageName = pageName.substring(0, pageName.indexOf('.aspx'));
    var understandableName = $.ajax({
        url: mainSettings.getUrl() + language + "/db/items",
        data : { "$filter" : "PageName eq '" + pageName + "'" },
        method: "GET",
        headers: {
            "accept": "application/json;odata=verbose"
        }
    });

    understandableName.done(function(data) {
        if (!data.d)
            return;
        var results = data.d.results;
        if (results && results.length > 0) {
            var value = results[0];
            $("#Img").attr("src", value.Img);
            $("#Title").text(value.Title);
        }
    });
});
| improve this answer | |
\$\endgroup\$

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.