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