Login   Register  
Icontem

File: test_xml_from_file.html

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of MarPlo  >  JS XML to JSON  >  test_xml_from_file.html  >  Download  
File: test_xml_from_file.html
Role: Example script
Content type: text/plain
Description: Example with xml from file
Class: JS XML to JSON
Convert XML documents to JSON format
Author: By
Last change:
Date: 2013-09-30 03:32
Size: 3,408 bytes
 

Contents

Class file image Download 
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example external File with XML to JSON</title>
<script type="text/javascript" src="xml2json.js"></script>
<style type="text/css">
h1 {
  margin:3px auto 8px auto;
  font-size:1.5em;
  text-align:center;
  text-decoration:underline;
}
h4 {
  position: relative;
  margin: 2px auto;
  text-align: left;
}
.code {
  position: relative;
  max-height:500px;
  min-width:28em;
  margin:1em 5px 1.5em 2em;
  background:#fbfbfe;
  border:1px solid #bbb;
  font-size:16px;
  padding:2px 3px 6px 3px;
  color:#0101ff;
  font-weight:800;
  overflow:auto;
  word-wrap:break-word;
}
#jsnstr, #host {
  margin:.35em .4em 1em 2em;
  max-height:500px;
  background:#ffc;
  border:1px solid #dadada;
  padding:.4em .5em;
  color:#333;
  font-weight:800;
  overflow:auto;
}
#from {
  margin:3em auto 1em auto;
  text-align:center;
}
</style>
</head>
<body>
<h1>Example external File with XML to JSON</h1>
1. Convert XML to JSON string (the XML content is from external file).
<h4>JavaScript Code</h4>
<pre class="code">
&lt;script type=&quot;text/javascript&quot; src=&quot;xml2json.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
// &lt;![CDATA[
// gets the JSON string from a file with XML content ("test.xml")
var jsonstr = xml2json.fromFile('test.xml', 'string');

// adds the JSON string in HTML element with id="jsnstr"
document.getElementById('jsnstr').innerHTML = jsonstr;
// ]]&gt;
&lt;/script&gt;
</pre>
<h4>Result this JSON string</h4>
<pre id="jsnstr"></pre><hr width="33%" /><br/>

2. Convert XML to JSON object (the XML content is from external file). Gets and adds into an HTML element the value of an attribute, and the text from a specified XML tag.
<h4>JavaScript Code</h4>
<pre class="code">
&lt;script type=&quot;text/javascript&quot; src=&quot;xml2json.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
// &lt;![CDATA[
// gets the JSON object from a file with XML content ("test.xml")
var jsonobj = xml2json.fromFile('test.xml');

// gets the attribute value from:  alexa.sd[0]['@attributes'].host
// and the text from:  alexa.sd[0].title['#text']
var attrhost = jsonobj.alexa.sd[0]['@attributes'].host;
var txttitle = jsonobj.alexa.sd[0].title['#text'];

// adds the values in HTML element with id="host"
document.getElementById('host').innerHTML = 'Host: '+ attrhost +'<br/>Title: '+ txttitle;
// ]]&gt;
&lt;/script&gt;
</pre>
<h4>Results:</h4>
<div id="host"></div>

<script type="text/javascript">
// <![CDATA[
// gets the JSON string from a file with XML content ("test.xml")
var jsonstr = xml2json.fromFile('test.xml', 'string');

// adds the JSON string in HTML element with id="jsnstr"
document.getElementById('jsnstr').innerHTML = jsonstr;

// gets the JSON object from a file with XML content ("test.xml")
var jsonobj = xml2json.fromFile('test.xml');

// gets the attribute value from:  alexa.sd[0]['@attributes'].host
// and the text from:  alexa.sd[0].title['#text']
var attrhost = jsonobj.alexa.sd[0]['@attributes'].host;
var txttitle = jsonobj.alexa.sd[0].title['#text'];

// adds the values in HTML element with id="host"
document.getElementById('host').innerHTML = 'Host: '+ attrhost +'<br/>Title: '+ txttitle;
// ]]>
</script>
<div id="from"><a href="http://coursesweb.net/javascript/" title="JavaScript / jQuery Courses">CoursesWeb.net</a></div>
</body>
</html>