Parsing XML to table with jQuery - javascript

I am using YQL to pull in a remote XML feed, I have this working in all other areas, but cannot get it to parse the data and format into a table. Here is my fiddle. The xml looks like this:
<string xmlns="http://tempuri.org/">
<?xml version="1.0" encoding="utf-16"?>
<BTCE>
<TickerList />
<Ticker>
<Average Value="" />
<BuyPrice Value="443.95" />
<Currency Value="USD" />
<High Value="456.96" />
<Low Value="424.00" />
<SellPrice Value="444.27" />
<Volume Value="18754.79784877" />
<LastPrice Value="443.95" />
<Time Value="04/28/2014 15:56:54" />
</Ticker>
<Ticker>
<Average Value="" />
<BuyPrice Value="444.32" />
<Currency Value="USD" />
<High Value="456.96" />
<Low Value="424.00" />
<SellPrice Value="444.70" />
<Volume Value="18762.65028563" />
<LastPrice Value="443.96" />
<Time Value="04/28/2014 15:57:57" />
</Ticker>
<Ticker>
<Average Value="" />
<BuyPrice Value="444.32" />
<Currency Value="USD" />
<High Value="456.96" />
<Low Value="424.00" />
<SellPrice Value="445.00" />
<Volume Value="18758.16227820" />
<LastPrice Value="444.32" />
<Time Value="04/28/2014 15:58:08" />
</Ticker>
</BTCE>
I have the following HTML mark up:
<table class="fluid" id="BuyOrders">
<tr>
<th>Price per/ BTC</th>
<th>Quantity, ฿</th>
<th>Total, $</th>
</tr>
</table>
Attempting to parse the xml like this:
$(function () {
site = 'http://ec2-54-201-216-39.us-west-2.compute.amazonaws.com/testc/WebService.asmx/GetTicker';
var yql = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent('select * from xml where url="' + site + '"') + '&format=xml&callback=?';
function loadTable() {
$.getJSON(yql, function (data) {
var xml = $.parseXML(data.results[0]),
xmlDoc = $.parseXML($(xml).find("string").text()),
$xml = $(xmlDoc),
$buyPrice = $xml.find("BuyPrice");
$volume = $xml.find("volume");
$sellPrice = $xml.find("SellPrice");
var tr;
for (var i = 0; i < xml.length; i++){
tr = $('<tr/>');
tr.append('<td>' + $buyPrice.attr("Value") + '</td>');
$('#BuyOrders').append(tr);
}
});
}
loadTable();
});

It seems you want to loop over each Ticker in the xml and add a row for each one with the relevant values:
function loadTable() {
$.getJSON(yql, function (data) {
var xml = $.parseXML(data.results[0]),
xmlDoc = $.parseXML($(xml).find("string").text()),
$xml = $(xmlDoc);
$xml.find("Ticker").each(function(){
var buyPrice = $(this).find("BuyPrice").attr("Value");
var tr = $("<tr/>");
tr.append("<td>" + buyPrice + "</td>");
/* ... any other tds here with various field values ... */
$("#BuyOrders").append(tr);
});
});
}
http://jsfiddle.net/3k7Tb/8/

Related

Storing Variables from a HTML input form?

I have a form that asks for info about employees, their name, age, position and details, this then has to be added to a div when a "Add Record" button is pressed.
Currently I have the Object Constructor setup but i'm a little lost on how to push the details to the div and how i should write the function to do so, previously i used a Canvas to display it.
Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<title>52DA session 5</title>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Quicksand"
rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="../css/employee_styles.css"/>
</head>
<body>
<div id="container">
<header>
<h1 id="heading" class="blueTxt">Employee Records</h1>
</header>
<div class="left">
<form>
<fieldset>
<legend><h2>Employee Details Entry</h2></legend>
<p class=><label>Name: <input class="text" type="text" id="name"
/></label></p>
<p><label>Age: <input class="text" type="text" id="age" /> c
</label></p>
<p><label>Position: <input class="text" type="text"
id="position" /></label></p>
<p><label>Details: <textarea type="text" id="details"
maxlength="114" ></textarea></label></p>
<input class="button" type="button" id="addRecord" onclick=""
value="Add Record"/>
</fieldset>
</form>
<div class="sort">
<h3>Sort</h3>
<button class="button" id="sortByName">By Name</button>
<button class="button" id="sortByAge">By Age</button>
<br/><button class="button" id="reset">Reset Details</button>
<br /><br />
</div>
</div>
<section>
<div id="employeeRecords">
</div>
</section>
</div>
<script src="../js/employee_script.js"></script>
</body>
</html>
var employees = [];
and my Javascript
//-------------------------------------------------------------------------
-------------------------------------
function Person(name, age, pos, dtls, img){
this.fullName = name;
this.employeeAge = age;
this.position = pos;
this.details = dtls;
this.avatarSrc = img;
this.createProfile = function(){
var profile = document.createElement("div");
profile.className = "profileStyle";
var avatar = document.createElement("img");
avatar.src = this.avatarSrc;
avatar.alt = this.fullName();
profile.appendChild(avatar);
var profileTxt = document.createElement("p");
profileTxt.innerHTML = "<b>" + this.fullName() +
"</b><br />" + this.age +
"</b><br />" + this.pos +
"</b><br />" + this.dtls;
profile.appendChild(profileTxt);
return profile;
}
employees.push(this);
}
for(var i=0; i < staff.length; i++){
document.getElementById("staff_list").appendChild(staff[i].createProfile());
}
//------------------------------------------------------------------------
-----------------------------------
function compareNames(a, b){
var nameA = //TODO - needs to refer to the employee name
var nameB = //TODO - needs to refer to the employee name
var result = 0;
if (nameA < nameB){
result = -1;
}
else if(nameA > nameB){
result = 1;
}
return result;
}
//-------------------------------------------------------------------------
-------------------------------------
function sortName(){
}
//--------------------------------------------------------------------------
------------------------------------
function sortAge(){
}
//-------------------------------------------------------------------------
-------------------------------------
function addRecord(){
}
//-------------------------------------------------------------------------
-------------------------------------
function writeRecords(){
//-------------------------------------------------------------------------
------------------------------------
function resetArray(){
}
//--------------------------------------------------------------------------
------------------------------------
function arrayButtons(){
}
You can do something like this.
elements = document.getElementById("myForm").elements;
for (var i = 0; i < elements.length; i++) {
var name = elements[i].name;
var val = elements[i].value;
name = name[0].toUpperCase() + name.slice(1);
var dsply = document.getElementById("dsply");
dsply.innerHTML += "<p>" + name + ": " + val + "</p>";
}
<form id="myForm" name="myForm">
<p>Title of the form</p>
<input type="text" name="user" value="Jon" />
<input type="age" name="age" value="26" />
<input type="text" name="pos" value="CEO" />
<textarea name="details">Enter Details here</textarea>
</form>
<div id="dsply">
</div>

generate dynamically a select type with options specified on add button click

i have seen a j query function that generates dynamically on button click an input type = text but how to generate dynamically select with options and get the value everytime.
the j query function:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function () {
$("#btnAdd").bind("click", function () {
var div = $("#TextBoxContainer");
div.append('<div>' + GetDynamicTextBox("") + '</div>');
});
$('form').on('submit', function (e) {
var values = "";
$("input[name=DynamicTextBox]").each(function () {
values += $(this).val() + "\n";
});
$("#<%= hdnfldVariable.ClientID %>").val(values);
});
$("body").on("click", ".remove", function () {
$(this).closest("div").remove();
});
});
function GetDynamicTextBox(value) {
return '<select name="Sexe" id="Sexe" class="field-select"></select>';
return '<input name = "DynamicTextBox" type="text" value = "' + value + '" /> ' +
'<input type="button" value="Remove" class="remove" />';
}
the html:
<input id="btnAdd" type="button" value="Add" />
<br />
<br />
<div id="TextBoxContainer">
<!--Textboxes will be added here -->
</div>
<br />
<button id="btnGet" runat="server" onserverclick="Submit_Click">Submit</button>
<asp:HiddenField ID="hdnfldVariable" runat="server" />
Try the below snippet. To grab the values of select on submit you can use:
$('#mySelect').val();
$("#getSelect").click(function(e) {
e.preventDefault();
var select = '<select name = "test" id="mySelect">Select</select>';
if ($('#selectholder').empty()) {
$('#selectholder').append(select);
}
for (i = 0; i < 10; i++) {
$('#mySelect').append('<option value="' + i + '">' + 'Option ' + i + '</option>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="getSelect">Display select</div>
<div id="selectholder"></div>

Html in Python communicating with JavaScript in Python

I have an html form that places text field data into a Javascript array. The code is shown here:http://jsbin.com/maniwu/3/edit?html,js,output.
var message = [];
var receiverInput = document.getElementById("Receiver");
var classificationInput = document.getElementById("Classification");
var titleInput = document.getElementById("Title");
var senderInput = document.getElementById("Sender");
var dateInput = document.getElementById("Date");
var messageBox = document.getElementById("display");
function insert() {
message.push(receiverInput.value);
message.push(classificationInput.value);
message.push(titleInput.value);
message.push(senderInput.value);
message.push(dateInput.value);
clearAndShow();
}
function clearAndShow() {
// Clear our fields
receiverInput.value = "";
classificationInput.value = "";
titleInput.value = "";
senderInput.value = "";
dateInput.value = "";
// Show our output
messageBox.innerHTML = "";
messageBox.innerHTML += "Sent Header " + message + "<br/>";
}
<html>
<body>
<form>
<input id="Receiver" type="text" placeholder="Receiver" />
<input id="Classification" type="text" placeholder="Classification" />
<input id="Title" type="text" placeholder="Title" />
<input id="Sender" type="text" placeholder="Sender" />
<input id="Date" type="text" placeholder="Date" />
<input type="button" value="Save/Show" onclick="insert()" />
</form>
<div id="display"></div>
</body>
</html>
But I want each embedded in Python 2.7 (windows, IDE: spyder) as shown below. How do I get them to communicate?
import js2py
js = ""
"
function classCollection() {
var message = [];
var receiverInput = document.getElementById("Receiver");
var classificationInput = document.getElementById("Classification");
var titleInput = document.getElementById("Title");
var senderInput = document.getElementById("Sender");
var dateInput = document.getElementById("Date");
var messageBox = document.getElementById("display");
function insert() {
message.push(receiverInput.value);
message.push(classificationInput.value);
message.push(titleInput.value);
message.push(senderInput.value);
message.push(dateInput.value);
clearAndShow();
}
function clearAndShow() {
receiverInput.value = "";
classificationInput.value = "";
titleInput.value = "";
senderInput.value = "";
dateInput.value = "";
messageBox.innerHTML = "";
messageBox.innerHTML += "Sent Header " + message + "<br/>";
}
document.write(message)
}
classCollection()
""
".replace("
document.write ", "
return ")
result = js2py.eval_js(js)
print result
import webbrowser f = open('classInformation.html','w') records = """
<html>
<body>
<form>
<input id="Receiver" type="text" placeholder="Receiver" />
<input id="Classification" type="text" placeholder="Classification" />
<input id="Title" type="text" placeholder="Title" />
<input id="Sender" type="text" placeholder="Sender" />
<input id="Date" type="text" placeholder="Date" />
<input type="button" value="Save/Show" onclick="insert()" />
</form>
<div id="display"></div>
</body>
</html>""" f.write(records) f.close() webbrowser.open_new_tab('classInformation.html')

HTML5 local storage not storing correctly

I don't know if I have understood the right context of 'storage', but according to some tutorials I used the following Javascript code, to enable a page to locally store (no session) submitted data, but when I close the page and reopen the page, the content do not appear.
script.js
function initiate()
{
var saveButton = document.getElementById('save');
var retrieveButton = document.getElementById('retrieve');
var deleteButton = document.getElementById('delete');
var reviewButton = document.getElementById('review');
saveButton.addEventListener('click', saveItem);
retrieveButton.addEventListener('click', retrieveItem);
deleteButton.addEventListener('click', deleteItem);
reviewButton.addEventListener('click', reviewAll);
}
function saveItem()
{
var key = document.getElementById('key').value;
var value = document.getElementById('value').value;
localStorage[key] = value;
}
function retrieveItem()
{
var data = document.getElementById('data');
var key = document.getElementById('key').value;
var value = localStorage[key];
data.innerHTML = '<div>' + key + ': ' + value + '</div>';
}
function deleteItem()
{
if (confirm('Delete?'))
{
var key = document.getElementById('key').value;
localStorage.removeItem(key);
data.innerHTML = '<div>Deleted.</div>';
}
}
function reviewAll()
{
for(var i = 0; i < localStorage.length; i++)
{
var key = localStorage.key(i);
var value = localStorage[key];
data.innerHTML += '<div>' + key + ': ' + value + '<br></div>';
}
}
addEventListener("load", initiate);
index.html
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="mystyles.css" />
<script src="script.js"></script>
<title>Demo HTML5</title>
</head>
<body>
<section id="formSection">
<form name="dataForm">
<label for="key">Key: </label><br />
<input type="text" id="key" name="key" /> <br />
<label for="value">Value: </label><br />
<textarea name="value" id="value"></textarea><br />
<input type="button" id="save" value="Save" />
<input type="button" id="retrieve" value="Retrieve" />
<input type="button" id="delete" value="Delete" />
<input type="button" id="review" value="Review" />
</form>
</section>
<section id="data">
No data
</section>
</body>
</html>
If you are using the browser in privacy mode, it will clear all localStorage data when you close it.

create an unordered list with jquery using xml

I have an xml file which i want to convert to an unordered list using jquery.
so far I managed to get the list working, except for the third level of the xml. Currently my code writes all child items of 'Navigation_sub_3'.
What I'm trying to figure out is how to write only the child nodes that are in level_2, so the output would be
Strategy
Views
IBM
etc.
UML
Development
Architecure
etc
Platform
Model
BPEL
OSLO
etc
Service
Google
Live
etc.
Below is my html/jquery file and the xml. Can anyone help me out how to display the 3rd level?
Cheers
Chris
test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="js/jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
function XmlOnLoad(xmlData, strStatus)
{
var jData = $(xmlData);
var jccNav = jData.find("Navigation");
var jSections = jccNav.children();
var jList = $("#Navi");
jSections.each(function(intSectionIndex)
{
var jSection = $(this);
var jTerm = $("<li></li>");
var jDef2 = $("<ul></ul>");
var jLevel2 = $("<b></b>");
var jLevel3 = $("<b></b>");
jSection.children().children().each(function(intPartIndex)
{
var jPart3 = $(this);
var jText3 = $("<li></li>");
// Set the li text.
jText3.html("<a>" + jPart3.attr("tooltip") + "3.level</a>");
// Append to list.
jLevel3.append(jText3);
});
jSection.children().each(function(intPartIndex)
{
var jPart2 = $(this);
var jText2 = $("<li></li>");
// Set the li text.
jText2.html("<a>" + jPart2.attr("tooltip") + " 2.level </a><ul>" + jLevel3.html());
// Append to list.
jLevel2.append(jText2);
});
jTerm.html("<a>"
+ $(this).attr("tooltip")
+ "1.ebene</a>"
+ "<ul>"
+ jLevel2.html()
);
jList.append(jTerm);
$("#homer").html(jList.html());
});
};
$(document).ready(function()
{
$.get("content.xml", {}, XmlOnLoad);
});
</script>
</head>
<body>
<div id="homer"></div>
</body>
</html>
Content.xml
<?xml version="1.0" encoding="utf-8"?>
<Navigation>
<Navigation_sub_1 tooltip="Strategy">
<!--1 Button-->
<level_2 name="Nav1" number="5" tooltip="Views">
<level_3 name="Nav1_5" number="15" tooltip="IBM" />
<level_3 name="Nav1_5" number="13" tooltip="Mainframe" />
<level_3 name="Nav1_5" number="7" tooltip="Novell" />
<level_3 name="Nav1_5" number="6" tooltip="Open- Source"/>
<level_3 name="Nav1_5" number="1" tooltip="Oracle" />
<level_3 name="Nav1_5" number="9" tooltip="SAP" />
<level_3 name="Nav1_5" number="8" tooltip="Sun" />
</level_2>
</Navigation_sub_1>
<!--2 Button-->
<Navigation_sub_2 tooltip="UML">
<level_2 name="Nav2" number="5" tooltip="Development">
<level_3 name="Nav2_5" number="10" tooltip="Architecture"/>
<level_3 name="Nav2_5" number="6" tooltip="Patterns" />
<level_3 name="Nav2_5" number="1" tooltip="SOA" />
</level_2>
</Navigation_sub_2 >
<!--3 Button-->
<Navigation_sub_3 tooltip="Platform">
<level_2 name="Nav3" number="1" tooltip="Model">
<level_3 name="Nav3_1" number="15" tooltip="BPEL" />
<level_3 name="Nav3_1" number="9" tooltip="BPMN" />
<level_3 name="Nav3_1" number="7" tooltip="DSL" />
<level_3 name="Nav3_1" number="10" tooltip="Oslo" />
<level_3 name="Nav3_1" number="1" tooltip="UML" />
</level_2>
<level_2 name="Nav3" number="7" tooltip="Service" >
<level_3 name="Nav3_7" number="3" tooltip="Azure Services" />
<level_3 name="Nav3_7" number="11" tooltip="ISB" />
<level_3 name="Nav3_7" number="6" tooltip="Live" />
<level_3 name="Nav3_7" number="8" tooltip="Live Mesh" />
<level_3 name="Nav3_7" number="13" tooltip="REST" />
<level_3 name="Nav3_7" number="9" tooltip="Web- services" />
<level_3 name="Nav3_7" number="1" tooltip="Windows Azure" />
</level_2>
</Navigation_sub_3>
</Navigation>
Have you tried to use some recursion? You could write a javascript function called writeSection. This function would write each node in a section and then if a node has children, it would call itself to write those children.

Categories

Resources