Accessing a REST WebService and updating local HTML objects with Modular JS

Question

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?

Answer 1

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);
        }
    });
});