Develop Reference

How to compare a variable against another from an array of objects?

I'm trying to compare event.feature.getProperty('township') against timeline.townshipname from my timeline array in my if. Checking for one right now with [0] is fine, but I have a whole column I want to check against. What's the best way to do this?
//Load Timelines
var timeline = [];
jQuery.getJSON(timelines, function(data) {
var entry = data.feed.entry;
jQuery(entry).each(function(){
var townshipname = this.gsx$township.$t;
var timelinename = this.gsx$timeline.$t;
var combined = {townshipname, timelinename};
timeline.push(combined);
});
});
// Output from timeline looks like
// 0: {townshipname: "West Quincy", timelinename: "Ready for drops"}
// 1: {townshipname: "Woodgate", timelinename: "Ready"}
//Add infowindow to identify townships
township_layer.addListener('click', function(event) {
if (event.feature.getProperty('township') == timeline[0].townshipname){
var timepush = timeline[0].timelinename
} else {
var timepush = 'No Timeline Entered'
}

You can create an array of township names from the timeline array of objects, so that you can compare if a specific township is found in your timeline.
This can be done by:
Using Array.prototype.map() to iterate through your timeline array of objects and return a list of all townshipname
Check if a given township is present in your array by using Array.prototype.indexOf()
Example code is as follow:
// Generate an array of townships extract from timeline
var townships = timeline.map(function(item) {
return item.townshipname;
});
// Attempt to search a given township in your generated array
var townshipIndex = townships.indexOf(event.feature.getProperty('township'));
if (townshipIndex !== -1) {
var timepush = timeline[townshipIndex].timelinename;
} else {
var timepush = 'No Timeline Entered';
}
Alternatively, you can use a for...of loop and break out of it once a match is found. We assume that no timeline is entered as the "ground state", and then we can update that once a match is found:
var timepush = 'No Timeline Entered';
for (var item of timeline) {
if (item.townshipname === event.feature.getProperty('township')) {
timepush = item.timelinename;
break;
}
}
If you really need IE support, then we can use the classic for loop:
var timepush = 'No Timeline Entered';
for (var i = 0; i < timeline.length; i++) {
if (timeline[i].townshipname === event.feature.getProperty('township')) {
timepush = timeline[i].timelinename;
break;
}
}

So there are a couple of different ways you could this, if you have an indexed array of objects the fastest way would be:
for(var i = 0; i < timeline.length; i++){
if(event.feature.getProperty('township') == timeline[i].townshipname){
var timepush = timeline[i].timelinename;
}
}
I can come up with another example shortly.

Problem with Looping through over a newly created list element by js

I am building a Todo-List Project and i am stuck at looping through my newly created list items.
This is what i am doing:
Created an array.
Made li items for array's each element through looping so that array appears in a list manner.
And then looping through newly created li section to addEventListener on each of li's ( But this one is not working).
var arrList = ["play","learn","walk"];
var list = document.querySelectorAll("li");
var done = false;
//printing array in list manner
for(let i = 0; i < arrList.length; i++){
let el = document.createElement("li")
el.textContent = arrList[i];
document.querySelector("ul").appendChild(el);
}
//looping through each li's to apply if else statement
for(let i = 0; i < list.length; i++){
list[i].addEventListener("click",function(){
if(!done){
this.style.textDecoration = "line-through";
done = true;
}else{
this.style.textDecoration = "none";
done = false;
}
})
}

You're code is mostly correct, however there are a few issues that need to be addressed. First, consider replacing your for loop with iteration based on forEach() as shown below. Using forEach() in this way allows you to leverage "closure" which in this case will greatly simplify your code. For instance, you can use the closure feature to store the done state of each item in your list, rather than storing that state explicitly in an array.
The other issue I noticed was var list = document.querySelectorAll("li"); queries the document for li elements before any are added to your document - later in your script it seems you're iterating that empty query result and expecting it to contain the added li elements.
Here's a working snippet - hope this helps!
var arrList = ["play", "learn", "walk"];
// Iterate the list via forEach
arrList.forEach(function(arrItem) {
// We're now in a new "closure" for this list item
// so we can define some state like "done" that will
// be used exclusively for this list item
var done = false;
// Create li element for this list item as before
var el = document.createElement("li")
el.textContent = arrItem;
// Configure click event
el.addEventListener("click", function() {
// Notice we're able to use the done variable
// in this closure for this list item? The key
// thing to understand is that each list item
// will have it's own unique "done" variable
if (!done) {
el.style.textDecoration = "line-through";
done = true;
} else {
el.style.textDecoration = "none";
done = false;
}
})
document.querySelector("ul").appendChild(el);
});
<ul></ul>

It seems like you only have one done variable that is shared for every item on the todo list. Therefore if you click one of the items all of the items will be crossed out. You will need a boolean variable for every item in your to do list.

Add this line just above the second for loop and remove from the top.
var list = document.querySelectorAll("li");
You are assigning list the values even before they are created.

from the source code I see that the list li item is initialized before new li item been created,
it will cause the list li item not contains the new one,
due to that addEventListener will not working for the new item.
to fix this, just need move init list li item code after creation part :
var arrList = ["play","learn","walk"];
var done = false;
//printing array in list manner
for(let i = 0; i < arrList.length; i++){
let el = document.createElement("li")
el.textContent = arrList[i];
document.querySelector("ul").appendChild(el);
}
var list = document.querySelectorAll("li");
//looping through each li's to apply if else statement
for(let i = 0; i < list.length; i++){
list[i].addEventListener("click",function(){
if(!done){
this.style.textDecoration = "line-through";
done = true;
}else{
this.style.textDecoration = "none";
done = false;
}
})
}

Please, be simple...
var
arrList = ["play","learn","walk"],
UL_arrList = document.querySelector("ul")
;
arrList.forEach (arrItem => {
let el = document.createElement("li");
el.textContent = arrItem;
UL_arrList.appendChild(el);
el.onclick = function(e){
let deco = this.style.textDecoration || 'none';
this.style.textDecoration = (deco==='none') ? 'line-through': 'none';
}
});
<ul></ul>

Checking for an item in an array

I'm having trouble finding the right way to find if an item from a for loop is in an array. Let's say I have a for loop that is iterating through some results. If they are in an array:
ctids = [];
continue to the next step in the for loop, but if not, push them to the array and do something else. What is the correct syntax for this?
for (var i=0;i<results.features.length;i++){
ACS_BG = results.features[i].attributes.BLKGRPCE;
ACS_ST = results.features[i].attributes.STATEFP;
ACS_CNTY = results.features[i].attributes.COUNTYFP;
ACS_TRCT = results.features[i].attributes.TRACTCE;
if ACS_TRCT exists in ctids { //This is where I am having trouble.
continue; //skip the rest of the if statement
} else {
ctids.push(ACS_TRCT);
// do something else;
};
};

Can you please try this code
var ctids = []
for (var i=0;i<results.features.length;i++){
ACS_BG = results.features[i].attributes.BLKGRPCE;
ACS_ST = results.features[i].attributes.STATEFP;
ACS_CNTY = results.features[i].attributes.COUNTYFP;
ACS_TRCT = results.features[i].attributes.TRACTCE;
if(!ctids.includes(ACS_TRCT))
{
ctids.push(ACS_TRCT);
}
};

You can use includes to check if the elment exist in array and if not push the element into it.
if (ctids.includes(ACS_TRCT)){
continue;
}else{
ctids.push(ACS_TRCT)
}

I'd do:
for (var i = 0; i < results.features.length; i++) {
const ACS_BG = results.features[i].attributes.BLKGRPCE;
const ACS_ST = results.features[i].attributes.STATEFP;
const ACS_CNTY = results.features[i].attributes.COUNTYFP;
const ACS_TRCT = results.features[i].attributes.TRACTCE;
// push ACS_TRCT, ACS_ST, ACS_TRCT, ACS_CNTY to resulting
// array ctids if they don't present using `.includes` method.
if (!ctids.includes(ACS_TRCT)) ctids.push(ACS_TRCT);
if (!ctids.includes(ACS_ST)) ctids.push(ACS_ST);
if (!ctids.includes(ACS_CNTY)) ctids.push(ACS_CNTY);
if (!ctids.includes(ACS_TRCT)) ctids.push(ACS_TRCT);
}

You can use .find to check if the item is already present in the array ( will only work for primitive types )
var found = ctids.find(function(value) {
return ACS_TRCT === value;
});
if(!found) {
ctids.push(ACS_TRCT);
}

Loop, get unique values and update

I am doing the below to get certain nodes from a treeview followed by getting text from those nodes, filtering text to remove unique and then appending custom image to the duplicate nodes.
For this I am having to loop 4 times. Is there is a simpler way of doing this? I am worried about it's performance for large amount of data.
//Append duplicate item nodes with custom icon
function addRemoveForDuplicateItems() {
var treeView = $('#MyTree').data('t-TreeView li.t-item');
var myNodes = $("span.my-node", treeView);
var myNames = [];
$(myNodes).each(function () {
myNames.push($(this).text());
});
var duplicateItems = getDuplicateItems(myNames);
$(myNodes).each(function () {
if (duplicateItems.indexOf($(this).text()) > -1) {
$(this).parent().append(("<span class='remove'></span>"));
}
});
}
//Get all duplicate items removing unique ones
//Input [1,2,3,3,2,2,4,5,6,7,7,7,7] output [2,3,3,2,2,7,7,7,7]
function getDuplicateItems(myNames) {
var duplicateItems = [], itemOccurance = {};
for (var i = 0; i < myNames.length; i++) {
var dept = myNames[i];
itemOccurance[dept] = itemOccurance[dept] >= 1 ? itemOccurance[dept] + 1 : 1;
}
for (var item in itemOccurance) {
if (itemOccurance[item] > 1)
duplicateItems.push(item);
}
return duplicateItems;
}

If I understand correctly, the whole point here is simply to mark duplicates, right? You ought to be able to do this in two simpler passes:
var seen = {};
var SEEN_ONCE = 1;
var SEEN_DUPE = 2;
// First pass, build object
myNodes.each(function () {
var name = $(this).text();
var seen = seen[name];
seen[name] = seen ? SEEN_DUPE : SEEN_ONCE;
});
// Second pass, append node
myNodes.each(function () {
var name = $(this).text();
if (seen[name] === SEEN_DUPE) {
$(this).parent().append("<span class='remove'></span>");
}
});
If you're actually concerned about performance, note that iterating over DOM elements is much more of a performance concern than iterating over an in-memory array. The $(myNodes).each(...) calls are likely significantly more expensive than iteration over a comparable array of the same length. You can gain some efficiencies from this, by running the second pass over an array and only accessing DOM nodes as necessary:
var names = [];
var seen = {};
var SEEN_ONCE = 1;
var SEEN_DUPE = 2;
// First pass, build object
myNodes.each(function () {
var name = $(this).text();
var seen = seen[name];
names.push(name);
seen[name] = seen ? SEEN_DUPE : SEEN_ONCE;
});
// Second pass, append node only for dupes
names.forEach(function(name, index) {
if (seen[name] === SEEN_DUPE) {
myNodes.eq(index).parent()
.append("<span class='remove'></span>");
}
});

The approach of this code is to go through the list, using the property name to indicate whether the value is in the array. After execution, itemOccurance will have a list of all the names, no duplicates.
var i, dept, itemOccurance = {};
for (i = 0; i < myNames.length; i++) {
dept = myNames[i];
if (typeof itemOccurance[dept] == undefined) {
itemOccurance[dept] = true;
}
}

If you must keep getDuplicateItems() as a separate, generic function, then the first loop (from myNodes to myNames) and last loop (iterate myNodes again to add the span) would be unavoidable. But I am curious. According to your code, duplicateItems can just be a set! This would help simplify the 2 loops inside getDuplicateItems(). #user2182349's answer just needs one modification: add a return, e.g. return Object.keys(itemOccurance).

If you're only concerned with ascertaining duplication and not particularly concerned about the exact number of occurrences then you could consider refactoring your getDuplicateItems() function like so:
function getDuplicateItems(myNames) {
var duplicateItems = [], clonedArray = myNames.concat(), i, dept;
for(i=0;i<clonedArray.length;i+=1){
dept = clonedArray[i];
if(clonedArray.indexOf(dept) !== clonedArray.lastIndexOf(dept)){
if(duplicateItems.indexOf(dept) === -1){
duplicateItems.push(dept);
}
/* Remove duplicate found by lastIndexOf, since we've already established that it's a duplicate */
clonedArray.splice(clonedArray.lastIndexOf(dept), 1);
}
}
return duplicateItems;
}

Why do the arrays I'm creating within my loop not contain all the values I've added after the loop completes?

I have an array in Java Script that I'm trying to split into two arrays using a test within a loop. The console is logging that the two objects are being stored, but after the loop finishes the inhaledArray array only contains one object.
for (var i=0; i<results.length; i++)
{
var inhaledArray = new Array();
var otherArray = new Array();
if(results[i].get('MedicationType') == "inhaled")
{
//inhaledArray is dumping results
console.log(results[i]);
inhaledArray.push(results[i]);
}
if(results[i].get('MedicationType') == "other")
{
otherArray.push(results[i]);
}
}

You are resetting the output at every iteration (by pointing the variable to a new array).
Move the array setup code outside of the loop.

Alex already answered your question, but here's a suggestion. If you ever have a bunch of arrays that store basically the same data, consider using an object instead:
var categories = {};
for (var i = 0; i < results.length; i++) {
var name = results[i].get('MedicationType');
if (name in categories) {
categories[name].push(results[i]);
} else {
categories[name] = [results[i]];
}
}
console.log(categories.inhaled);
console.log(categories.other);
That way, you can account for all of the category types without hard-coding anything.

this is because you are initializing the array inside the forloop, just move the Array initialization before the for loop like below
var inhaledArray = new Array();
var otherArray = new Array();
for (var i = 0; i < results.length; i++) {
if (results[i].get('MedicationType') == "inhaled") {
//inhaledArray is dumping results
console.log(results[i]);
inhaledArray.push(results[i]);
}
if (results[i].get('MedicationType') == "other") {
otherArray.push(results[i]);
}
}