how to push key and value in array using Angular - javascript

I want to filter data on the basis of number of rows and columns provided by user.
I am getting the data on controller after reading this excel file:
this is the column header values which I am getting after user has passed 5 as input columns:
This is the row data which I am getting after user has given 4 rows as input to be rendered, here there is data of 4 rows:
Inside each row, there is key value pair containing column name and the cell value:
I want to filter this row data on the basis of the header names which are coming through column so that the row has only the values till the column is defined. Currently I am getting entire row values.
I have written a logic like this but this is not working.
var rowData=[];
for(var i=0;i<headerNames.length;i++){//headerNames contains column names
for(var j=0;j<data.length;j++){//data contains the rows data
for(var keyName in data[j])
if(angular.equals(keyName,headerNames[i])){
rowData.push({'keyName':data[j][keyName]})//I want only the key,values which matches the column names. I want to set the keyName value as array key but I am not getting its value instead it is coming like keyName:18
}
}
}
}
Adding the plunker for the code.
http://plnkr.co/edit/28Z44xDBug7nFCQnKZJL?p=preview
I am able to filter the data on UI and get only the row and column data as per user input.
But i need the same data on controller, so that i can save it in MongoDb. I want to filter the row data as per the column input. So, that i only get the row data till the column is defined.
Please suggest how can i filter the data and can splice the row values so that in row i can have value upto the column numbers defined. For eg, if I user have entered 4 rows and 5 columns then in my row Data i can have only values upto 5th column and all other values i can remove from array. in my code currently i am not able to get the key value to be set as array key.
Please help me to resolve this problem.

Looks like you're most of the way there. You just need to assign rowData to be $scope.rowData so that angular can get to it, and have the Angular document show {{rowdata}} (shows $scope.rowData).
You'll probably need to arrange it into columns though so you might do a ng-repeat on rowData, with variable=row, and in TR TD tags show row.1
eg something like ..
<tr ng-repeat="row in rowData">
<td>{{row.1}}</td>
<td>{{row.2}}</td>
</tr>

Related

Dynamically adding / removing columns

I use datatables 1.10 for a while now, and I have come to a point in my development where I have a table in my db that stores a json object. Furthermore that table also contains an attribute called groupName. As the name suggests, the entries of that table are "grouped" by that attribute, and in that group, the json object has the same attributes.
Here an example of how my database table looks like:
+---------------------------------------------------------------------------+
|id|groupname |json |
+---------------------------------------------------------------------------+
|01|group1 |{"key1":"value1","key2":"value2"} |
|02|group1 |{"key1":"foo","key2":"bar"} |
|03|group2 |{"kex1":"foo1","keyab":"bar2","key1":"foo"}|
+---------------------------------------------------------------------------+
My page that contains the datatabase, and also has a dropdown menu populated with the group names which filters the the datatable for the particular group. The jsonObject of that filtered group is being displayed as a raw json string.
What I'm trying to do now is to parse my jsonObject, get the keys and populate them in the datatable as columns. The values of the jsonObject are displayed in the columns accordingly.
Where or how do I reinitialize the datatable, providing it with the proper column names?
Can you please share some example of your JSON object.
Thanks!
Any ways what you can do is to to take the keys of the json object and put them into array then using loop you can make a string of columns. Then you can provide an id to of the table and append the string into the table.
let keys = Object.keys(YOUR_JSON_OBJECT);
let text = "";
for(let i =0;i<keys.length;i++){
text+= ["<tr>","<td>",YOUR_JSON_OBJECT.its_key,"</td>","</tr>"].join("");
}
$('table thead').html(text);
See if this works!

How do I get the column following a particular column?

I have a column and I'd like to get the column following that particular column.
nhood,column,variablecolumn
Treasure Island,3,5
McLaren Park,1,2
Tenderloin,28,112
Lakeshore,14,8
Chinatown,15,103
I know the name of the second column, but in my dataset the name of the third column changes.
I tried variants on this idea. I'm trying to get the number "5" from the first row.
parseFloat(data[1]["column"+1]);
parseFloat(data[1]["column"]+1);
Another idea is to create an array with the column names, pull the index for "column" and then use index + 1 when I pull the data in that particular command.
Got it. Like mentioned, you can turn the column names into an array and then pull the index for a particular array. In this case, you can use col as a stand-in for the variablecolumn name.
var valueKey = data.columns;
var col = valueKey[valueKey.indexOf(dataset)+1];

tabulator adding "numrow" once data were pulled

I've a table of unknown data (some columns and rows ) ,I'm at the point where i require to use the function table.updateData() which requires column id to be existing within the data construction which i can't guarantee as the data are pulled from an unknown source .
is there's a way around this or is there's any alternative way of updating the data later ?
p.s. i only use vanilla javascript not jquery
There needs to be a unique index set on each row of the data in order for Tabulator to know which row you want to refer to.
You can set this to any column field in the row data using the index option in the table constructor
var table = new Tabulator("#example-table", {
index:"age", //set the index field to the "age" field.
});
By default this is set to the id filed
If you want to set this locally you can use a mutator to create a value in this field for you:
//define variable to count index's to ensure they are unique
var index = 0;
//define custom mutator
var idMutator = function(value, data, type, params, component){
//value - original value of the cell
//data - the data for the row
//type - the type of mutation occurring (data|edit)
//params - the mutatorParams object from the column definition
//component - when the "type" argument is "edit", this contains the cell component for the edited cell, otherwise it is the column component for the column
return index++; //return the index for the row.
}
//column definition
{field:"id", mutator:idMutator, visible:false}
However if you are updating the data from a remote source then there is no wat to tie that back to the data in your table.
It is standard practice to include an index or unique identifier in the data of this sort to allow syncing between client and server side

Inserting a variable as an sqlite column name using Javascript?

Is it possible to insert a variable name into sqlite table as a column name? Questions is an array of objects. The goal is to grab the title property of each object and insert that as a column name.
db.serialize(() => {
db.run("CREATE TABLE assessmentTable (test TEXT)");
for(const q of questions){
db.run("ALTER TABLE assessmentTable ADD VALUES(?)", q.title);
}
});
I don't see a problem with that. Try replacing the quotes with back ticks so you can use the alter table statement as a template, then have it evaluate ${q.title} for column name. You may need to pass a definition for the table as well, not sure if that's required or not on sqlite3.
...
for(const q of questions){
db.run(`ALTER TABLE assessmentTable ADD ${q.title}`);
}
...

JavaScript table rows - Remove, sort via array, place back in at correct positions

I'm making a basic web application for my workplace, where a PHP script retrieves thousands of rows from an sql database, and places the data in a JavaScript object for me to control on the front end.
I've managed to make all of the above, no problem.
There are a few thousand rows in the HTML table (containing the results).
The JavaScript script dynamically changes the class of the individual s, depending on what 'column' they're in.
I can retrieve all of the 's with a particular class name, no problem, and then store the innerHTML of each of the s within an array, and sort it but how can I then remove the rows they're in from the table, sort the rows relative to the s innerHTML, then place the rows back in the table?
Again, I know how to retrieve the relevant s data, sort the data whilst also sorting where the rows should be placed (using another array) - But how can I use this array, that holds the rows 'NEW' positions, and actually apply it to the table?
I want to make this all using just JavaScript - I'd rather not use JQuery. If you remove an element from its parent element - will the child element that was removed actually destroy, or could I remove all rows from the table, sort them, then just place them back in ?
Silly question! I just wasn't brave enough to attempt it.
ANSWERED BY MYSELF.
Here's the function I made:
Where table points towards the table element, className is the class of the td you wish to sort the rows by, and ascending is a boolean variable (true / false):
function sortRows(className,ascending)
{
var rows = table.getElementsByTagName('tr');
var elements = [];
// PLACE ROW ELEMENTS IN AN ARRAY, AS .getElements RETURNED ARRAYS CAN'T BE SORTED
for(r=2;r<rows.length;r+=1){elements.push(rows[r]);}
elements.sort(function(a,b){
// SORT FUNCTION
var x = a.getElementsByClassName("name")[0].innerHTML; // VALUE IN 'NAME' <td> OF ROW A
var y = b.getElementsByClassName("name")[0].innerHTML; // VALUE IN 'NAME' <td> OF ROW B
var c = a.getElementsByClassName(className)[0]; // VALUE IN className <td> OF ROW A
var d = b.getElementsByClassName(className)[0]; // VALUE IN className <td> OF ROW B
if(c){e = c.innerHTML;} // MAKE SURE VALUE EXISTS IN DYNAMIC className CLASSED <td> A
if(d){f = d.innerHTML;} // MAKE SURE VALUE EXISTS IN DYNAMIC className CLASSED <td> B
if(isNaN(e)+isNaN(f)) // CHECK IF EITHER THE FIRST OR SECOND DYNAMIC VALUES ARE TEXT - IF SO, SORT ALPHABETICALLY
{
e=e.toLowerCase();
f=f.toLowerCase();
if(ascending==1){return(([e,f].sort().reverse()[0] == e)*2-1)}else {return(([e,f].sort()[0] == e)*2-1)}; // IF SO, SORT ALPHABETICALLY ascending OR descending
}
else if(e==f) // IF VALUES ARE real VALUES, AND BOTH THE SAME, SORT BY 'NAME' <td> OF ROWS A AND B
{
return(([x,y].sort().reverse()[0] == x)*2-1);
}
else if(ascending){return e-f;}else{return f-e;} // ELSE, SORT BY VALUES IN DYNAMICALLY RETRIEVED <td> FOR A AND B
}
);
// REMOVE ELEMENTS FROM TABLE
for(e=0;e<elements.length;e+=1)
{table.removeChild(table.childNodes[2]);}
// PLACE ELEMENTS BACK IN, ORDERED
for(r=0;r<elements.length;r+=1)
{table.appendChild(elements[r]);}
}

Categories