I am using UI Grid for displaying large table (30-40 columns) and thousands of rows. I am getting my data through websocket which is basically json array.
The Incoming data is in two parts, one is "add" array which contains rows which are directly pushed to $scope.gridOptions.data. Another part of incoming data is
"edit" array which consists of rows which will replace/modify existing $scope.gridOptions.data.
The Add part is pretty straightforward, just push to existing gridOptions.data array. But Edit part is tricky. Currenty I am looping through incoming array
on gridoptions array. This is the worst but working solution, can there be a better way to do this?
I thought that using "indexOf" function on array, we can directly find the array index at which it can be modified. But as the UI Grid is angular based, all the three arrays
(add, edit and scope.gridOptions) contain unique $$hashKey, so we can not use indexOf.
Can I get rid of $$hashkey by angular.toJson function without any side effect?
I have field to identify unique rows, can I replace it with $$hashKey by using something like 'track by' in UI grid?
here's my code:
$scope.$on('test',function(event, data){
$scope.add(data.ADD);
$scode.edit(data.EDIT);
$scope.$apply();
});
$scope.edit=function(data){
for(var i = 0; i < data.length; i++) {
//var j = $scope.gridOptions.data.indexOf(data[i]);
//$scope.gridOptions.data[j] = data[i];
for(var j = 0; j < $scope.gridOptions.data.length; j++) {
if(data[i].iRowID == $scope.gridOptions.data[j].iROWID ) {
$scope.gridOptions.data[j] = data[i];
}
}
}
};
$scope.add=function(data){
for(var i = 0; i < data.length; i++) {
$scope.gridOptions.data.push(data[i]);
}
};
Related
I've never worked with JavaScript before. I'm trying to create a map where different layers can be hidden per users preference. I came across the helpful example on map box showing the exact code at https://www.mapbox.com/mapbox-gl-js/example/toggle-layers/.
Now, my problem is, because I have numerous point layers of different magnitudes, I was forced to create several layers and filter them based on the desired attribute so each points appearance reflects that specific magnitude. However, I want all these points to be organized into years, so I grouped the layers. So all my layer names look something like this (2006_mag2,2006_mag8,2010_mag3...).
However, I want the hide/show option to show layers based on years. So I was thinking I could do some sort of operator like we use in sql (i.e. '2006%' or a LIKE operator). Looking at some posts a lot of people use '*' in JavaScript?
So this is what it would look like for each layer individually before:
var toggleableLayerIds = [ '2006_mag2', '2010_mag3' ];
for (var i = 0; i < toggleableLayerIds.length; i++) {
var id = toggleableLayerIds[i];
}
and this is my botched attempt at trying to group a number of the layers together:
var toggleableLayerIds = [ '2006.*', '2008.*' ];
for (var i = 0; i < toggleableLayerIds.length; i++) {
var id = toggleableLayerIds[i];
}
Any guidance you guys can provide will be greatly appreciated.
You could try to use loops with regex to group layerIds by date. Sorry I changed the name of your variables. This will get you an object with layerIds grouped by date.
var layerIds = [ '2006_mag2', '2010_mag3', '2006_mag8', '2006_mag1', '2008_mag2'];
var dates = ['2006', '2010'];
var groupedLayers = {};
//init your object to have a member for each date
//this could be done inside the loops below by testing if the array exists before pushing the matching layerId
for (var i=0; i < dates.length; i++) {
groupedLayers[dates[i]] = [];
}
//loop over your layerIds to match with the RegExp
for (var i=0; i < layerIds .length; i++) {
for (var j=0; j < dates.length; j++) {
var searchPattern = new RegExp('^' + dates[j]);
if (searchPattern.test(layerIds[i])) {
groupedLayers[dates[j]].push(layerIds[i]);
}
}
}
console.log(groupedLayers)
Please tell me what exact result you need so I could help you more.
state.on('change', function(){
city.empty();
$.getJSON("pincodes.JSON", function(pincodes){
var key = state.val();
for (var j= 0; j < pincodes['address'].length; j++) {
if (pincodes['address'][j]['circlename'] == key) {
temp.push(pincodes['address'][j]['regionname']);
}
}
cities = $.unique(temp);
for (var k = 0; k < cities.length; k++) {
city.append('<option>' + cities[k] + '</option>');
}
});
});
In the above state = $('#state') , the above works fine fills the cities on select "state" . But the issue is when a new state is selected the previously filled cities are also there . Even though I tried .empty on every change() .
You don't empty your temp array. So, every time this function is called, you keep appending items to your temp array.
You simply need to add the following line in your code:
state.on('change', function() {
city.empty();
temp = []; // <---
$.getJSON("pincodes.JSON", function(pincodes) {
What about cities = $.unique(temp);, it won't work.
According to jQuery.unique() documentation, this function
Sorts an array of DOM elements, in place, with the duplicates removed. Note that this only works on arrays of DOM elements, not strings or numbers.
So, it is not a correct usage. If you get non-unique values from your JSON, you will need to use another way to get distinct values. There is a good SO article on this topic.
Note: I am not asking how to append data to an array!
Rather my problem is that I want to append items to each and every element of an array.
Here is a part of my code:
dataset=[];
var xpoints=["Jan","Feb","Mar","Apr","May"];
var ypoints=[10,20,30,40,50];
for (var i = 0; i < xpoints.length; i++) {
dataset.push({
x : xpoints[i],
y : parseFloat(ypoints[i])
});
}
The array so far would be as below:
dataset[0] - {x:Jan,y:10}
dataset[1] - {x:Feb,y:20}
dataset[2] - {x:Mar,y:30}
dataset[3] - {x:Apr,y:40}
dataset[4] - {x:May,y:50}
So far there is no problem...
But if now i have another array (Suppose that it is of the same length), I want to append the new array's elements into my existing array such that my output would be as follows:
var zpoints=["a","b","c","d","e"];
/*
Do something
*/
Required Output:
dataset[0] - {x:Jan,y:10,z:a}
dataset[1] - {x:Feb,y:20,z:b}
dataset[2] - {x:Mar,y:30,z:c}
dataset[3] - {x:Apr,y:40,z:d}
dataset[4] - {x:May,y:50,z:e}
If I do:
for (var i = 0; i < dataset.length; i++) {
dataset.push({
z:zpoints[i]
});
}
it would append it as different elements in the dataset array, which is not what I am looking for.
Is the required output achieveable using JavaScript? How?
What if I want to add multiple objects to the dataset array but I do not know the number of objects to be added while compiling?
Suppose that there can be multiples arrays:
z1=["a","b","c","d","e"];
z2=["l","m","n","o","p"];
z3=...
.
.
and so on.. and the number is unknown until runtime.
I want to do something like this:(invalid code)
for(var j=0;j<length;j++) //Length will be known only during runtime
for (var i = 0; i < dataset.length; i++) {
dataset[i].z[j] = zpoints[i]; //z[j] is invalid!!
}
I need to name the objects dynamically somehow. Is there a way to achieve this?
It's rather simple:
for (var i = 0; i < dataset.length; i++) {
dataset[i].z = zpoints[i];
}
A .push call will always append more entries to the array; in this case you want to modify the existing ones.
You need to simply add new property z to existing object:
var l = zpoints.length;
while(l --)
dataset[l].z = zpoints[l];
I have a single input row that needs to be expanded to create multiple rows, with 6 fields being repeated on each row, and one unique field added to each row. The unique fields are stored in arrparentjobs array, and I know that they have unique values.
When the code runs, the resulting rows all contain the exact same data, which happens to be the values of the last items being pushed.
What am I doing wrong here?
Thanks much,
Joe
var dataRowsOutput = [];
arrVolDataOutput.playerid = volDataRow.playerId;
arrVolDataOutput.timestamp = volDataRow.timestamp;
arrVolDataOutput.playername = volDataRow.playerName;
arrVolDataOutput.parentname = volDataRow.parent1Name;
arrVolDataOutput.parentphone = volDataRow.parent1Phone;
arrVolDataOutput.parentemail = volDataRow.parent1Email;
for (var j = 0; j < arrparentjobs.length; ++j) {
arrVolDataOutput.parentjob = arrparentjobs[j];
dataRowsOutput.push(arrVolDataOutput);
continue;
}
the resulting rows all contain the exact same data
Yes they do and they do because push pushes a reference – not a deep or even shallow copy – onto the array and you're simply changing the parentjob while pushing the exact same arrVolDataOutput object onto the array over and over again.
You need to create a new object on each iteration, something like this:
var dataRowsOutput = [];
for (var j = 0; j < arrparentjobs.length; ++j) {
dataRowsOutput.push({
parentjob: arrparentjobs[j],
playerid: volDataRow.playerId,
timestamp: volDataRow.timestamp,
playername: volDataRow.playerName,
parentname: volDataRow.parent1Name,
parentphone: volDataRow.parent1Phone,
parentemail: volDataRow.parent1Email
});
}
If there are other fields in your arrVolDataOutput then you'll need to include those in the object literal as well.
I have a very big array with car makes and models. I've already extracted the makes into a separate array, but I am struggling to extract the models while also maintaining their association to the make.
Here is a sample of the array:
var dataa = new Array
(
['Acura','','Integra','Mdx','Rl','Rsx','Slx','Tl','Tsx'],
['Aixam','','400','505','600'],
['Alfa romeo','','145','146','147','155','156'],
['Aston martin','','.','DBS','Db7','Db9']);
As you can see I have a multi-dimensional array with the car make (located at dataa[0][0]), then an empty value and then the model for this make.
I am using this code to to get the car makes:
This gives me the fist value of every nested array -> dataa[i][0]:
for (var i = 0; i < dataa.length; i++) {
document.write(dataa[i][0] + "<br>");
}
My problems start HERE.
I CAN NOT extract all models and assign them to the proper car make. I have tried for-loop's, loops with brakes, while loops and loops with conditional statements but I can't do it.
Please give me some advice here. Would jQuery or some other technology help me?
Put a loop inside your loop.
for (var i = 0; i < dataa.length; i++) {
document.write("<h2>Starting new inner loop!</h2><br>");
for (var j = 0; j < dataa[i].length; j++) {
document.write(dataa[i][j] + "<br>");
}
}
Now for every Array in the outer Array, you're doing a separate loop.
Here's a demo