JavaScript Read XML File local Example

Today, We want to share with you JavaScript Read XML File local.In this post we will show you reading xml file in javascript example, hear for JavaScript – Read And Display XML we will give you demo and example for implement.
In this post, we will learn about Reading and Showing XML Data with JavaScript with an example.

javascript read xml file

There are the Following The simple About JavaScript Read XML File Local system Full Information With Example and source code.

The Main HTML Interface

index.html.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	</head>
<body>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<a class="navbar-brand" href="https://infinityknow.com">infinityknow</a>
</a>		</div>
	</nav>
	<div class="col-md-3"></div>
	<div class="col-md-6 well">
		<h3 class="text-primary">Javascript - Read And Display XML Using jQuery</h3>
		<hr style="border-top:1px dotted #ccc;"/>
		<button type="button" class="btn btn-success" id="generate">Generate Data</button>
		<br /><br />
		<table class="table table-bordered">
			<thead class="alert-info">
				<tr>
					<th>Student Name</th>
					<th>Student Lastname</th>
					<th>Information</th>
				</tr>
			</thead>
			<tbody id="result" style="background-color:#fff;"></tbody>
		</table>
	</div>
</body>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/script.js"></script>
</html>

Creating the Script

script.js

$(document).ready(function(){
 
	var xml = 
	"<?xml version='1.0' ?>"
	+ "<doc>"
	+"		<student>"
	+"			<studentname>Jaydeep</studentname>"
	+"			<studenlname>Gondaliya</studenlname>"
	+"			<studenlnfo>Rajkot</studenlnfo>"
	+"		</student>"
	+"		<student>"
	+"			<studentname>Krunal</studentname>"
	+"			<studenlname>Sisodiya</studenlname>"
	+"			<studenlnfo>Surat</studenlnfo>"
	+"		</student>"
	+"		<student>"
	+"			<studentname>Ankit</studentname>"
	+"			<studenlname>kathiriya</studenlname>"
	+"			<studenlnfo>Bhavanagar</studenlnfo>"
	+"		</student>"
	+"		<student>"
	+"			<studentname>Milan</studentname>"
	+"			<studenlname>rupavatiya</studenlname>"
	+"			<studenlnfo>Tokyo</studenlnfo>"
	+"		</student>"
	+"	</doc>";
 
 
	$('#generate').on('click', function(){
		var data = $.parseXML(xml); 
 
		var $xml = $(data);
 
		var $student = $xml.find("student");
 
		var content = "";
		$student.each(function(){
 
			var studentname = $(this).find('studentname').text();
			var studenlname = $(this).find('studenlname').text();
			var studenlnfo = $(this).find('studenlnfo').text();
 
			content += "<tr>"
				+ "<td>"+studentname+"</td>"
				+ "<td>"+studenlname+"</td>"
				+ "<td>"+studenlnfo+"</td>"
				+ "</tr>";
 
			$("#result" ).html(content);
 
		});
	});
 
 
});

jQuery 15 Powerful Tips and Tricks for Developers and Web Designer

Read :

READ : C# Extension Methods Tutorial with Examples

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about reading xml file in javascript example.
I would like to have feedback on my Infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Post Views: 1,057