PURPOSE

To show that I do actually use Javascript sometimes. Although I may not be as succesful in convincing someone because I am not updating this often!

Iterating over Objects

Copy the below code in console of your browser:

var obj = { one: "1", two: "2", } console.log("Keys:", Object.keys(obj)) console.log("Values:", Object.values(obj)) console.log("Using For In") for (key in obj) { console.log("Key:", key, "val:", obj[key]) } console.log("Using Map") Object.keys(obj).map((key, index) => { console.log("Key:", key, "Index:", index, "Value:", obj[key]) }) console.log("Using forEach") Object.keys(obj).forEach((key, index) => { console.log("Key:", key, "Index:", index, "Value:", obj[key]) })

Check if Object is Empty

Copy the below code in browser console:

var empty_obj = {} var filled_obj = { one: "1" } check_empty = obj => { if (Object.keys(obj).length === 0 && obj.constructor === Object) { console.log(obj, ": Empty Object") } else { console.log(obj, ": Object is not empty") } } check_empty(empty_obj) check_empty(filled_obj)

Log Form Data

You cannot directly log a formData object. However, you can use the entries property to iterate over formdata values. Copy the below code in browser:

var form_data = new FormData() form_data.append("first_entry", "first_value") form_data.append("second_entry", "second_value") console.log("Directly Loggin FormData object with return empty object") console.log(form_data) console.log("Use the entries property to access the values and log them") for (var key of form_data.entries()) { console.log(key[0] + ", " + key[1]) }

How to check whether a substring exists in an array elements

You can use the includes method

var test_arr = ["element", "another_element", "one_more_element"] //checking substring for (var i = 0; i < test_arr.length; i++) { if (test_arr[i].includes("element")) { console.log(`Yes: ${test_arr[i]}`) } } //to check exact string, you can use simple equality check //writing the same method but with ES6 syntax test_arr.forEach((elem, index) => { if (elem.includes("element")) { console.log(`forEach method::${index}::${elem}`) } if (elem == "element") { console.log(`Exact Match::${index}::${elem}`) } })

Comparing version values in Javascript

function check_version() { flag = true try { threshold_ver = "5.0.50.1000" currList = urlParams.split('.') compList = threshold_ver.split('.') for (i=0; i<4; i++) { if (parseInt(currList[i]) < parseInt(compList[i])) { flag = false break; } else if (parseInt(currList[i]) > parseInt(compList[i])) { flag = true break; } else { continue; } } } finally { return flag; } }

MutationObserver

• The user's email is given to me through a separate process
• I needed to auto fill email this email in Pre Chat form for Kommunicate Chat
• KommunicateChat loads externally as an iframe

First, we observe the whole body to get iframe

• we create a mutation observer object
• we observe the whole document body and set the childList tracking true
• we track only those mutations where a node is added
• once Kommunicate widget is found, we stop the observer and start tracking the widget itself

function autoPopulateEmailInPreChatForm() { /* Observe body to check if Kommunicate widget is loaded */ try { var observer = new MutationObserver(function (mutations) { for (let mutation of mutations) { if (mutation.addedNodes) { node = mutation.addedNodes[0]; console.debug("autopop:", node); if (node.id == "kommunicate-widget-iframe") { kommunicateIframe = node.contentWindow.document; observer.disconnect(); observeFrameUpdateEmail(kommunicateIframe); return; } } } }); observer.observe(document.body, { childList: true, }); } catch (e) { console.error("auto pop email:", e); } }

Then, we observe the whole iframe to get the email element

• we create a new mutation observer
• we start tracking with childList & subtree true
• we track only those mutations where a node is added
• if email element is found, we set the value

function observeFrameUpdateEmail(targetNode) { /* observe Kommunicate iframe & update email field in pre chat form */ var observer = new MutationObserver(function (mutations) { for (let mutation of mutations) { if (mutation.addedNodes) { var email = window.KommunicateGlobal && window.KommunicateGlobal.document.getElementById("km-email"); if (email) { console.debug(email); email.value = urlParams.email; observer.disconnect(); return; } } } }); observer.observe(targetNode, { childList: true, subtree: true, }); }