We Keep Coding

jQuery and XML, find object that contains children with multiple specific values

For a project I have data stored in XML like this:
<xml>
<sprites>
<sprite>
<name>Tile1</name>
<lat>1</lat>
<lng>2</lng>
</sprite>
<sprite>
<name>Tile2</name>
<lat>3</lat>
<lng>4</lng>
</sprite>
</sprites>
<xml>
Through jQuery I want to get a tile object that matches two child values, the lat and lng values.
I found this post which was of great help, but sadly it only has an example of how to search for one matching value. Here's the code I have up to now:
// xml stored in 'xml' var
var findLat = 3;
var findLng = 4;
var mapSprites = $(xml).find("sprites");
var getSprite = $(mapSprites).find("sprite").filter(
function() {
return $(this).find('lat').text() == findLat;
},
function() {
return $(this).find('lng').text() == findLng;
}
);
Sadly getSprite is undefined, as I'm guessing you can't use the filter function as I've tried to use it? The example I linked to has one function as filter and seems to work, but comma separating doesn't seem to work as an AND, which is what I need.
The goal is to be able to give the function a lat and lng value and me being able to extract the <name> value.
Would be thankful for a push in the right direction, I'm pretty new to XML and parsing it through jQuery.

filter does not take multiple arguments. So combine it into one using "and".
var findLat = 3;
var findLng = 4;
var mapSprites = $(xml).find("sprites");
var getSprite = mapSprites.find("sprite").filter(
function() {
const node = $(this);
return Number(node.find('lat').text()) === findLat &&
Number(node.find('lng').text()) === findLng;
}
);

Recursive traversal of unknown json object/tree and actions based on returned json

I'm using a API that returns JSON on request. This JSON has either names for next level URL's or a filename.
The problem is that code has to recognize which JSON is returned.
If JSON only has a names for next url levels then create url and get it.
Then recursively get a new set of names or files, recognize and do it over. It can go as menu levels deep as required. 1 to *
If it has a filename it should get it and render it as html.
(This is already solved)
Example of json
{id: 'New_url_1_level_1', id:'New_url_2_level_1', id:'New_url_3_level_1'}
//or
{id:'001200.file.ext',id:'001300.file.ext'...}
These would turn into http://my.api.call.com/New_url_1_level_1.../New_url1_level_2/...
The problem is that how to loop over URL's and to finally get to filename for example:
http://my.api.call.com/New_url_1_level_1/New_url_1_level_2/New_url_1_level_3/001300.file.ext
My current script is:
var json;
var urllevel= '/First_level';
var api = 'http://my.api.call.com';
var re = /^\d+/g; // Regex to match filename (decide if json has filenames or urls; files always start with digits or end with extension)
var loopApiUrl = new Array();
var recursion = false;
// This is the problem - how to recursively build url's based on returned data i.e. traverse a "unknown" tree
function recursePxJson(){
if (!recursion) {
loopApiUrl = [];
}
// Get JSON
$.get(api+urllevel+'/'+loopApiUrl.join('/'),function(data,status){
for (var i in data) {
if (!re.test(data[i].id)) { // {id: 'This_is_to_be_appended_to_url', id:'Another_appendable'}
recursion = true;
loopApiUrl.push(data[i].id);
recursePxJson();
}
else { // {id:'001200.file.ext',id:'001300.file.ext'}
load(api+urllevel+'/'+loopApiUrl.join('/')+'/'+data[i].id);
recursion = false;
}
}
});
//loadDBS(param);
}
// Load renderable JSON - ALREADY SOLVED
function load(param){
$.get(param, function(data, status){
json = JSON.stringify(data);
var title = data.title.split(':');
html = '<h2>'+title[0]+'</h2>';
html += '<h3>'+title[1]+'</h3>';
html += '<h5>Values:</h5>';
for (var i=0; i<data.variables.length; i++) {
html += '<b>'+data.variables[i].text+': </b>';
varlen = data.variables[i].valueTexts.length;
if (varlen > 6) {
html += '<i>'+data.variables[i].valueTexts[0]+', '+data.variables[i].valueTexts[1]+', '+data.variables[i].valueTexts[2]+' . . . '+data.variables[i].valueTexts[varlen-3]+', '+data.variables[i].valueTexts[varlen-2]+', '+data.variables[i].valueTexts[varlen-1]+'</i>'+'<b> (yhteensä '+varlen+' arvoa)</b>';
} else {
html += '<i>'+data.variables[i].valueTexts.join(',')+'</i>';
}
html += '<br/>';
}
$(html+'<br>').appendTo($('#tab2'));
});
}
EDIT: At the moment it seems like it is does each for loop before it begins another. Therefore it starts one in loop and if another is instatiated it won't be run before the fist one is done.
Main loop
Internal Loop 1
Internal Loop 2 <- Isn't this the one that should done first?

Handle your loopApiUrl variable as a parameter for your function recursePxJson().
Get rid of the useless recursion boolean.
You may find it easier to ditch jQuery and make use of a plain old XMLHTTPRequest. Your code will be slightly longer but you'll gain a better control of what your doing.

JSON rows Extracting issue in JavaScript

I have following json data coming from server in which i want to extract LimitClass and LimitClassID and store their values in respective arrays.
{
"ErrorDesc":"",
"ErrorCode":"",
"LimitClassList":"[{\"LimitClass\":\"L16\\n\",\"LimitClassId\":\"32900\\n\"},{\"LimitClass\":\"28febL0\\n\",\"LimitClassId\":\"31901\\n\"},{\"LimitClass\":\"L14\\n\",\"LimitClassId\":\"31900\\n\"},{\"LimitClass\":\"L17\\n\",\"LimitClassId\":\"32950\\n\"},{\"LimitClass\":\"L15\\n\",\"LimitClassId\":\"31950\\n\"},{\"LimitClass\":\"L0\\n\",\"LimitClassId\":\"21901\\n\"},{\"LimitClass\":\"L4\\n\",\"LimitClassId\":\"23000\\n\"},{\"LimitClass\":\"OTC Send\\n\",\"LimitClassId\":\"30901\\n\"},{\"LimitClass\":\"L2\\n\",\"LimitClassId\":\"22900\\n\"},{\"LimitClass\":\"L12\\n\",\"LimitClassId\":\"28900\\n\"},{\"LimitClass\":\"L6\\n\",\"LimitClassId\":\"23900\\n\"},{\"LimitClass\":\"L1\\n\",\"LimitClassId\":\"25900\\n\"},{\"LimitClass\":\"L13\\n\",\"LimitClassId\":\"29900\\n\"},{\"LimitClass\":\"L7\\n\",\"LimitClassId\":\"24900\\n\"},{\"LimitClass\":\"L8\\n\",\"LimitClassId\":\"26900\\n\"},{\"LimitClass\":\"L10\\n\",\"LimitClassId\":\"27900\\n\"},{\"LimitClass\":\"L13\\n\",\"LimitClassId\":\"30900\\n\"},{\"LimitClass\":\"UatTesting123\\n\",\"LimitClassId\":\"32901\\n\"}]"
}
Here is the code I have tried :
var list = data.LimitClassList;
var arrayLimitClass = [];
var arrayLimitClassId = [];
for(var i in list) {
arrayLimitClass.push(list[i].LimitClass);
arrayLimitClassId.push( list[i].LimitClassId);
}
alert(list);
alert(arrayLimitClass);
alert(arrayLimitClassId);
List variable has following result when I alert it:
[{\"LimitClass\":\"L16\\n\",\"LimitClassId\":\"32900\\n\"},{\"LimitClass\":\"28febL0\\n\",\"LimitClassId\":\"31901\\n\"},{\"LimitClass\":\"L14\\n\",\"LimitClassId\":\"31900\\n\"},{\"LimitClass\":\"L17\\n\",\"LimitClassId\":\"32950\\n\"},{\"LimitClass\":\"L15\\n\",\"LimitClassId\":\"31950\\n\"},{\"LimitClass\":\"L0\\n\",\"LimitClassId\":\"21901\\n\"},{\"LimitClass\":\"L4\\n\",\"LimitClassId\":\"23000\\n\"},{\"LimitClass\":\"OTC Send\\n\",\"LimitClassId\":\"30901\\n\"},{\"LimitClass\":\"L2\\n\",\"LimitClassId\":\"22900\\n\"},{\"LimitClass\":\"L12\\n\",\"LimitClassId\":\"28900\\n\"},{\"LimitClass\":\"L6\\n\",\"LimitClassId\":\"23900\\n\"},{\"LimitClass\":\"L1\\n\",\"LimitClassId\":\"25900\\n\"},{\"LimitClass\":\"L13\\n\",\"LimitClassId\":\"29900\\n\"},{\"LimitClass\":\"L7\\n\",\"LimitClassId\":\"24900\\n\"},{\"LimitClass\":\"L8\\n\",\"LimitClassId\":\"26900\\n\"},{\"LimitClass\":\"L10\\n\",\"LimitClassId\":\"27900\\n\"},{\"LimitClass\":\"L13\\n\",\"LimitClassId\":\"30900\\n\"},{\"LimitClass\":\"UatTesting123\\n\",\"LimitClassId\":\"32901\\n\"}]
But I am getting dots (.) when I alert arrayLimitClass and arrayLimitClassId. What am I doing wrong in extracting rows of json Object?

"LimitClassList":"[{\"LimitClass\":\"L1....]"
^ ^
LimitClassList is a string, not an array. Make it so it is an actual array, than your code should work. There should be no reason to have to parse it again.

The value below data.LimitClassList is itself a String containing JSON. You have to decode this first.
var list = JSON.parse( data.LimitClassList );
var arrayLimitClass = [];
var arrayLimitClassId = [];
// ...
This is more or less a workaround. You should have a look at your server code and fix the encoding error there!

Dictionary in JavaScript

Currently I tried to reform my JSON data to a dictionary to store only needed data in an array with key and value.
* Edit to put my full code. *
This is how I do:
var myData = [];
var urlPath = "https://tipjira.pgdev.abcd.com/rest/api/2/search?jql=project=GRIFR14%2Band%2BfixVersion=15018";
var jiraMapping = [];
$.ajax({
url : "http://frparwself22.dhcp.par.abcd.com:8080/jiraproxy/jira?url=" + urlPath,
dataType : 'json',
type: 'GET',
success : function(data) {
for (var i=0; i<data.issues.length; i++) {
var obj = {};
obj[data.issues[i].key] = data.issues[i].self;
jiraMapping.push(obj);
alert(jiraMapping.length);
}
},
error : function() {
alert("Error!")
}
});
alert(jiraMapping.length);
My original data is {issues:[{...,"self":"/rest/api/2/issue/175074","key":"GRIFR14-36",...}, {...,"self":"/rest/api/2/issue/175075","key":"GRIFR14-37",...}, ...]}. And I want to reform to have the array with key and value which are key and self.
So the data in my jiraMapping should be something like [{k1:v1}, {k2,v2}, ...].
But when I tired to print the length of jiraMapping, the length is 0.
I tried to put alert to check key and value that I add to the array and the values exist.
I don't know where is the problem exactly. Please help...

Without knowing exactly what information you're passing in, it's hard to say what's going wrong. That being said, my first guess is that data/myData isn't formatted the way you think. For instance, if myData.issues.length is 0, nothing in the loop will get executed.
There's also a chance that you're never actually running the success function. Could you post some more code?

The problem lies in the data that you are receiving or you have a typo somewhere later when checking length. This all looks fine, and I tried to replicate your problem like this:
var jiraMapping = [];
var myData = [{"A":"a"},{"B":"b"}];
for (var i=0; i<myData.length; i++) {
var obj = {};
obj[myData[i]] = myData[i];
jiraMapping.push(obj);
}
console.log(jiraMapping);
but this works fine, fiddle here: http://jsfiddle.net/GWpBs/2/

issue with array indexing

So I'll jump right to it...
I am a test automation engineer, and I am making a "keyword driven" testing system that is powered with JSON, which tie in with Selenium tests to run on a web browser.
The "keywords" are stored as XML files, and I have a JavaScript function which loads these keywords into an array, and also stores the Index of that keyword. to paf.keywordIndex
Example
$.get("getSteps.php", function(keywords) {
paf.keywords = eval(keywords); // stores into an array...
paf.keywordIndex = -1;
for ( var i = 0 ; i < paf.keywords.length ; i++ ) {
// for each path...
/* alert(paf.keywords[i]); */
$.ajax({url: "./_keywords/" + paf.keywords[i], success: function(xml) {
paf.xml = xml;
paf.keywordIndex++;
var title = $(xml).find("keyword").attr("title");
//var name = $(xml).find("keyword").attr("name");
paf.buffer += ("<option value=\"./_keywords/"+paf.keywords[paf.keywordIndex]+"\">"+title+"</option>");
},
async: false
//cache: false
});
}
$(stepSelectionLocator).html(paf.buffer);
});
getSteps.php is a php service that returns all the xml keywords in a json array. e.g.
["Login.xml","EndSession.xml", "SelectResult.xml", etc...]
Now this function works, but the only problem is, it's not sorted in ANY way. So the output would be -
Login (Login.xml)
Select a result (SelectResult.xml)
End a session (EndSession.xml)
To solve this issue, I added an extra attribute to my <keyword> so now it's <keyword area="basic"> to indicate that this is a basic step. and now my function is -
$.get("getSteps.php", function(keywords) {
paf.keywords = eval(keywords); // stores into an array...
paf.keywordIndex = -1;
for ( var i = 0 ; i < paf.keywords.length ; i++ ) {
// for each path...
/* alert(paf.keywords[i]); */
$.ajax({url: "./_keywords/" + paf.keywords[i], success: function(xml) {
paf.xml = xml;
paf.keywordIndex++;
var title = $(xml).find("keyword").attr("title");
var area = $(xml).find("keyword").attr("area");
//var name = $(xml).find("keyword").attr("name");
paf.buffer.push(area.toUpperCase() + ": " + title);
},
async: false
//cache: false
});
}
paf.buffer.sort(); // array is sorted...
paf.buffer2 = "";
paf.keywordIndex = -1;
for ( var a in paf.buffer ) {
paf.keywordIndex++;
paf.buffer2 += "<option value=\"./_keywords/"+paf.keywords[paf.keywordIndex]+"\">"+ paf.buffer[a] + "</option>";
}
$(stepSelectionLocator).html(paf.buffer2.toString().replace(",", ""));
});
Now the output is
BASIC: End the session (Login.xml)
BASIC: Login (SelectResult.xml)
RESULTS: Select a result (EndSession.xml)
So I've already determined that the index is the issue. However, I cannot figure out a way to fix this..
I am open to alternatives, so if you find a simpler way to index this, please let me know!

First of all, it'd be nice to know exactly the data you get from your initial request.
$.get("getSteps.php", function (keywords) {
paf.keywords = JSON.parse(keywords); // eval is bad! Use JSON.parse instead.
console.log(paf.keywords); // what does it output in the console?
...
Secondly, you can refer to the current index by using just the i variable. If you don't use paf.keywordIndex elsewhere, you can remove it because it's redundant.
Thirdly, are you absolutely, definitely, 100% sure that your ajax requests are *S*ynchronous? If they are not - the responses will arrive at random and the whole thing will require a different approach.
Finally, if you want to apply sorting to your keywords after you got them all, I would recommend pushing them into the buffer array as objects:
buffer.push({
keyword: keywordName, // this is the keyword name
keywordIndex: i, // this is the initial index
keywordArea: areaObtainedFromXML // this is the area you get from xml
});
By using the above approach you will be able to sort your buffer in many ways while retaining the initial order.
Please take a look at a contrived example at this jsfiddle.