JavaScript - Reading Json Help

Hi,
I am a newbie at XML and this issue is proving to be a tough nut to crack for me.
My AJAX query returns me an XML response of the following structure for a query on "ind":
<countries>
<country>
<name>India</name>
<capital>New Delhi</capital>
</country>
<country>
<name>Indonesia</name>
<capital>Jakarta</capital>
</country>
</countries>

How do I transform the XML response into a HTML layout? Particularly, how do I get down to the value at each node?How do I traverse the XML document using JS?

Is this (using XML) better than JSON (other than the obvious platform-independence)? Which is better?

Thanks!

Hello all,
I thought I'd share something that I don't see talked about much on the forums.
I've been doing a bunch of AJAX development at work. We're really strapped for processing speed on our client (we build the machines our clients use) and therefore we've needed to find ways of speeding everything up.

One of the things we decided on within the first week of our current project was to completely scrap XML in favor of JSON for sending data back and forth. JSON is JavaScript Object notation. Many of you have already seen it, it looks like this:

Code:

{'prop1' : 'someValue', 'prop9' : 5};

That defines an object with 2 properties, prop1 and prop9, with the respective values "someValue" and 5. Compare that to XML:

Code:

<obj>
  <prop1 value="someValue" type="String" />
  <prop2 value="5" type="Integer" />
</obj>

That's a bit more bloated, maybe not too noticeable, but the example is a small one. If you take large amounts of data, and multiple objects, XML can get incredibly bloated, and bloat on the wire slows down your app. That's the first reason we switched.

The second reason we switched is that we save time on the processing. We all know what it's like to get at XML data. Import the document, get the node, get the value, get the next node, get the value. And building XML documents can take just as long: Create document, create root node, create node, create attribute node, set value, append child, repeat... All that processing for something so simple.

JSON on the other hand is a subset of javascript, so check this out.

Code:

var data = "{'prop1':'someValue', 'prop2':5}";
var obj = eval("(" + data + ")");
alert(obj.prop1); // *** Alerts 'someValue' ***

The string fits right into JavaScript in one function call. Granted, eval can be expensive, but if you test this out yourself, it's far cheaper than building and deconstructing XML in the JavaScript engine.

There are 2 simple JSON parsing libraries that we use in development: JSON.php and json.js; these provide the necessary functions to serialize any PHP object into JSON, and serialize any JavaScript object into JSON. You can get them at the links below. We are also following the specification for JSON-RPC, defined in the last link below.

We found this to be incredibly fast when compared to XML, and we haven't regretted it yet. Granted, we're not doing full blown web services where the the javascript modifies itself based on the service's self-definition, complete with namespaces and function signatures, but we transfer a lot of data quickly and efficiently to provide our users with the best experience possible.

I recommend examining this further if you do AJAX development. Hopefully this helped somebody.

http://json.org/
http://mike.teczno.com/json.html
http://json-rpc.org/

And now for the "VS" part of this post: Anyone with experience in using both XML and JSON that wants to argue the mertis of either technique? I support JSON for almost all AJAX applications currently. I haven't found a good reason to use XML, and the negatives for using XML (bloat and processing speed) have currently knocked it completely from my "viable options" list. Anyone care to discuss?

I am having an issue reading from a div that is being changed. The div in question was initially empty. A function that was called upon the selection of something in the drop down list creates another drop down list within that div (sets the inner html). Now, I have another function that needs to read from this new drop down list. However, when I use alert(document.getelementbyid('divid').innerhtml) in the function it returns undefined. The drop down list is created successfully and populated by the relevant data. The method of creation was calling another php file that created the list after querying a database. Any ideas? I can post the code if it will help.

Dear frnd I wanna read on html page , and i have script :

"
[I]<html>
<head>
<script type="text/javascript" language="javascript">
function Read()
{

var Scr = new ActiveXObject("Scripting.FileSystemObject");
var CTF = Scr .OpenTextFile("C:\\123.txt", 1, true);
data = CTF .ReadAll();
document.write("<pre>" + data + "</pre>");
CTF .Close();
}

</script>

</head>

<body onLoad="Read()" >
</body>
</html>
[I]
"

But as its using activex control not allowing in all browser .

Have you any other way with pure js to read the file contains ? or allowing activex in all browser ?

i am thinking of using a xml file as a data base

for example , the xml file stores a list of reference numbers which is allocated to a url or a name such as 0123456789

and i have a text box on a webpage and the user types in a reference number and the javascripts reads the xml file to check if its a valid reference number i.e a registered number

i am new to working with xml etc... so would be nice to have a little help here

EXAMPLE

<DATA>
<REF>
<0123456789>JOE</01234567890>
<1111111111>www.google.com</1111111111>
</REF>
</DATA>

id like it to read the specific data thats contained within the tag such as 0123456789's tag = JOE

Hi,

ive just been debugging my script in IE, and came across this:

Code:

OrbitTool.prototype.handleMouseUp = function(e) {
  if (e.button == g_o3d.Event.BUTTON_LEFT) {
    this.mouseLeftDown = false;
  } else if (e.button == g_o3d.Event.BUTTON_MIDDLE) {
    this.mouseMiddleDown = false;
  }
};

its giving me an error on the second line, the error reads ('button' is null or not an object). does anyone know why this might be? im not a pro with javascript so my knowledge only stretches so far.

Simon
Reply With Quote

I am trying to make a simple alert come up stating a checkbox is checked when it changes, and then another alert for when the checkbox is unchecked.

Problem is, only the alert for when the box is checked is coming up.

Anyone know why?

Code:

function displayCheckPopUp()
{
	if(document.activeElement.checked=true)
	{
		alert("A check box has been selected");
	}
	else if(document.activeElement.checked=false)<!--if(document.getElementById().checked=false)-->
	{
		alert("****");
	}
}

Code:

<input type="checkbox" name="Checkbox 1" value="Checkbox 1" id="first_cbox" onchange="displayCheckPopUp(this)" /> <p class="custom_style2"> Checkbox 1 </p>

hi Guys ,

I have some instructions in property files , now I wat to retrive that fmt tag values in scriptlets So that I can modify the content in property file
So i have written the code in jsp as

<c:set var="mailBodyData" value='<fmt:message key="confirmemail.body.message"/>' scope="request"/>
<%
out.println("hero "+request.getAttribute("mailBodyData")); %>

but its displays empty ,

Also I have tried as

<% String str ="<fmt:message key="confirmemail.body.message"/>' %>

but its throughs the Compilation error , Pls help , So that I can retrive the data from fmt to Scriptlets

hi,
(JAVASCRIT)
the actual program reads and prints values from a checkbox tree and this piece of code does it.
Code:

dhtmlXTreeObject.prototype.getAllChecked=function(){
 return this._getAllChecked("","",1);
}
 
 dhtmlXTreeObject.prototype.getAllCheckedBranches=function(){
 return this._getAllChecked("","",0);
}
 
 
 dhtmlXTreeObject.prototype._getAllChecked=function(htmlNode,list,mode){
 if(!htmlNode)htmlNode=this.htmlNode;
 if(((mode)&&(htmlNode.checkstate==1))||((!mode)&&(htmlNode.checkstate>0))){if(list)list+=","+htmlNode.id;else list=htmlNode.id;}
 var j=htmlNode.childsCount;
 for(var i=0;i<j;i++)
{
 list=this._getAllChecked(htmlNode.childNodes[i],list,mode);
};
 if(list)return list;else return "";
};

the values are returned to alertbox.
Code:

<a href="javascript:void(0);" onclick="alert(tree2.getAllChecked());">Get list of checked</a><br><br>

kindly help me with reading the returned values in to an array or list (but bot in alertbox) ...so that i can pass them to next JSP page.

waiting for ur answer,
BeanBoy !

Hi All,

Im trying to write a html with javascript page that reads values from an XML file and outputs to a table. Thats easy i hear you say?

Trouble is the application that is outputing the XML file doesnt output a simple XML file.

Below is a section of the file:
Code:

<?xml version="1.0" encoding="UTF-8"?>
<CVES name="EUREX" datetime="09 Aug 10 14:40:41">
<thread name="DB 0" state ="active" nb="0" tempo="00:00:02" action="Wait"/>
<thread name="DB 1" state ="active" nb="0" tempo="00:00:02" action="Wait"/>
<thread name="match" state ="active" nb="0" tempo="00:00:02" action="Wait"/>
<MatchingList>
	<Tickets value="142"/>
	<TicketsCleared value="23"/>
	<TicketsNotCleared value="119"/>
	<Orders value="21"/>
	<OrdersCleared value="21"/>
	<OrdersNotCleared value="0"/>
</MatchingList>
<thread name="exch 1" state ="active" nb="0" tempo="00:00:10" action="Wait"/>
<Exchange>
	<Tickets value="142"/>
	<TicketsWithUnknownExternalCodes value="212"/>
	<ClearingInProgress value="4"/>
	<Clearing>
		<AverageClearingTime value="00:00:00"/>
		<LastClearingTime value="14:26:37"/>
		<LastUnclearingTime value="14:27:55"/>
		<TotalQtyCleared value="705"/>
		<TotalQtyUnCleared value=""/>
	</Clearing>
	<Reading>
		<LastReadingTime value="14:40:31"/>
		<NextReadingTime value="14:41:00"/>

im able to read the contents of the CVES tag (Name and datetime) but cannot get any others to load.

how can i get details from LastReadingTime? Thread name="Exch 1"

Having googled reading XML into HTML file and cannot find anything that covers this kind of xml file

THanks

hey guys im trying to create this script which will show array depending on what option has been selected on the select box...but the only thing being returned is "unidentified"....can anyone explain where i am going wrong please...thank you

Code:

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="/ajax/jquery/libary/jquery.js"></script>
</head>
<body>
<?php 
$game_type = array();
$division  = array();

if ($_POST['game'] == 1)
{
	$game_type[] = array('value' => '1',
		                 'text' => 'TDM'
	);
	
	$game_type[] = array('value' => '1',
		                 'text' => 'CTF'
	);
	
    $division[] = array('value' => '1',
		                 'text' => 'Divison 1'
	);
}
elseif ($_POST['game'] == 2)
{
	$game_type[] = array('value' => '1',
		                 'text' => 'CTF'
	);
	
    $division[] = array('value' => '1',
		                 'text' => 'Divison 2'
	);
}

json_encode($game_type);
json_encode($division);
?>
<form>
<script>	
$(document).ready(function(){
	$("select#game").change(function(){

		var post_string = "game=" + $(this).val();
		
		$.ajax({
			  type: 'POST',
			  data: post_string,
			  cache: false,
			  dataType: 'json',
			  url: 'json.php',
			  timeout: '2000',
		        error: function() {
		        	alert("Error has occured");
		        },
			  success: function(data) {
		        	$.each(data, function(i, j){    
		        		var row = "<option value=\"" + j.value + "\">" + j.text + "</option>";
						$(row).appendTo("select#sub_category");
          
			     });   
			  }
	      });
	});
});

//$('#game_type').html('<input type=\"checkbox\" value=\"test\" /> TDM'); 
//$('#division').html('<input type=\"checkbox\" value=\"test\" /> Division 1'); 
</script>
<select name="game" id="game">
	<option value=""></option>
	<option value="1">Counter Strike</option>
	<option value="2">COD</option>
</select>

<div id="game_type">
</div>
<div id="division">
</div>
<select name="sub_category" id="sub_category">
	<option value="">-- Select First Value --</option>
</select>
</form>

</body>
</html>

I am making a dynamic google map and need to pass in a JS Object that has latitude, longitude, address, name, and a link. The JS Object will be getting those values from a DB and may have up to 15 recordsets. I need to know how to separate that out into it's entities to include in the Map API regardless of how many recordsets there are.

Hi

I have some JSON strings and I want to embed it into my website. The problem is that I don't know how to parse JSON string data into html code. After a long search it seem that there is just a few references and manuals about JSON.

Could someone explain to me how to use this function and also with as many examples as possible for understanding, how to put it into html page.

Thank You

I'm trying to get a return of
Code:

[
   ["red","green","blue"]
   ,["blue","red","green"]
]

from a text file that contains
Code:

red,green,blue
blue,red,green

Using the following function
Quote:
Originally Posted by Old Pedant
Code:

function WRITE_FILE_AS_JSON(file)
 {
  fso = Server.CreateObject("Scripting.FileSystemObject");
  myPath=Server.MapPath("timecards/" + file);
  if(!fso.FileExists(myPath))return;
  myfile = fso.OpenTextFile( myPath, read);
  var lines = myfile.readAll().split("\n");
  Response.Write("[\n");
  for ( var i = 0; i < lines.length; ++i )
  {
      Response.Write('   ' + (i >0 ? ',' : '' ) + '["' + lines(i).replace(/\,/g,'","') + '"]\n');
  }
  Response.Write("]\n");
  myfile.Close();
  Response.End();
 }

The darn thing keeps returning Quote:
500 (Internal Server) Error
as a result of the line Response.Write(' ' + (i >0 ? ',' : '' ) + '["' + lines(i).replace(/\,/g,'","') + '"]\n');
And I don't know how to fix that line...

I've been using the JSON.stringify method to convert my JSON object to a string to pass via AJAX but I've read now that it is not supported in most browsers. What then should I use?