How to remove an empty object from an array? - javascript

I have a JavaScript Array of Objects, on a button click I push an object into the array and then use that as a datasource for a grid. The issue I am facing is that initially the first object in the array is all blank values and when I load the grid I have a blank row because of the empty object... How do I remove that empty object from the array before I load the grid?
Here is the array
var gridData = {
step3GridData: [{ Description: "", Color: "", SqSiding: "" }]
};
and on a button click I am pushing a new object to the array
gridData.step3GridData.push({ Description: $("#InfoInsul").text(), Color: $("#ddGetInsulationMaterialColor").val(), SqSiding: $("#ddInsulationSquares").val() });
LoadStep3(gridData.step3GridData);
As mentioned, I need to remove that empty object before I bind the load with the array. How would I go about doing this?

Use splice. If you are certain it is always the first item in the array, you can do:
if (gridData.length && Object.keys(gridData[0]).length === 0) {
gridData.splice(0, 1);
}
If you are not certain about its position, you can traverse the array and remove the first empty object:
for (const [idx, obj] of gridData.entries()) {
if (Object.keys(obj).length) === 0) {
gridData.splice(idx, 1);
break;
}
}

First, initialize your array like this:
var gridData = {
step3GridData: [] // empty array
};
Then when you are pushing a new object, check if the inputs are filled like this:
var desc = $("#InfoInsul").text(); // this seems unnecessary as this is not left to the user to fill (if I'm assuming right then don't check if this is empty)
var col = $("#ddGetInsulationMaterialColor").val();
var sqs = $("#ddInsulationSquares").val();
if(desc.length && col.length && sqs.length) { // if desc is not empty and col is not empty and sqs not empty then add an object
gridData.step3GridData.push({ Description: desc, Color: col, SqSiding: });
}
Now if the user left something empty, the object won't get pushed, thus there will be no empty objects. You can make use of else to alert a message saying that the user left some input blank.

Related

How to add table row data to an array

Goal: get all table row (cell) data and add to an array
Problem: if there are more than 1 row, it over-writes previously added array entries in stead of adding it to the end of the array. This causes the array to have the last table row dataset duplicated/triplicated/etc (as many rows as there exist in table)
Setup:
I have a dynamic html table where a user can add rows by entering a user name and age and click the Add button. The Load button must get the table body elements and populate an object, where after a for loop must get the innerText, update the object and push() the object to the array. But this is the result:
Screenshot of console.log of array
let roleArr = [];
loadBtn.addEventListener("click", () => {
roleTableData();
});
function roleTableData() {
let test = tblRows.children;
const collectRoles = {
uName: "",
uAge: "",
};
for (let i = 0; i < test.length; i++) {
collectRoles.uName= test[i].children[0].innerText;
collectRoles.uAge= test[i].children[1].innerText;
roleArr.push(collectRoles);
}
}
Since you're using the same collectRoles object for each irraration, you are redefining all the objects, since they are references of the same object.
You can research "reference vs value in JavaScript" to better understand why this is so.
Here is how I would write your roleTableData function:
function roleTableData() {
roleArr = [...tblRows.children].map(tr => {
return {
uName: tr.children[0].innerText,
uAge: tr.children[1].innerText
};
});
}

Converting an imageCollection into a dictionary with unique label values

I am trying to write a function which will create a dictionary from an image collection using Sentinel 2 data which will contain label/value pairs where the label comes from the MGRS_TILE property of the image and the value will contain a list of all the images with the same MGRS_TILE id. The label values must be distinct.I want the output to be like this:
{'label' : 'tileid1',
'values':[ image1, image2 ...]
'label' : 'tileid2',
'values':[ image3, image4 ...]}
Below is my code:
interestImageCollection is my filtered imageCollection object
tileIDS is a ee.List type object containg all of the distinct tile ids
and field is the name of the image property of my interest which in this case is 'MGRS_TILE'.
var build_selectZT = function(interestImageCollection, tileIDS, field){
//this line returns a list which contains the unique tile ids thanks to the keys function
//var field_list = ee.Dictionary(interestImageCollection.aggregate_histogram(field)).keys();
//.map must always return something
var a = tileIDS.map(function(tileId) {
var partialList=ee.List([]);
var partialImage = interestImageCollection.map(function(image){
return ee.Algorithms.If(ee.Image(image).get(field)==tileId, image, null);
});
partialList.add(partialImage);
return ee.Dictionary({'label': tileId, 'value': partialList});
}).getInfo();
return a;
};
Unfortunately the above function gives me this result:
{'label' : 'tileid1',
'values':[],
'label' : 'tileid2',
'values':[]}
I think you can use filter function instead of using if. And if you need it in list form then you could change it to list using toList function.
var build_selectZT = function(interestImageCollection, tileIDS, field){
//.map must always return something
var a = tileIDS.map(function(tileId) {
var partialList=ee.List([]);
// get subset of image collection where images have specific tileId
var subsetCollection = interestImageCollection.filter(ee.Filter.eq(field, tileId));
// convert the collection to list
var partialImage = subsetCollection.toList(subsetCollection.size())
partialList.add(partialImage);
return ee.Dictionary({'label': tileId, 'value': partialList});
}).getInfo();
return a;
};
BUT this would actually give you a list of dictionaries
[{'label':'id1','value':[image1]},{'label':'id2','value':[image2,image3]......}]
If you want to use ee.Algorithms.If like you did in your code then your error is in the "ee.Image(image).get(field)==tileId" part. as .get(field) is returning a server side object, you can't use == to equate it to something, since it is an string type you need to use compareTo instead. However, it returns 0 if the strings are same and since 0 is treated as false, you can return image when condition is false.
return ee.Algorithms.If(ee.String(ee.Image(image).get(field)).compareTo(tileId), null, image);
I still think this is a bad way as you'll get an array full of null in values like
[{'label':'id1','value':[image1, null, null, null, .....]},{'label':'id2','value':[null,image2,image3, null,....]......}]

Null Values in array of objects

I am creating objects when textbox having some values (using ng-blur and textbox.value!==undefined) and then putting these objects in an array (all working fine here).
When I click on checkbox (checkbox model bind with textbox ng-required) I need to delete that particular object having that textbox value.
I am using:
arr.splice(index,1);
to remove that particular object from array (by matching it's name like "monthly" or "quarterly" etc.), but it is creating null at that particular position.
for e.g. [object,object,object]
[
{name:"monthly",
amount:1000 },
{name:"quarterly",
amount:1200 },
{name:"yearly",
amount:1300 }
]
after removing all element it shows [] and when I add another new object it displays [3:object] and it's content as [null,null,null,object];
or
if I remove middle object say name:"quarterly", it shows [object,object] but after adding a new object it display array as [object,object,null,object] with length of array as 4.
Why is there null and how can I remove that from array. (don't want to iterate again to check null).
It is difficult to say why your code creates the null values without have a look to it.
But I can say you that it is not the expected behaviour.
You can see this example to get some inspiration:
var data = [
{name:"monthly",
amount:1000 },
{name:"quarterly",
amount:1200 },
{name:"yearly",
amount:1300 }
];
var newObjectToBeAdded = { name: "daily", amount:"100" }
function showObjects()
{
document.body.innerHTML += data + '<hr>';
}
function deleteObjectByName( objectName )
{
for( var i = 0; i < data.length; i++ )
{
if( data[ i ].name == objectName )
{
data.splice(i, 1);
}
}
}
function addObjectToData( newObject )
{
data.push( newObject );
}
showObjects();
deleteObjectByName( "quarterly" );
showObjects();
addObjectToData( newObjectToBeAdded );
showObjects();
Just to throw a guess out, maybe you are accidentally duplicating the array. Maybe in some point of your code you are doing something like this:
var new_array = original_array.splice( index );
Or creating the new array in the loop you use to find the target object, or using some kind of intermediate array, etc.
Hope it helps!
var arrayWithoutNulls = myArray.filter(function(val) {
if (val) {
return val;
}
});

Joining an array on another array's value

I am using mongodb and am building an application with two collections: users and items.
I'd like for users to be able to save items that they like and go to their saved items page where the items would be displayed in the reverse order that they were saved (last saved appears first).
At the moment, I am adding every saved item's id along with the savedDate to the user's profile savedItems array like so:
user profile
{
savedItems: [{id: "", savedDate: ""}, {id: "", savedDate: ""}, etc...]
}
Whenever I need to retrieve those items, I query the items collection for objects with ids $in this array. Like this:
var items = Items.find({_id: {$in: _.pluck(user.savedItems, 'id')}});
The problem here is that I can't order those items according to the addedDate.
So is it possible to map the addedDate onto every object of the retrieved items?
(Something like: if retrievedItems.id == savedItems.id, then push the addedDate there.)
Which would result in an items array like this:
[
{id:"", itemName:"", price: "", [...], savedDate: ""},
{id:"", itemName:"", price: "", [...], savedDate: ""},
[...]
]
Thank you.
JSFIDDLE
I created two function to help you do it:
function mergeDates(listDates, listItems) {
for (var i = 0; i < listDates.length; i++) {
var index = findListIndex(listItems, listDates[i].id);
if (index != null) listItems[index].savedDate = listDates[i].savedDate;
}
return listItems;
}
function findListIndex(listItems, id) {
for (var i = 0; i < listItems.length; i++) {
if (listItems[i].id == id) return i;
}
return null;
}
The first one, mergeDates, takes your first list wich contains the date, the second list, listItems, is the list of your items.
I loop the list with dates, and for each items in it, i call a second function that return the index of the same element in the second list, so findListIndex will search all element and return it's index when he find the same id.
Now the function mergeDates, with the newly found index, will add the value savedDate to your listItems and make it equals to the one on the listDates !
Then the function return the list with all the info of the items, including the dates!
Here is how to call the function:
var listWithDate = mergeDates(savedItems, items);
Hope it helps !

Delete an element inside a JSON array by value with jQuery

Part of my json Array
var videos = $j.parseJSON('
[
{ "privacy":"public",
"id":"1169341693" },
{ "privacy":"private",
"id":"803641223" },
{ "privacy":"public",
"id":"1300612600" }, ......
When I console.log the element I'm getting
[Object, Object, Object, …]
0: Object
privacy: "public"
id: "1169341693"
1: Object
privacy: "private"
id: "803641223"
2: Object
privacy: "public"
id: "1300612600"
I also have a unique id I want to search for
var uniqueId = 803641223;
I want to find, in my videos array, the right id, and delete that whole array element. So In that case, I want my final videos array to contain only 2 object, instead of 3 :
var videos = $j.parseJSON('
[
{ "privacy":"public",
"id":"1169341693" },
{ "privacy":"public",
"id":"1300612600" }, ......
My problem is how to get in the array to do my splice. I prefer to do it with jQuery
Any help please?
You can use grep :
videos = $.grep(videos, function(e) { return e.id!='803641223' });
In vanilla JavaScript you could have used the similar filter function but it's not supported by IE8.
Please note that videos is a JavaScript array, it's not a JSON array, even if it was made by parsing a JSON string.
A non-jQuery solution that modifies the array in place:
var uniqueId = 803641223;
var videos = [
{ "privacy":"public",
"id":"1169341693" },
{ "privacy":"private",
"id":"803641223" },
{ "privacy":"public",
"id":"1300612600" }
];
function cleaner(arr, id) {
for (var i = 0; i < videos.length; i++) {
var cur = videos[i];
if (cur.id == uniqueId) {
arr.splice(i, 1);
break;
}
}
}
cleaner(videos, uniqueId);
http://jsfiddle.net/4JAww/1/
Note that this modifies the original array in place, such that the original videos array will have the items you want, and the one that matched the uniqueId will be gone (forever). So it depends on whether you want to be able to access the original array ever again, or are okay with modifying it.
It just loops through the elements of the array, compares the item's id property to the uniqueId value, and splices if they match. I use break; immediately after the splice because you seem to imply that the uniqueId can/should only appear once in the array since it's...unique.
Hello you can remove element with javascript splice function...
videos.items.splice(1, 3); // Removes three items starting with the 2nd,
It worker for me.
arrList = $.grep(arrList, function (e) {
if(e.add_task == addTask && e.worker_id == worker_id) {
return false;
} else {
return true;
}
});
It returns an array without that object.
Hope it helps.

Categories