|
JavaScript - How To Extract Data From Xml Using Js
I am working on a simple movie database to practise my JavaScript and have encountered difficulty extracting information from the xml file. Let me explain my scenario. Sorry if it gets a bit long-winded!
The interface I have created has three columns which each serve the following functions: Column 1 -> The user selects a film of their choice. Column 2 -> Once the user has selected a film in Column 1 then more information about the film appears in this column. This includes title, director and cast. The user has the option of then selecting a cast member to find out information about them. Column 3 -> Once the user has selected a cast member in Column 2 then their name and a picture of them appears in this column (using the <img> tag). This information in this column also includes the film title, film artwork (applied <img> tag). But the difficulty I have encountered is as follows - I have a rough idea of how to update column 2 in real time to reflect the changes in Column 1. The method I am using for acquiring the relevant information in Column 2 is creating an array then using the indexOf to retrieve a the details of a specific film. I know this method is wrong and it would be better to pull the relevant information from the xml file. How do I use the idx from the Column 1 selection to pull out the relevant information to put in Column 2 and 3? Here is what I've done so far: Code: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function XMLload() {
jQuery.post(url, function(data) {getxml(data)}, 'xml');
}
function dataFromTag(node, t) {
var d = node.getElementsByTagName(t);
if (d.length == 0) return ('');
return (d[0].firstChild.nodeValue);
}
jQuery(document).ready(function() {XMLload();});
var url = 'movie.xml';
var xmlMovies;
var aryMovieList = [];
var xmlActors;
var aryActors = [];
var iframeOpen = '<html><head><\/head><body>'
var iframeClose = '<\/select><\/form><\/body><\/html>'
function getxml(xmldoc) {
xmlMovies = xmldoc.getElementsByTagName('movie');
var hstr = iframeOpen;
hstr += '<select size="' + xmlMovies.length + '" onchange="parent.actors(this.selectedIndex);">';
for (var MovieID = 0; MovieID < xmlMovies.length; MovieID++) {
aryMovieList[aryMovieList.length] = dataFromTag(xmlMovies[MovieID], "title");
xmlActors = xmlMovies[MovieID].getElementsByTagName("actor");
for (var ActorID = 0; ActorID < xmlActors.length; ActorID++) {
aryActors[aryActors.length] = dataFromTag(xmlMovies[MovieID], "director") + "/" + dataFromTag(xmlMovies[MovieID], "title") + "/" + dataFromTag(xmlActors[ActorID], "name");
}
hstr += '<option>' + aryMovieList[MovieID] + '<\/option>';
}
hstr += iframeClose;
// test for aryMovieList
// alert(aryMovieList);
// test for aryActors
// alert(aryActors);
with(document.getElementById('movies').contentDocument) {
open();
write(hstr);
close();
}
}
function actors(idx) {
var hstr = iframeOpen;
var selectActor = [];
hstr += 'title: ' + dataFromTag(xmlMovies[idx], 'title');
hstr += '<br>';
hstr += 'director: ' + dataFromTag(xmlMovies[idx], 'director');
hstr += '<br>';
for (var i = 0; i < aryActors.length; i++) {
var aryActorList = aryActors[i].indexOf(dataFromTag(xmlMovies[idx], 'director') + '/' + dataFromTag(xmlMovies[idx], 'title'));
if (aryActorList >= 0) {
selectActor[selectActor.length] = i;
}
}
// alert(selectActor);
hstr += '<select size="' + selectActor.length + '" onchange="parent.info(this.selectedIndex);">';
for (var i = 0; i < aryActors.length; i++) {
var aryActorList = aryActors[i].indexOf(dataFromTag(xmlMovies[idx], 'director') + '/' + dataFromTag(xmlMovies[idx], 'title'));
if (aryActorList >= 0) {
hstr += '<option>' + aryActors[i].substring(aryActors[i].lastIndexOf("/") + 1) + '<\/option>';
}
}
hstr += iframeClose;
with(document.getElementById('actors').contentDocument) {
open();
write(hstr);
close();
}
}
function info(idx) {
var hstr = iframeOpen;
hstr += '';
hstr += iframeClose;
with(document.getElementById('info').contentDocument) {
open();
write(hstr);
close();
}
}
</script>
</head>
Here is the XML file in use: Code: <movies>
<movie>
<title>Match Point</title>
<director>Woody Allen</director>
<image>Match-Point.jpg</image>
<actor>
<name>Scarlett Johansson</name>
<image>Scarlett-Johansson.jpg</image>
</actor>
<actor>
<name>Brian Cox</name>
<image>Brian-Cox.jpg</image>
</actor>
<actor>
<name>Matthew Goode</name>
<image>Matthew-Goode.jpg</image>
</actor>
<actor>
<name>Penelope Wilton</name>
<image>Penelope-Wilton.jpg</image>
</actor>
</movie>
<movie>
<title>Inception</title>
<director>Christopher Nolan</director>
<artwork>Inception.jpg</artwork>
<actor>
<name>Leonardo DiCaprio</name>
<image>Leonardo-DiCaprio.jpg</image>
</actor>
<actor>
<name>Ken Watanabe</name>
<image>Ken-Watanabe.jpg</image>
</actor>
<actor>
<name>Joseph Gordon-Levitt</name>
<image>Joseph-Gordon-Levitt.jpg</image>
</actor>
<actor>
<name>Marion Cotillard</name>
<image>Marion-Cotillard.jpg</image>
</actor>
<actor>
<name>Ellen Page</name>
<image>Ellen-Page.jpg</image>
</actor>
<actor>
<name>Tom Hardy</name>
<image>Tom-Hardy.jpg</image>
</actor>
</movie>
<movie>
<title>Blade II</title>
<director>Guillermo del Toro</director>
<artwork>Blade-II.jpg</artwork>
<actor>
<name>Wesley Snipes</name>
<image>Wesley-Snipes.jpg</image>
</actor>
<actor>
<name>Kris Kristofferson</name>
<image>Kris-Kristofferson.jpg</image>
</actor>
<actor>
<name>Ron Perlman</name>
<image>Ron-Perlman.jpg</image>
</actor>
<actor>
<name>Leonor Varela</name>
<image>Leonor-Varela.jpg</image>
</actor>
<actor>
<name>Norman Reedus</name>
<image>Norman-Reedus.jpg</image>
</actor>
</movie>
<movie>
<title>Pulp Fiction</title>
<director>Quentin Tarantino</director>
<artwork>Pulp-Fiction.jpg</artwork>
<actor>
<name>John Travolta</name>
<image>John-Travolta.jpg</image>
</actor>
<actor>
<name>Samuel L Jackson</name>
<image>Samuel-L-Jackson.jpg</image>
</actor>
<actor>
<name>Uma Thurman</name>
<image>Uma-Thurman.jpg</image>
</actor>
<actor>
<name>Harvey Keitel</name>
<image>Harvey-Keitel.jpg</image>
</actor>
</movie>
<movie>
<title>Avatar</title>
<director>James Cameron</director>
<artwork>Avatar.jpg</artwork>
<actor>
<name>Sam Worthington</name>
<image>Sam-Worthington.jpg</image>
</actor>
<actor>
<name>Zoe Saldana</name>
<image>Zoe-Saldana.jpg</image>
</actor>
<actor>
<name>Stephen Lang</name>
<image>Stephen-Lang.jpg</image>
</actor>
<actor>
<name>Michelle Rodriguez</name>
<image>Michelle-Rodriguez.jpg</image>
</actor>
</movie>
</movies>
Many thanks in advance! Similar TutorialsIf I wanted to extract certain parts of the URL... how can I do this? I know how to extract the entire URL or just the search query but what if i want to do this /boxscore.asp?w=2&s=4&yr= Just extract the numbers 2 and 4 from the url. I want to make a new link for this site I am on to plug those 2 numbers into here /game.asp?gnum=2&gslot=4 That's basically what i want the new window to read. Hi all, I've a set of similar elements (to display thumbnails) having style attributes like Code: style="background:#ddd url('/images/photos/thumbs/89625045.jpg') top center no-repeat;"
Code: style="background:#ddd url('/images/photos/thumbs/708905 copy.jpg') top center no-repeat;"
etc. I need to get the background-image urls from the style (and then remove the part thumbs). My intention is to dynamically create an img element corresponding to each thumbnail image. I was thinking to use a substr() to get the urls and replace() to remove "thumbs", but the property style.backgrounImage gives a string like Code: url("/images/photos/thumbs/4923face.jpg")
in FF3, where as in FF2 and IE6 it gives Code: url(/images/photos/thumbs/4923face.jpg) . How can I proceed with this? Any help would be apreciated. Thanks. Hi, I'm a beginner of JavaScript. I need the code for creating pgv_pvid and ssid. I had searched the web, and got some code, I wonder if the code is right: Code: var curDate = new Date(); var curMs = curDate.getUTCMilliseconds(); pgv_pvid = (Math.round(Math.random() * 2147483647) * curMs) % 10000000000; ssid = "s" + (Math.round(Math.random() * 2147483647) * curMs) % 10000000000; WScript.Echo(pgv_pvid) WScript.Echo(ssid) I'm sure this is probably a simple question, but I'm going to ask anyway. I need to extract part of a URL and place it into a variable for use elsewhere on the page. The part to be extracted will be of varying lengths. As an example, if I have the following URL: http://more.stltoday.com/stltoday/st...e?OpenDocument I need to extract "SS". Basically, anything that appears between "static.nsf/" and "/Steve's_APT_test_page". That value needs to be put into a variable and called elsewhere on the page. For testing purposes, I'm using the following code, just to see if it works (which, so far, it doesn't): Code: <script type= type="text/javascript" language="javascript">
var page_url = window.location.href;
var segments = page_url.split("/");
alert(segments[4]);
</script>
Can anyone help? Thanks, Steve Hi, How I get the images tags from an HTML page with Javascript (SRSc)? Regards FG I want to type urls in a text field, submit such urls and extract pictures of these web pages. Does anyone know how I can do this using javascript? Thanks, Marcelo Brazil Hi, I currently have a asp.NET page which has a textbox with the ID: "txtbox1" I would like javascript to store the data entered into txtbox1 into a var. I have tried using var jVarName; jVarName = '<%#aVarName%>'; but so far it hasnt worked. Any suggestions would be appreciated ^^ Hi, I have an idea for putting news articles on my phone to read later when I have time. I'd like to be able to right-click the text of an article and choose "Send to Phone Queue." When I've got a few articles in the queue, I'd like to be able to bluetooth the file to my phone. I know some HMTL and CSS, but I'm very much a novice when it comes to JavaScript. I'm thinking that I probably can't even do a lot of this with JS because of it's limitations (i.e. writing to a file). Will I need to use PHP or Java for writing/bluetoothing the file? I was playing around with extracting the body-text of an article from FoxNews.com. I didn't get very far but you can see where I'm going with it. I welcome any comments, criticisms, etc. Thanks for anything you say, even shooting this down as unrealistic. Code:
function getBodyText() {
var divList = document.getElementsByTagName('div');
for ( i=0; i<=divList.length; i++) {
if (divList[i].getAttribute("class") == "entry-content KonaBody") {
. . .
Why do I get both the greedy and non-greedy? How do I extract "somestring" only? I'm on IE7. thanks Code: <script type="text/javascript"> var x = "(EVAL)(H:somestring)Some other Text here"; var full =(x.match(/\(H\:(.*?)\)/g)); // produces "(H:somestring)" as expected alert(full); var inside = (x.match(/\(H\:(.*)\)/)); // produces "(H:somestring),somestring" .. I only want "somestring" alert(inside); </script> I have a string of text, and starting from a particular spot (known to be a number), I want to find the length of that number. Here's what I have: Code: ...
var start = [...predetermined...]
var end = 0;
while (!isNaN(sourceCode.charAt(start + end))){
endCurrent++;
}
var myNum = sourceCode.substr(start, end) * 1;
So let's say var sourceCode = "alkdjabjasdsdf-53 dnalsdb..."; , startCurrent will already be at the "5" and I want to be able to extract the "53". What I have works, but it seems cumbersome... Any advice? I am trying to redevelop firefox addon, to give it more funcionality. I found JS file where all the functions are and started to edit it. What I want to achieve is to get target of an anchor under mouse pointer (when mouse pointer is over anchor, I right click and call addon from context menu). For example when I have anchor which HTML code is: Code: <a href="somewehere.com/place">place</a> when I right click on this code and call my addon I would like to alert its href (somewehere.com/place) I wrote a function: Code: function ff()
{
var current_target=this.href;
alert(current_target);
}
but it gives me udefined on alert Any hints to achieve this are highly appreciated. Thanks Hello, I run a online gaming website, and I'm having problems with certain websites iframing our games. Actually I'm ok with iframing, as long as they include the banner ad located just beneath our games. But often times unscrupulous webmasters will iframe only the game, preventing us from generating any revenue from the banner ad (and costing us additional bandwidth charges). I'm hoping to find a way to detect the dimensions of the iframe, so that I may dynamically resize the game, in order to include the banner ad within the iframe. Does anybody know how to extract the "height" and "width" attribute values from an <iframe> tag sitting on a different site? Regards, Steve Hi, I have a div "bigPicture" which contains an image of Thai food. Image can change based on a users onclick of thumbnails. Each image as it passes through div "bigPicture" needs to have the values: price, description and Date,Time associated with it. How do I assign those values and use them later in a Shopping Cart environment. I have tried getelementbyId.innerHTML using alert to see what I can get but it is too much information. website address is http://www.kohchangbookingandinforma.../ATT/index.asp Thanks for your consideration Robby Html Code Code: <div id="itemStockUnit"> Qty <input type="text" size="2" value="1" class="quantity"> <select id="stockUnit" style="width:100%"> <option rel="Window1;7-10;153.00;140.24;">615W x 705H (mm)</option> <option rel="Windows2;7-10;187.00;171.09;">625W x 745H (mm)</option> <b>Delivery:</b> <span id="itemDeliveryTime">7-10</span> days <br> <small><b>RRP:</b> £<span id="itemRRPPrice">153.00</span></small> <br> <b>Our Price: <span id="itemOurPrice">£140.24</span></b> </div> JavaScript Code: <script type="text/javascript">
google.setOnLoadCallback(function() {
$("#stockUnit").change(function(){
var data = ($("option:selected",this).attr("rel")).split(";");
$("#itemDeliveryTime").fadeOut().html(data[1]).fadeIn();
$("#itemRRPPrice").fadeOut().html(data[2]).fadeIn();
$("#itemOurPrice").fadeOut().html(data[3]).fadeIn();
});
});
</script>
I have set data types to each option however the javascript above doesnt make it change any help? Hello, Im new to JavaScript and this forum, right now im looking for a simple JS script, that will get the data out from the url and print it on my webpage: http://www.asecurecart.net/server/ca...report=1&xml=1 I think it should looks like this: Mypage.htm Code: < Some JavaScript Code Im looking for> <html> Your shopping cart: <br> Items: <script type="text/JavaScript"><!--document.write(item_total)//--> </script> <br> Order Total: <script type="text/JavaScript"><!--document.write(order_total)//--> </script> </html> Any help would be very appreciated. Thanks. Anyone that can help on this one it would be greatly appreciated... I need to make a form parses a result from column 1 of txt/csv file that has 7 columns. Column 1 is pay, column 2-7 are how many and the associated rows are the answers. In short 1 2 3 4 5 6 700 50 55 62 75 80 99 so if the customer enters i make 700 and i need 2 the result would be 55 as the output. Any idea on how to make that work with javascript? if (pay <=700 && widgets = 2) { document.write(55) elseif (pay <=700 && widgets = 1) document.write(50) is this doable and is it the easiest way to accomplish this? I am still learning HTML, JavaScript and web design, so be patient with and reply in details. I want to be able to send data store in JavaScript variable to my email account. I have tried using mailto: command and for some reason it doesn't work. C Can someone please show me how to in details. Hi guys, I'm trying to run this sample file that i got from the google docs. I want to write a stock ticker from google finances xml feed and this is a sample they had. Code: <?xml version="1.0" encoding="utf-8"?>
<Module>
<ModulePrefs title="hellofinance">
<Require feature="finance"/>
</ModulePrefs>
<Content type="html">
<![CDATA[
Hello world!
Here is your portfolio:<br/>
GOOG: <span id=_IG_SYM1_l></span> (<span id=_IG_SYM1_c></span>)<br/>
AAPL: <span id=_IG_SYM2_l></span> (<span id=_IG_SYM2_c></span>)<br/>
INTC: <span id=_IG_SYM3_l></span> (<span id=_IG_SYM3_c></span>)<br/>
<script>
var quote = new google.finance.Quote();
quote.enableDomUpdates( { 'GOOG' : '_IG_SYM1', 'AAPL' : '_IG_SYM2',
'INTC' : '_IG_SYM3' } );
quote.getQuotes(["GOOG", "AAPL", "INTC"]);
</script>
]]>
</Content>
</Module>
my problem is i don't know how to execute it so i can see how it works. I tried sticking this code within a php file and it returns an error on the first line for unexpected t-string. So i tried changing the extension to xml and it just displays the code but does not execute. I'm stumped. Any help is appreciated. Thanks P.S. - Yes i do have the zend gdata framework installed and running on my server and is working correctly according to their test. Hi, I would like to use the following chart in my webpage http://people.iola.dk/olau/flot/examples/visitors.html the data being used in the chart example above looks like this: [1196722800000, 77], [1196809200000, 3636], [1196895600000, 3575], ... I guess that the long number is the date?! The data I have is: a date that is coming from my database which was added using the date(); object and a numerical figure such as 21.365 or 30.432 or 36.856 here is my code below currently in a list format (HTML): Code: <script type="text/javascript" charset="utf-8">
var html5rocks = {};
html5rocks.webdb = {};
html5rocks.webdb.db = null;
html5rocks.webdb.open = function() {
var dbSize = 10 * 1024 * 1024; // 10MB
html5rocks.webdb.db = openDatabase("Todo", "1.0", "Todo manager", dbSize);
}
html5rocks.webdb.createTable = function() {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("ALTER TABLE bmical ADD bmires INTEGER");
tx.executeSql("CREATE TABLE IF NOT EXISTS bmical(ID INTEGER PRIMARY KEY ASC, height1 TEXT, weight1 TEXT, bmires TEXT, added_on DATETIME)", []);
});
}
html5rocks.webdb.addTodo = function(todoText) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
var weight1 = document.getElementById("weight1").value;
var height2 = todoText / 100
var BMI = weight1 / (height2 * height2)
var BMI = BMI;
var bmires = BMI.toFixed(3);
var addedOn = new Date();
tx.executeSql("INSERT INTO bmical(height1, weight1, bmires, added_on) VALUES (?,?,?,?)",
[todoText, weight1, bmires, addedOn],
html5rocks.webdb.onSuccess,
html5rocks.webdb.onError);
});
}
html5rocks.webdb.onError = function(tx, e) {
alert("There has been an error: " + e.message);
}
html5rocks.webdb.onSuccess = function(tx, r) {
// re-render the data.
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}
html5rocks.webdb.getAllTodoItems = function(renderFunc) {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM bmical ORDER BY added_on DESC", [], renderFunc,
html5rocks.webdb.onError);
});
}
html5rocks.webdb.deleteTodo = function(id) {
var db = html5rocks.webdb.db;
db.transaction(function(tx){
tx.executeSql("DELETE FROM bmical WHERE ID=?", [id],
html5rocks.webdb.onSuccess,
html5rocks.webdb.onError);
});
}
function loadTodoItems(tx, rs) {
var rowOutput = "";
var todoItems = document.getElementById("todoItems");
for (var i=0; i < rs.rows.length; i++) {
rowOutput += renderTodo(rs.rows.item(i));
}
todoItems.innerHTML = rowOutput;
}
function renderTodo(row) {
return "<li>On: " + row.added_on + " Height: " + row.height1 + " Weight: " + row.weight1 + " BMI: " + row.bmires + "<a class='delete' href='javascript:void(0);' onclick='html5rocks.webdb.deleteTodo(" + row.ID +");'>Delete</a></li>";
}
function init() {
html5rocks.webdb.open();
html5rocks.webdb.createTable();
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}
function addTodo() {
var height1 = document.getElementById("height1");
html5rocks.webdb.addTodo(height1.value);
height1.value = "";
}
</script>
the 2 variables I'd like to use a bmires, addedOn need help.... I need to create a web page that can pull data from sensatronics senturion sensor probe. The unit has a web server that displays temperature, humidity,etc. You can also query it for from telnet or webpage which kicks back xml. My page needs to read the values of the probes. I don't know much about javascript and have been unsuccessful trying to use httprequest. I guess this would be considered cross domain as well? Here is the XML that is generated from the unit. I get this by pulling through a web browser x.x.x.x/xmldata Thanks <?xml version="1.0" encoding="ISO-8859-1"?> <Sensatronics id="S10604" hb="10554"> <Group id="1"> <Probe id="100"><Value>75.2</Value></Probe> </Group> <Group id="2"> </Group> <Group id="3"> </Group> <Group id="4"> </Group> <Group id="5"> </Group> <Group id="6"> </Group> <Group id="7"> </Group> <Group id="8"> </Group> <Group id="9"> <Probe id="99"><Value>1.0</Value></Probe> <Probe id="1"><Value>79.5</Value></Probe> <Probe id="2"><Value>34.3</Value></Probe> <Probe id="3"><Value>35.6</Value></Probe> <Probe id="4"><Value>0.0</Value></Probe> </Group> </Sensatronics> |
|||||||