How to Read Xml content using Jquery
XML FILE CONTENT
<?xml version="1.0" encoding="utf-8"?>
<cars>
<car company="TOYOTA">
<product>Prius</product>
<colors>
<color>white pearl</color>
<color>Red Methalic</color>
<color>Silver Methalic</color>
</colors>
<type>Gen-3</type>
</car>
<car company="TOYOTA">
<product>New Fortuner</product>
<colors>
<color>super white</color>
<color>Black</color>
<color>Silver</color>
</colors>
<type>Fortuner TRD Sportivo Limited Edition</type>
</car>
<car company="Subbu">
<product>aaaa</product>
<colors>
<color>bbbbbb</color>
<color>ccccc</color>
<color>fffffff</color>
</colors>
<type>Fortuner TRD Sportivo Limited Edition</type>
</car>
</cars>
HTML CODE
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js">
</script>
<script>
$(document).ready(function() {
$('#car').click(function() {
$.get('data.xml',function(data){
$('#content').empty();
$(data).find('car').each(function(){
var $car = $(this);
var mycontent = '<div class="data">';
mycontent += '<h3>' + $car.attr('company') + '</h3>';
mycontent += '<div class="product">' + $car.find('product').text() + '</div><br />';
mycontent += '<div class="colors">' + $car.find('colors').text()+'<br />' + '</div><br />';
mycontent += '<div class="type">' + $car.find('type').text() + '</div><br />';
$car.find('color').each(function(){mycontent += '<div class="colors">' +$(this).text()+'<br>'+'</div><br />'});
$('#content').append(mycontent);
$car.find('color').each(function() {
$("#content").append($(this).text()+'<br>');
});
s });
});
return false;
});
});
</script>
</head>
<body>
<a href="#" id="car">Car</a>
<div id="content"></div>
</body>
</html>
Note: main content of xml reading and adding your conditoin like this
XML FILE CONTENT
<?xml version="1.0" encoding="utf-8"?>
<cars>
<car company="TOYOTA">
<product>Prius</product>
<colors>
<color>white pearl</color>
<color>Red Methalic</color>
<color>Silver Methalic</color>
</colors>
<type>Gen-3</type>
</car>
<car company="TOYOTA">
<product>New Fortuner</product>
<colors>
<color>super white</color>
<color>Black</color>
<color>Silver</color>
</colors>
<type>Fortuner TRD Sportivo Limited Edition</type>
</car>
<car company="Subbu">
<product>aaaa</product>
<colors>
<color>bbbbbb</color>
<color>ccccc</color>
<color>fffffff</color>
</colors>
<type>Fortuner TRD Sportivo Limited Edition</type>
</car>
</cars>
HTML CODE
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js">
</script>
<script>
$(document).ready(function() {
$('#car').click(function() {
$.get('data.xml',function(data){
$('#content').empty();
$(data).find('car').each(function(){
var $car = $(this);
var mycontent = '<div class="data">';
mycontent += '<h3>' + $car.attr('company') + '</h3>';
mycontent += '<div class="product">' + $car.find('product').text() + '</div><br />';
mycontent += '<div class="colors">' + $car.find('colors').text()+'<br />' + '</div><br />';
mycontent += '<div class="type">' + $car.find('type').text() + '</div><br />';
$car.find('color').each(function(){mycontent += '<div class="colors">' +$(this).text()+'<br>'+'</div><br />'});
$('#content').append(mycontent);
$car.find('color').each(function() {
$("#content").append($(this).text()+'<br>');
});
s });
});
return false;
});
});
</script>
</head>
<body>
<a href="#" id="car">Car</a>
<div id="content"></div>
</body>
</html>
Note: main content of xml reading and adding your conditoin like this
No comments:
Post a Comment