Loop performance converting XML to JSON in JavaScript - javascript

I am encountering a performance issue trying to fill in a grid with some data from a webservice.
Thanks to the Timeline analyzer from Chrome, I have found the function wich is causing my performance issue. It's due to a loop to get all the data from an xml and converting it into a JSON.
I've tried different loop (each, for, while) expecting improvement but didn't find better than each.
Here is an example of the xml with one child (but in my case there can be 10000 childs):
<DockDistrSearchOutput>
<groupRecord>
<uniqueIdentifier><![CDATA[KP789281]]></uniqueIdentifier>
<supplierCode><![CDATA[10003]]></supplierCode>
<supplierDescription><![CDATA[GROSFILLEX]]></supplierDescription>
<supplierCommercialContractCode><![CDATA[CTCOM01]]></supplierCommercialContractCode>
<supplierCommercialContractDescription><![CDATA[STANDARD EN EURO]]></supplierCommercialContractDescription>
<supplierAddressChainCode><![CDATA[1]]></supplierAddressChainCode>
<supplierAddressChainDescription><![CDATA[FIL1]]></supplierAddressChainDescription>
<articleCode><![CDATA[13A42001]]></articleCode>
<articleDescription><![CDATA[Banane]]></articleDescription>
<logisticVariantCode><![CDATA[2]]></logisticVariantCode>
<logisticVariantDescription><![CDATA[VL0 BANANE C G100]]></logisticVariantDescription>
<weightFactor><![CDATA[0]]></weightFactor>
<purchasePricePerKilo><![CDATA[13]]></purchasePricePerKilo>
<amount><![CDATA[0]]></amount>
<startDate><![CDATA[2016-07-29]]></startDate>
<endDate><![CDATA[2016-07-31]]></endDate>
<crossDockDiscount />
<crossDockMargin />
<extraMargin><![CDATA[3]]></extraMargin>
<listPrice />
<costPriceRD />
<oldSupplierCode><![CDATA[10003]]></oldSupplierCode>
<oldSupplierCommercialContractCode><![CDATA[CTCOM01]]></oldSupplierCommercialContractCode>
<oldSupplierAddressChainCode><![CDATA[1]]></oldSupplierAddressChainCode>
<oldArticleCode><![CDATA[13A42001]]></oldArticleCode>
<oldLogisticVariantCode><![CDATA[2]]></oldLogisticVariantCode>
<oldStartDate><![CDATA[2016-07-29]]></oldStartDate>
<oldEndDate><![CDATA[2016-07-31]]></oldEndDate>
</groupRecord>
</DockDistrSearchOutput>
And here is the loop used to get the data (15900ms for my test case) :
function getDataFromXml(xml){
var data = [];
$(xml).children().each( function (index) {
uniqueNumber++;
var recStatus = ORIGINAL;
if(this.getAttribute("recordState")!=null){
recStatus = this.getAttribute("recordState");
}
this.setAttribute("recordState", recStatus);
this.setAttribute("lineNumber", uniqueNumber);
var record = [];
if(this.getAttribute("checkedLine") == "true"){
record["checkedLine"] = true;
}else
record["checkedLine"] = false;
// Build the array by reading XML Tagname/value
record["id"] = "ID"+uniqueNumber;
$(this).children().each(function () {
record[this.tagName] = this.text;
});
record["recordState"] = recStatus;
record["rowXML"] = this;
data.push(record);
record = null;
recStatus = null;
});
return data;
}
Here are other try to get the data faster:
function getDataFromXml(xml){
var data = [];
$(xml).children().each( function (index) {
uniqueNumber++;
var recStatus = ORIGINAL;
if(this.getAttribute("recordState")!=null){
recStatus = this.getAttribute("recordState");
}
this.setAttribute("recordState", recStatus);
this.setAttribute("lineNumber", uniqueNumber);
var record = [];
/* First try
var a = $(this).children();
var l = a.length;
while(l--){
record[a[l].tagName] = a[l].text;
}*/
//Second try
var tmp = "{", cur = null;
for(var i =0, ln=this.childElementCount; i<ln;++i)
{
cur = this.children[i];
tmp += '"'+cur.tagName+'":"'+cur.text.replace('"', '')+'",';
}
tmp +='}';
tmp = tmp.replace(',}', '}');
record=JSON.parse(tmp);
if(this.getAttribute("checkedLine") == "true"){
record["checkedLine"] = true;
}else
record["checkedLine"] = false;
// Build the array by reading XML Tagname/value
record["id"] = "ID"+uniqueNumber;
record["recordState"] = recStatus;
record["rowXML"] = this;
data.push(record);
tmp = null;
cur = null;
record = null;
recStatus = null;
});
return data;
}
A try with only JavaScript (9600ms in my test case):
function getDataFromXml(xml){
var data = [];
var a = xml.getElementsByTagName("groupRecord");
var l = a.length;
while(l--){
uniqueNumber++;
var recStatus = ORIGINAL;
var groupRec = a[l];
if(groupRec.getAttribute("recordState")!=null){
recStatus = groupRec.getAttribute("recordState");
}
groupRec.setAttribute("recordState", recStatus);
groupRec.setAttribute("lineNumber", uniqueNumber);
var record = [];
var b = groupRec.childNodes;
var j = b.length;
while(j--){
record[b[j].tagName] = b[j].text;
}
if(groupRec.getAttribute("checkedLine") == "true"){
record["checkedLine"] = true;
}else
record["checkedLine"] = false;
// Build the array by reading XML Tagname/value
record["id"] = "ID"+uniqueNumber;
record["recordState"] = recStatus;
record["rowXML"] = groupRec;
data.push(record);
tmp = null;
cur = null;
record = null;
recStatus = null;
groupRec = null;
}
return data;
}
If someone has any advice to increase the performance of my loop?
Thanks in advance!
Edit: Thanks to Jaromanda X I have improved the performance by using only JavaScript.

Related

Issues with google

Is it possible, depending on the environment of the company, that some features of Google are non-existent? I tried some functions with my personal email and it works; but, in a professional environment it doesn't work.
function getDataForSearch() {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const ws = ss.getSheetByName("PEP FORMULAR");
return ws.getRange(6, 1, ws.getLastRow()-1, 6).getValues();
}
var data;
function setDataForSearch(){
google.script.run.withSuccessHandler(function(dataReturned){
data = dataReturned.slice();
}).getDataForSearch();
}
function search(){
var searchInput = document.getElementById("searchInput").value.toString().toLowerCase().trim();
var searchWords = searchInput.split(/\s+/);
//var searchColumns = [0,1,2,3,4,5];
var searchColumns = [0];
//and
var resultsArray = searchInput == "" ? [] : data.filter(function(r){
return searchWords.every(function(word){
return searchColumns.some(function(colIndex){
return r[colIndex].toString().toLowerCase().indexOf(word) != -1;
});
});
});
var searchResultsBox = document.getElementById("searchResults");
var templateBox = document.getElementById("rowTemplate");
var template = templateBox.content;
searchResultsBox.innerHTML = "";
resultsArray.forEach(function(r){
var tr = template.cloneNode(true);
var typeInitiativeColumn = tr.querySelector(".type-initiative");
var pepRefColumn = tr.querySelector(".pep-ref");
var projectNameColumn = tr.querySelector(".project-name");
pepRefColumn.textContent = r[0];
typeInitiativeColumn.textContent = r[2];
projectNameColumn.textContent = r[5];
searchResultsBox.appendChild(tr);
});
}
This code works but, when I try to reproduce it in a professional environment, the function setDataForSerach() is not able to get the data from the function getDataForSearch() and make a copy.

Array doesent update values

I want my array to be updated as soon as I run the replace function. What actually happens is that all the elements of my array get deleted here is the code:
var Person = [];
var editPersonId = 0;
var Details = [];
function AddPerson() {
this.Details[0] = document.getElementById("fname").value;
this.Details[1] = document.getElementById("lname").value;
this.Details[2] = document.getElementById("age").value;
this.Details[3] = document.getElementById("mobil").value;
this.Details[4] = document.getElementById("adress").value;
Person.push(this.Details);
}
function Clear(){
document.getElementById("fname").value = "";
document.getElementById("lname").value = "";
document.getElementById("age").value ="";
document.getElementById("mobil").value = "";
document.getElementById("adress").value = "";
}
function ShowContacts(){
var testIt= document.getElementById("search").value;
var i=0, k=0, indx=[], msg;
for ( i=0; i < Person.length; i++)
{
for ( k=0; k<=4; k++)
{
if (Person[i][k] === testIt)
{
document.getElementById("newFname").value = Person[i][0];
document.getElementById("newLname").value = Person[i][1];
document.getElementById("newAge").value = Person[i][2];
document.getElementById("newMobil").value = Person[i][3];
document.getElementById("newAdress").value = Person[i][4];
console.log(1);
editPersonId = i;
break;
}
}
}
}
function Replace(){
Person[editPersonId][0] = document.getElementById("newFname").value;
Person[editPersonId][1] = document.getElementById("newLname").value;
Person[editPersonId][2] = document.getElementById("newAge").value;
Person[editPersonId][3] = document.getElementById("newMobil").value;
Person[editPersonId][4] = document.getElementById("newAdress").value;
}
function Run(){
this.AddPerson();
this.Clear();
}
You override the contents of your Person insde of replace().
Person[editPersonId][0] = ...
While editPersonId is 0, means that the item you inserted in AddPerson will be overriden. And before replace(), you run clear(), which empties your inputs. So the elements don't get 'deleted', you replace them with an empty string.
You might wanna look into this article

Google spreadsheet custom function returns nothing

I have a problem debugging the code. It's working if I define values by myself instead of taking it from properties and spreadsheet. I am new to JavaScript so it can be really basic error.
What I am trying to do with this function:
Taking name of person, date and name of school from the spreadsheet
Getting arrays data from the properties that was saved with other function. The saving line in that function looks like this:
PropertiesService.getScriptProperties().setProperty('Mokyklo‌​s', JSON.stringify(Mokyklos));
It's 6 arrays of full names, array of date, array of school names and array of numbers. The numbers array is used to return the answer.
function ApmokMokMokykloje(mokytojas, data, mokykla) {
Utilities.sleep(Math.random() * 1000);
var MokytojaiL = PropertiesService.getScriptProperties().getProperty('MokytojaiL');
var Mokytojai1 = PropertiesService.getScriptProperties().getProperty('Mokytojai1');
var Mokytojai2 = PropertiesService.getScriptProperties().getProperty('Mokytojai2');
Utilities.sleep(Math.random() * 1000);
var Mokytojai3 = PropertiesService.getScriptProperties().getProperty('Mokytojai3');
var Mokytojai4 = PropertiesService.getScriptProperties().getProperty('Mokytojai4');
var Mokytojai5 = PropertiesService.getScriptProperties().getProperty('Mokytojai5');
Utilities.sleep(Math.random() * 1000);
var Datos = PropertiesService.getScriptProperties().getProperty('Datos');
var Mokyklos = PropertiesService.getScriptProperties().getProperty('Mokyklos');
var ApmokMokSkaiciai = PropertiesService.getScriptProperties().getProperty('ApmokMokSkaiciai');
var mokytojaiL = MokytojaiL;
mokytojaiL = JSON.parse(mokytojaiL);
var mokytojai1 = Mokytojai1;
mokytojai1 = JSON.parse(mokytojai1);
var mokytojai2 = Mokytojai2;
mokytojai2 = JSON.parse(mokytojai2);
var mokytojai3 = Mokytojai3;
mokytojai3 = JSON.parse(mokytojai3);
var mokytojai4 = Mokytojai4;
mokytojai4 = JSON.parse(mokytojai4);
var mokytojai5 = Mokytojai5;
mokytojai5 = JSON.parse(mokytojai5);
var datos = Datos;
datos = JSON.parse(datos);
var mokyklos = Mokyklos;
mokyklos = JSON.parse(mokyklos);
var skaicius = ApmokMokSkaiciai;
skaicius = JSON.parse(skaicius);
for(var i = 0; i < mokyklos.length; i++) {
if(data==datos[i] && mokykla==mokyklos[i]) {
if ((mokytojas==mokytojaiL[i]) || (mokytojas==mokytojai1[i]) || (mokytojas==mokytojai2[i]) || (mokytojas==mokytojai3[i]) || (mokytojas==mokytojai4[i]) || (mokytojas==mokytojai5[i])) {
return skaicius[i]; // returns blank
}
}
}
}
The code below works fine.
function testas3(mokytojas, data, mokykla) {
// the same values from spreadsheet
var datapvz="2017-11-04T22:00:00.000Z";
var mokyklapvz="Zalioji mokykla";
var mokytojaspvz="Penivilas Gremlinavičius";
// the same values from properties
var datos = [];
datos[0]="2017-11-08T22:00:00.000Z";
datos[1] = "2017-11-15T22:00:00.000Z";
datos[2] = "2017-11-11T22:00:00.000Z";
datos[3] = "2017-11-03T22:00:00.000Z";
datos[4] = "2017-11-04T22:00:00.000Z";
var mokyklos = [];
mokyklos[0] = "Mokykla nuostabioji";
mokyklos[1] = "Mylimiausioji mokyklele";
mokyklos[2] = "Dar viena mokyykla";
mokyklos[3] = "Raudonoji";
mokyklos[4] = "Zalioji mokykla";
var mokytojaiL = [];
mokytojaiL[0] = "Cristopher Rangel";
mokytojaiL[1] = "Alessandra Knox";
mokytojaiL[2] = "Germtautas Falalavičius";
mokytojaiL[3] = "Lenkgaudė Trikojytė";
mokytojaiL[4] = "Penivilas Gremlinavičius";
var mokytojai1 = [];
mokytojai1[0] = "Mantvydas Špukys";
mokytojai1[1] = "Išeikbaida Visursėkmytė";
mokytojai1[2] = "Svaidgaudė Praperduvienė";
mokytojai1[3] = "Mantvinas Žirgmyla";
mokytojai1[4] = "Mantvinas Žirgmyla";
var mokytojai2 = [];
mokytojai2[0] = "Griovbaida Nepriteklytė";
mokytojai2[1] = "Išeikbaida Visursėkmytė";
mokytojai2[2] = "Griovbaida Nepriteklytė";
mokytojai2[3] = "Arjautauta Fragmentavičiutė";
mokytojai2[4] = "Kastuvaldas Parašiutauskas";
var mokytojai3 = [];
mokytojai3[0] = "Rustautas Celiulionis";
mokytojai3[1] = "Androbauda Parankpapaitė";
mokytojai3[2] = "Arjauvilė Katrakojytė";
mokytojai3[3] = null;
mokytojai3[4] = "Rustautas Celiulionis";
var mokytojai4 = [];
mokytojai4[0] = null;
mokytojai4[1] = null;
mokytojai4[2] = null;
mokytojai4[3] = "Arjauvilė Katrakojytė";
var mokytojai5 = [];
var skaicius = [];
skaicius[0]="99";
skaicius[1]="98";
skaicius[2]="87";
skaicius[3]="89";
skaicius[4]="89";
for(var i = 0; i < mokyklos.length; i++) {
if(datapvz==datos[i] && mokyklapvz==mokyklos[i]) {
if ((mokytojaspvz==mokytojaiL[i]) || (mokytojaspvz==mokytojai1[i]) || (mokytojaspvz==mokytojai2[i]) || (mokytojaspvz==mokytojai3[i]) || (mokytojaspvz==mokytojai4[i]) || (mokytojaspvz==mokytojai5[i]))
{
return skaicius[i]; // returns 89
}
}
}
}
I think the problem is that you're comparing a Date object (from the spreadsheet...e.g., from cell F$1) with a string literal (from your saved JSON object). To make them match, you should call toJSON() on the date object before comparing, like this:
var date = data.toJSON();
for(var i = 0; i < mokyklos.length; i++) {
if(date==datos[i] && mokykla==mokyklos[i]) {
if ((mokytojas==mokytojaiL[i]) || (mokytojas==mokytojai1[i]) || (mokytojas==mokytojai2[i]) || (mokytojas==mokytojai3[i]) || (mokytojas==mokytojai4[i]) || (mokytojas==mokytojai5[i])) {
return skaicius[i];
}
}
}

Process multiple sharepoint list items

in a SharePoint list view I would like to duplicate selected list items. My code works when only one item selected but fails, when more. Debugging the code I see that it goes through all selected items first before calls the success callback. Also within the success callback the currItem not always filled with the item data.
How can I get and process the selected items one-by-one?
function copySelected(){
if($("#copyAllButton").hasClass('ms-cui-disabled')){
return;
}
var cc = null;
var web = null;
copyCounter = 0;
failedCounter = 0;
cc = new SP.ClientContext.get_current();
web = cc.get_web();
var currItem = null;
notifyId = SP.UI.Notify.addNotification(duplicatingItemsNotification, true);
var selectedItems;
currList = web.get_lists().getById(SP.ListOperation.Selection.getSelectedList());
selectedItems = SP.ListOperation.Selection.getSelectedItems();
if( selectedItems.length > 0 ){
for(var i in selectedItems){
//var currItemID = selectedItems[i].id;
currItem = currList.getItemById(selectedItems[i].id);
cc.load(currItem);
cc.executeQueryAsync(function(sender, args){
var itemCreateInfo = new SP.ListItemCreationInformation();
var aListItem = currList.addItem(itemCreateInfo);
aListItem.set_item('Title', currItem.get_item('Title'));
aListItem.set_item('Customer', currItem.get_item('Customer'));
aListItem.set_item('Description', currItem.get_item('Description'));
aListItem.set_item('Source', currItem.get_item('Source'));
aListItem.set_item('field2', currItem.get_item('field2'));
aListItem.set_item('field3', currItem.get_item('field3'));
aListItem.set_item('Workloadtype', currItem.get_item('Workloadtype'));
aListItem.set_item('Tickettype', currItem.get_item('Tickettype'));
aListItem.set_item('Customergroup', currEngineer.group);
aListItem.set_item('Allocation', currEngineer.allocation);
aListItem.set_item('SubCap', currItem.get_item('SubCap'));
aListItem.set_item('Engineer', currEngineer.fullName);
aListItem.update();
cc.load(aListItem);
cc.executeQueryAsync(function(){
copyCounter ++;
},function(){
failedCounter ++;
});
}, Function.createDelegate(this,this.getItemFailed));
}
notifyMe();
}
}
In the meantime I found out the resolution (it was good to rethinking the problem for the question).
I fill an array of the required items with the query then processes the array.
var allSelectedItems;
function copySelected(){
if($("#copyAllButton").hasClass('ms-cui-disabled')){
return;
}
var cc = null;
var web = null;
copyCounter = 0;
failedCounter = 0;
cc = new SP.ClientContext.get_current();
web = cc.get_web();
//var currItem = null;
notifyId = SP.UI.Notify.addNotification(duplicatingItemsNotification, true);
var selectedItems;
currList = web.get_lists().getById(SP.ListOperation.Selection.getSelectedList());
selectedItems = SP.ListOperation.Selection.getSelectedItems();
if( selectedItems.length > 0 ){
allSelectedItems = new Array(selectedItems.length);
for(var i in selectedItems){
allSelectedItems[i] = currList.getItemById(selectedItems[i].id);
cc.load(allSelectedItems[i]);
}
cc.executeQueryAsync(Function.createDelegate(this, this.getItemSucceded), Function.createDelegate(this, this.getItemFailed));
notifyMe();
}
}

parsing xml in javascript

I need to create custom objects based on an XML input, the rule is that for every node if it has a direct child node is named EndNode and the text value of which is 1, then I create a leaf object. So for every node, I need to check the direct child with name EndNode and its value. It's not so easy with the DOM API and DOM selector (in this case I use Ext.DomQuery) doesn't have a way to select direct child of the root node... Below is my attempt for using DOM selector, I need to wrap the node around with another level of the node for the selector to work. But I can't just say new Node(), it silently fails.
I guess I have to walk through n.childNodes, but it is complicated to do it this way to check the rule I described above. Any solution?
Ext.each(node.childNodes, function(n){
if (n.nodeType == this.XML_NODE_ELEMENT) {
var tmp=new Node();
console.log('hi');
tmp.appendChild(n);
console.log(Ext.DomQuery.select(n.tagName+">EndNode", tmp));
}
}
I did an xml parser. It is quite easy with Dojo's library. Here ya are. When you're done with it though I recommend exporting the var to JSON and using it as cache.
dojo.require("dojox.xml.parser");
var parser = dojox.xml.parser;
function crules() {
this.rules = new Array();
this.xml = Object;
}
xml = '';
crules.prototype.load = function(file){
var xmlget = dojo.xhrGet({
url: file,
handleAs: "xml",
load: function(data){
xml = data;
},
error: function (error) {
console.error ('Error: ', error);
},
sync: true
}
);
this.xml = xml;
}
crules.prototype.buildout = function (){
var rules = this.xml.getElementsByTagName('ruleset');
//dojo.byId('jsloading').innerHTML = 'Loading Javascript';
for(var i=0; i<rules.length; i++){
//dojo.byId('jsloading').innerHTML += ' .';
r = new cruleset();
r.name = xtagvalue(rules[i],'name');
base = xtag(rules[i],'base');
textcustom = xtag(rules[i],'textcustom');
r.textcustomy = xtagvalue(textcustom[0],'y');
r.textcustomx = xtagvalue(textcustom[0],'x');
for(var j=0; j<base.length; j++){
r.bases[j] = new cbase();
r.bases[j].imgsrc = xtagvalue(base[j],'imgsrc');
r.bases[j].color = xtagvalue(base[j],'color');
r.bases[j].coloropts = new Array();
var copts = xtag(rules[i],'option');
for(var k=0; k<copts.length;k++){
var cc = new Object();
cc.color = xtagvalue(copts[k],'color');
cc.imgsrc = xtagvalue(copts[k],'imgsrc');
r.bases[j].coloropts.push(cc);
}
}
zones = xtag(rules[i],'zone');
for(var j=0; j<zones.length; j++){
z = new czone();
z.name =xtagvalue(zones[j],'name');
zoneconfigs = xtag(zones[j],'zoneconfig');
for(var n=0; n<zoneconfigs.length; n++){
zc = new czoneconfig();
zc.name = z.name;
zc.x1 =xtagvalue(zones[j],'x1');
zc.y1 =xtagvalue(zones[j],'y1');
zc.w =xtagvalue(zones[j],'w');
zc.h =xtagvalue(zones[j],'h');
hotspots = xtag(zoneconfigs[n],'hotspot');
for(var k=0; k<hotspots.length; k++){
h = new chotspot();
h.name = xtagvalue(hotspots[k],'name');
h.x =xtagvalue(hotspots[k],'x');
h.y =xtagvalue(hotspots[k],'y');
h.nameyoffset = xtagvalue(hotspots[k],'nameyoffset');
h.accessoryonly = xtagvalue(hotspots[k],'accessoryonly');
if(h.accessoryonly == null){
h.accessoryonly = 0;
}
var showname = xtag(hotspots[k],'showname');
if(!isEmpty(showname)){
h.showname = xtagvalue(hotspots[k],'showname');
}
/*h.itemset =xtagvalue(hotspots[k],'itemset');*/
items = xtag(hotspots[k],'item');
if(items){
for(var l=0;l<items.length;l++){
t = new citem();
t.id = xtagvalue(items[l],'id');
h.items[h.items.length] = t;
}
}
zc.hotspots[zc.hotspots.length] = h;
}
z.zoneconfigs[z.zoneconfigs.length] = zc;
}
r.zones[r.zones.length] = z;
}
this.rules[this.rules.length] = r;
}
/*xmltext = parser.innerXML(xml);
dojo.byId('cwindow').innerHTML = xmltext;*/
}
function xtag(e,tag){
var n=null;
n = e.getElementsByTagName(tag);
if(n.length>=1){
return e.getElementsByTagName(tag);
}
else return null;
}
function xtagvalue(e,tag){
var n=null;
n = e.getElementsByTagName(tag);
if(n.length>=1){
//console.log(tag,'here',n[0],parser.textContent(n[0]));
return parser.textContent(n[0]);
}
else return null;
}

Categories